使用场景
从前有个obj, 需要被增删改,但是增删改之后还要和原始的obj做对比看看改的好不好。
- 此时需要先copy这个obj出来,名为copyObj
- copyObj修改之后和obj做对比操作
- 所以肯定要用深拷贝对吧?因为如果copyObj变化了,obj也变化了,那还对比个啥
浅拷贝 (Shallow Copy)
浅拷贝创建一个新对象,但它只复制对象的第一层属性。如果某个属性是对象类型,那么新对象中的这个属性仍然是原对象中那个属性的引用。因此,如果你对这个引用的对象进行修改,原对象的该属性也会受到影响。
1. 举个日常生活中的例子:
类似电脑里面E盘文件夹,发送了桌面快捷方式。 在桌面打开之后,增删改里面的文件 === 改的源文件。所以E盘的文件夹里面的文件也会被增删改。
2. 举个代码例子:
const original = {
a: 1,
b: { c: 2 }
};
const shallowCopy = { ...original }; // 使用扩展运算符进行浅拷贝
shallowCopy.a = 10;
shallowCopy.b.c = 20;
console.log(original.a); // 1 (原对象不变)
console.log(original.b.c); // 20 (原对象的嵌套对象被修改)
深拷贝 (Deep Copy)
深拷贝创建一个新对象,并递归地复制原对象及其所有嵌套对象。这样,新对象和原对象之间就没有引用关系,修改新对象不会影响原对象。
1. 举个日常生活中的例子:
类似电脑里面E盘文件夹a,直接复制了一份a到桌面。
在桌面打开之后,增删改里面的文件 === 改的桌面的a。所以E盘的文件夹里面的文件不受任何影响。
2.举个代码例子:
使用 JSON 方法实现深拷贝:
const original = {
a: 1,
b: { c: 2 }
};
const deepCopy = JSON.parse(JSON.stringify(original)); // 使用 JSON 方法进行深拷贝
deepCopy.a = 10;
deepCopy.b.c = 20;
console.log(original.a); // 1 (原对象不变)
console.log(original.b.c); // 2 (原对象的嵌套对象未被修改)
注意事项
- 使用
JSON.parse(JSON.stringify(original))的方法进行深拷贝有一定的局限性,比如无法复制函数、undefined、循环引用等。 - 对于复杂对象,可以考虑使用第三方库如 Lodash 的
_.cloneDeep方法来进行深拷贝。 - 当然可以自己手写一个深拷贝啦~~~