2023-12-28 js深拷贝的一些常见写法与业务场景

发布时间 2023-12-28 10:27:11作者: 哎呦你可棒棒了

为什么要用深拷贝?

如果你有一下场景,那么就很需要用到深拷贝:

var a = [1,2,3];
var b = a;
b.push(4);
console.log(a,b);

可以发现2个数组都是[1,2,3,4],为什么b发生改变会影响到原数组a呢?

原因:二者是属于浅拷贝的一种关系,引用了同一个对象,指向了同一个内存地址导致。

解决方案:根据你的业务需求来吧,如果原数据a必须保持不变,那么就可以参考一下内容:

【推荐使用】展开运算符写法,即:[...a],举例:

var a = [1,2,3];
var b = [...a];
b.push(4);
console.log(a,b);

可以看到a和b是两个不同的数组,哪怕b发生了改变,由于不是同一个对象,原来的a不会因此发生变更。

同理,其它方法也是类似创建一个新对象然后再赋值的方法,比如递归,JSON.stringify() 和 JSON.parse()。

你可以参考下面这篇文章,该文章建议避免使用会改变原数组的方法,而是使用返回新数组的写法,借图:

 文章链接:https://react.docschina.org/learn/updating-arrays-in-state#