近日在写一个新功能的时候，其实没有很难，数据交互有一点复杂，发灰度之后，自测出一个小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))
网友评论