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

为什么要用深拷贝？

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

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#