概述
在 JavaScript 中,复制对象或数组可以分为浅复制和深复制。在处理复杂的数据结构时,尤其是那些包含嵌套对象或数组的数据结构,理解其中的差异至关重要。
本指南解释了这些概念、它们的特征、实现它们的方法以及何时使用它们。
1. 浅拷贝
定义
浅拷贝创建对象或数组的顶级属性的副本。但是,对于嵌套对象或数组,仅复制引用,而不复制实际数据。
特点
- 仅复制第一级属性或元素。
- 嵌套对象或数组与原始对象/数组共享引用。
- 轻量级且高效,适用于简单结构,但不适合嵌套数据的独立复制。
1.1 使用 Object.assign()
1 2 3 4 5 | const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.b.c = 42;
console.log(original.b.c);
|
登录后复制
1.2 使用扩展运算符 (...)
1 2 3 4 5 | const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
shallowCopy.b.c = 90;
console.log(original.b.c);
|
登录后复制
1.3 让我们看一个数组方法浅复制的示例(切片、连接)
1 2 3 4 5 | const original = [1, 2, [3, 4]];
const shallowCopy = original.slice();
shallowCopy[2][0] = 10;
console.log(original[2][0]);
|
登录后复制
2. 深拷贝
定义
深层复制创建对象或数组的完全独立的副本。所有级别(包括嵌套结构)都会被递归复制。对复制结构的更改不会影响原始结构,反之亦然。
特点
- 递归复制结构的所有级别。
- 嵌套对象或数组独立于原始对象或数组。
- 计算量比浅拷贝重。
2.1 使用 JSON.stringify() 和 JSON.parse()
- 将对象转换为 JSON 字符串,然后再转换回新对象。
- 限制:不处理函数、日期、正则表达式或循环引用。
1 2 3 4 5 | const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 42;
console.log(original.b.c);
|
登录后复制
2.2 使用 StructuredClone()
一种现代的深度复制方法,支持循环引用和日期等特殊对象。
1 2 3 4 5 6 | const original = { a: 1, b: { c: 2 }, date : new Date () };
const deepCopy = structuredClone(original);
deepCopy.b.c = 42;
console.log(original.b.c);
console.log(original. date === deepCopy. date );
|
登录后复制
2.3 使用自定义递归函数
手动处理复杂案例的灵活解决方案。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function deepCopy(obj) {
if (obj === null || typeof obj !== "object" ) return obj;
if (Array.isArray(obj)) return obj.map(deepCopy);
const copy = {};
for ( const key in obj) {
if (obj.hasOwnProperty(key)) {
copy [key] = deepCopy(obj[key]);
}
}
return copy ;
}
const original = { a: 1, b: { c: 2 } };
const deepCopyObj = deepCopy(original);
deepCopyObj.b.c = 42;
console.log(original.b.c);
|
登录后复制
3. 何时使用每一个?
浅复制
- 适用于没有嵌套结构的平面对象或数组。
- 当性能至关重要时,嵌套对象的共享引用是可以接受的。
深复制
- 对于复杂、深度嵌套的对象/数组。
- 当您需要副本和原件之间真正独立时。
4. 总结
浅复制
深复制
- 稳健并确保完全独立。
- 非常适合深层嵌套或复杂的结构。
这是对 JavaScript 中对象的浅拷贝和深拷贝的深入解释。根据您的用例和性能要求选择适当的方法。
以上是JavaScript 中的浅复制与深复制的详细内容。更多信息请关注PHP中文网其他相关文章!