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))
var arr = [1, [2, 3], [4, [5, 6]], 7]function copy(ar) {
var a = []
for (var i = 0 i < ar.lengthi++) {
if (ar[i] instanceof Array) {
a.push(copy(ar[i]))
} else {
a.push(ar[i])
}
}
return a
}
var v = copy(arr)
console.log(v)