JS中实现深拷贝的几种方法(object,Array)

JavaScript058

JS中实现深拷贝的几种方法(object,Array),第1张

4.通过第三方工具实现深拷贝

lodash.cloneDeep

数组深拷贝

1. concat(arr1, arr2,....)

2. slice(idx1, idx2)

参数可以省略

1)没有参数是拷贝数组

2)只有一个参数是从该位置起到结束拷贝数组元素

3)两个参数,拷贝从起始位置到结束位置的元素(不包含结束位置的元素:含头不含尾)

注意:当数组中的元素均为一维是深拷贝

          数组中元素一维以上是值的引用

近日在写一个新功能的时候,其实没有很难,数据交互有一点复杂,发灰度之后,自测出一个小bug,虽然整体上似乎无伤大雅,但是发现了就犯强迫症想要解决,仔细debug了一晚上+一上午,甚至把自己组件拆分,数据传递的逻辑都重新理了一遍,实在没发现什么问题,一直看断点,数据在某一个阶段没有按照理想的状态变化,但是一直没明白是为什么,原本没往深浅拷贝的方面去想,一直纠结于各个组件之间的state的变化等等,最后突然灵光了一把,原来是这么小的错误,可把我愁了半天。就是某onchange函数中 把state里的数组赋值给新的变量,新的变量对数组做了一些操作,但却把state里面原本的值也修改了 (这是之前一直没发现的),正好其他地方state里的此数组是需要修改的,所以整体上似乎没产生什么影响,但在那个onchange函数里就改变了,会影响第一次渲染之后的再次渲染数据显示有错误。解决了也是终于舒畅了~特此记录,一定要重视对象的深浅拷贝!!一不小心就用错了酿成大祸!

 js中储存对象都是存引用地址,所以浅拷贝会导致两个变量指向同一块内存地址。数组的赋值其实相当于给了索引,改变其中一个变量其他的引用其他都会改变。如下为浅拷贝

// var a = [1,2,3]

// var b = a  //此步不是赋值,而是将a的引用赋给b,所以改变b也会改变a

// b[0]=4

// a为[4,2,3]

// b为[4,2,3]

总的来说 :原始参数(比如一个具体的数字)被作为值传递给函数,如果被调用函数改变了这个参数的值,这样的改变不会影响到全局或调用函数。但当你传递一个对象(js里数组也是对象)到一个函数,如果在函数里面改变了这个参数的内容,那么这个改变在外部是可见的,也就是会影响到全局。

深拷贝数组的方法:

(1)slice函数,newArr = arr.slice(0)

(2)concat函数,newArr = [].concat(arr,arr2,...)

(3)assign函数(对象),newObj = object.assign({},obj)

但以上三种方式都是对对象第一层的深拷贝,第二层之后还是浅拷贝,要实现多维数组的深拷贝可以用:

newArr = JSON.parse(JSON.stringify(arr))

如何实现数组深拷贝和浅拷贝?

1.背景介绍

javascript分原始类型与引用类型。Array是引用类型,直接用“=”号赋值的话,只是把源数组的地址(或叫指针)赋值给目的数组,并没有实现数组的数据的拷贝。这种方式的实现属于浅拷贝。

深拷贝是开辟新的储存空间,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

2.知识剖析

一维数组的深拷贝方法:slice()和concat()

slice()的使用方法

slice()语法:arrayObj.slice(start,[end])

slice方法是通过参数start和end的传入值来返回数组中的一段,该方法不对原数组进行操作,而是返回一个子数组

start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回值:返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素(如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素)。

concat()的使用方法

concat()语法:arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX:必需,可以是具体的值,也可以是数组对象。可以是任意多个。

concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组,而仅仅会返回一个新的数组。如果要进行 concat() 操作的参 数是数组,那么添加的是数组中的元素,而不是数组。

3.常见问题

1、jquery中数组深拷贝办法

语法:jQuery.extend( [deep ], target, object1 [, objectN ] )

将两个或更多对象的内容合并到第一个对象。

deep:可选。 Boolean类型 指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该"属性对象"的属性也将进行合并。

2、什么是深拷贝?

深拷贝:指的是拷贝一个对象时,不仅仅把对象的引用进行复制,还把该对象引用的值也一起拷贝。这样进行深拷贝后的拷贝对象就和源对象互相独立,其中任何一个对象的改动都不会对另外一个对象造成影响。举个例子,一个人叫张三,然后使用克隆技术以张三来克隆另外一个人叫李四,这样张三和李四就是相互独立的,不管张三缺胳膊还是李四少腿了都不会影响另外一个人。在.NET领域,值对象就是典型的例子,如int, Double以及结构体和枚举等。

3、什么是浅拷贝呢?

浅拷贝:指的是拷贝一个对象时,仅仅拷贝对象的引用进行拷贝,但是拷贝对象和源对象还是引用同一份实体。此时,其中一个对象的改变都会影响到另一个对象。例如,一个人一开始叫张三,后来改名字为张老三了,可是他们还是同一个人,不管张三缺胳膊还是张老三少腿,都反应在同一个人身上。在.NET中引用类型就是一个例子。

4 解决方案

jquery.extend()

语法:jQuery.extend( [deep ], target, object1 [, objectN ] )

将两个或更多对象的内容合并到第一个对象。

deep:可选。 Boolean类型 指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该"属性对象"的属性也将进行合并。

5.编码实战

6.扩展思考

slice和concat对数组深拷贝的局限性

slice和concat这两个方法,仅适用于对不包含引用对象的一维数组的深拷贝。对于数组内部存在对象和数组,当改变对象属性和内部数组的元素后,深拷贝的数组同样也发生了改变。