是的,JavaScript 中有 深拷贝(deep copy) 和 浅拷贝(shallow copy) 的概念,它们的区别在于如何处理对象或数组中的嵌套数据。
浅拷贝(Shallow Copy)
浅拷贝是指只复制对象的第一层属性。如果属性值是引用类型(如数组、对象等),则复制的是引用,而不是数据本身。也就是说,拷贝后的对象和原对象共享同一个嵌套对象。
浅拷贝的方法
Object.assign()
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 输出: 3
console.log(obj2.b.c); // 输出: 3
2. 展开运算符(...
)
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 };
obj2.b.c = 3;
console.log(obj1.b.c); // 输出: 3
console.log(obj2.b.c); // 输出: 3
3. 数组的 slice()
和 concat()
方法(针对数组)
const arr1 = [1, 2, { a: 3 }];
const arr2 = arr1.slice(); // 或 arr1.concat()
arr2[2].a = 4;
console.log(arr1[2].a); // 输出: 4
console.log(arr2[2].a); // 输出: 4
深拷贝的方法
JSON.parse()
和JSON.stringify()
这是最常用的深拷贝方法,但它有一些限制,比如不能拷贝函数、undefined
、Symbol
、循环引用等。
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b.c = 3;
console.log(obj1.b.c); // 输出: 2
console.log(obj2.b.c); // 输出: 3
2. 自定义深拷贝函数
如果需要深拷贝更复杂的对象,或者不希望使用 JSON.parse()
和 JSON.stringify()
,可以编写自定义的深拷贝函数。
function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) return obj;
const copy = Array.isArray(obj) ? [] : {};
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
copy[key] = deepCopy(obj[key]);
}
}
return copy;
}
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = deepCopy(obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 输出: 2
console.log(obj2.b.c); // 输出: 3
浅拷贝和深拷贝的总结
特性 | 浅拷贝 | 深拷贝 |
---|---|---|
拷贝的层次 | 只拷贝对象的第一层属性 | 完全拷贝对象及其嵌套的所有层次 |
引用类型的处理 | 仅拷贝引用类型的引用(共享同一个引用) | 递归拷贝引用类型,创建新对象(不共享引用) |
常见方法 | Object.assign() , 展开运算符 ... | JSON.parse(JSON.stringify()) , 自定义递归方法 |
总结
- 浅拷贝:复制对象的第一层,如果属性是引用类型,则复制引用。
- 深拷贝:递归复制对象及其嵌套的所有层次,创建全新的对象,避免共享引用。
- 使用
JSON.parse(JSON.stringify())
进行深拷贝时有一些限制,适用于简单的对象或数组拷贝。 - 自定义深拷贝函数可以解决复杂情况,但需要更复杂的代码。
你可以根据具体需求选择合适的拷贝方式。