JavaScript深拷贝与浅拷贝的实现方式-uusu优素-乐高,模型,3d打印,编程

深拷贝与浅拷贝的核心区别在于复制深度，浅拷贝仅复制第一层属性，引用类型共享内存，修改嵌套属性会影响原对象；深拷贝则递归复制所有层级，实现完全独立。常用浅拷贝方法包括Object.assign、扩展运算符、slice和concat；深拷贝可使用JSON.parse(JSON.stringify(obj))（但不支持函数、undefined、Symbol、循环引用等），或通过递归函数结合WeakMap处理循环引用，更优方案是使用structuredClone() API，支持Date、RegExp、Map、Set及循环引用，但无法拷贝函数和DOM节点。在前端开发中，深拷贝适用于需要数据独立的场景如表单编辑、撤销功能，而浅拷贝适用于顶层复制或性能敏感场景。手动实现深拷贝需注意循环引用、特殊对象类型处理、性能开销及原型链问题，生产环境推荐使用structuredClone()或lodash等成熟库以确保健壮性。

javascript深拷贝与浅拷贝的实现方式

在JavaScript中，深拷贝与浅拷贝是处理对象和数组时绕不开的概念，它们的核心区别在于复制的深度。简单来说，浅拷贝只复制对象或数组的第一层属性，如果属性值是引用类型（如另一个对象或数组），那么新旧对象会共享这个引用；而深拷贝则会递归地复制所有层级的属性，确保新旧对象之间完全独立，互不影响。理解这一点，能帮助我们避免许多在数据操作中遇到的“意外”副作用。

解决方案

要实现JavaScript中的深拷贝与浅拷贝，我们有多种方法，每种都有其适用场景和局限性。

浅拷贝的实现方式

浅拷贝相对直接，通常用于处理对象或数组的顶层属性，或者当你知道内部没有需要独立复制的引用类型时。

立即学习“Java免费学习笔记（深入）”；

Object.assign()
这是最常见的对象浅拷贝方式之一。它会将一个或多个源对象的所有可枚举的自有属性复制到目标对象。
```
const originalObject = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, originalObject);
console.log(shallowCopy); // { a: 1, b: { c: 2 } }
shallowCopy.a = 10;
shallowCopy.b.c = 20;
console.log(originalObject.a); // 1
console.log(originalObject.b.c); // 20 (b 是共享的引用)
```
登录后复制
这里可以看到，a 是基本类型，修改 shallowCopy.a 不影响 originalObject.a。但 b 是一个对象，修改 shallowCopy.b.c 却会影响 originalObject.b.c，因为它们指向同一个内存地址。

扩展运算符 (…)
无论是对象还是数组，扩展运算符都能提供简洁的浅拷贝语法。
对于对象：

const originalObject = { a: 1, b: { c: 2 } };
const shallowCopy = { ...originalObject };
// 行为与 Object.assign 相同
shallowCopy.b.c = 30;
console.log(originalObject.b.c); // 30

登录后复制

对于数组：

const originalArray = [1, { a: 2 }, 3];
const shallowCopy = [...originalArray];
shallowCopy[0] = 10;
shallowCopy[1].a = 20;
console.log(originalArray[0]); // 1
console.log(originalArray[1].a); // 20

登录后复制

Array.prototype.slice() 或 Array.prototype.concat()
这两个方法常用于数组的浅拷贝。

const originalArray = [1, { a: 2 }, 3];
const shallowCopySlice = originalArray.slice();
const shallowCopyConcat = [].concat(originalArray);
// 行为与扩展运算符对数组的浅拷贝相同
shallowCopySlice[1].a = 20;
console.log(originalArray[1].a); // 20

登录后复制

深拷贝的实现方式

深拷贝则复杂一些，尤其当数据结构变得复杂时。

JSON.parse(JSON.stringify(obj))
这是一种非常流行且简洁的深拷贝方式，因为它利用了JSON的序列化和反序列化过程。

const originalObject = {
a: 1,
b: { c: 2 },
d: new Date(),
e: undefined,
f: function() {}
};
const deepCopy = JSON.parse(JSON.stringify(originalObject));
console.log(deepCopy);
// { a: 1, b: { c: 2 }, d: "2023-10-27T10:00:00.000Z" } (Date对象被转换为字符串)
// 注意：e (undefined) 和 f (function) 会丢失
deepCopy.b.c = 40;
console.log(originalObject.b.c); // 2 (原始对象未受影响)

登录后复制

这种方法的优点是简单，但缺点也很明显：

无法拷贝函数、undefined、Symbol 类型。
Date 对象会被转换为字符串。
RegExp 对象会变成空对象。
无法处理循环引用，会抛出错误。

递归实现
这是最通用、最灵活的深拷贝方式，可以处理各种复杂情况，包括特定类型的对象和循环引用（需要额外处理）。

function deepClone(obj, hash = new WeakMap()) {
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理循环引用
if (hash.has(obj)) {
return hash.get(obj);
}
let cloneObj;
if (obj instanceof Date) {
cloneObj = new Date(obj);
} else if (obj instanceof RegExp) {
cloneObj = new RegExp(obj);
} else if (Array.isArray(obj)) {
cloneObj = [];
} else {
cloneObj = {};
}
hash.set(obj, cloneObj); // 记录已拷贝的对象
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
cloneObj[key] = deepClone(obj[key], hash);
}
}
return cloneObj;
}
const originalObject = {
a: 1,
b: { c: 2 },
d: new Date(),
e: /abc/g,
f: function() { console.log('hello'); },
g: null,
h: undefined
};
originalObject.self = originalObject; // 制造一个循环引用
const deepCopy = deepClone(originalObject);
console.log(deepCopy);
deepCopy.b.c = 50;
console.log(originalObject.b.c); // 2 (原始对象未受影响)
console.log(deepCopy.f); // undefined (函数依然未被拷贝，因为typeof function是'function'而非'object'，在deepClone开头被跳过)
console.log(deepCopy.self === deepCopy); // true (循环引用被正确处理)

登录后复制

这个递归函数能处理大部分基本类型、数组、普通对象、Date和RegExp，并且通过WeakMap解决了循环引用的问题。不过，对于Function、Symbol等类型，它默认会跳过或复制引用。如果需要更复杂的类型处理，比如拷贝Map、Set，或者深度克隆函数（这通常不常见，因为函数行为通常是共享的），则需要进一步扩展。

structuredClone() API (Web API)
这是一个相对较新的Web API，提供了一种标准化的深拷贝机制，功能强大且安全。它能处理许多JSON.parse(JSON.stringify())无法处理的类型，包括Date、RegExp、Map、Set、ArrayBuffer等，并且能处理循环引用。

const originalObject = {
a: 1,
b: { c: 2 },
d: new Date(),
e: /abc/g,
f: new Map([['key', 'value']]),
g: new Set([1, 2, 3])
};
// originalObject.self = originalObject; // structuredClone也能处理循环引用
// 检查浏览器支持
if (typeof structuredClone === 'function') {
const deepCopy = structuredClone(originalObject);
console.log(deepCopy);
console.log(deepCopy.d instanceof Date); // true
console.log(deepCopy.e instanceof RegExp); // true
console.log(deepCopy.f instanceof Map); // true
deepCopy.b.c = 60;
console.log(originalObject.b.c); // 2
} else {
console.warn("当前环境不支持 structuredClone API，请使用其他深拷贝方法。");
}

登录后复制

structuredClone() 是目前浏览器端深拷贝的最佳实践，但在Node.js环境中，需要Node.js v17+或通过globalThis.structuredClone访问。它的缺点是不能拷贝函数和DOM节点。

PhotoStudio AI

虹软旗下的AI商拍工具

查看详情
PhotoStudio AI

为什么理解拷贝机制对前端开发至关重要？

在前端开发中，数据流动和状态管理是核心。如果对深浅拷贝的理解不够透彻，很容易在不经意间引入难以调试的bug，尤其是在处理复杂的状态或组件间数据传递时。比如，你可能在某个组件中修改了一个从父组件接收到的对象属性，本意是只影响当前组件的临时状态，结果却意外地修改了父组件甚至全局的状态，导致数据混乱或视图更新异常。

想象一下React或Vue这类框架，它们通常推崇不可变数据（Immutable Data）的概念。这意味着每次对数据的修改都应该生成一个新的数据副本，而不是直接修改原始数据。这样做的优点是：

可预测性： 数据的变化路径清晰，更容易追踪和调试。
性能优化： 框架可以通过比较新旧数据的引用地址来快速判断是否需要重新渲染组件，避免不必要的性能开销。如果每次都修改原始数据，引用地址不变，框架就无法感知到变化，可能导致视图不更新。
并发安全： 在多线程或异步操作中，不可变数据可以避免竞态条件，简化逻辑。

因此，当你需要修改一个对象或数组，并且希望这种修改不影响原始数据时，深拷贝就成了你的救星。反之，如果你确实需要共享引用（例如，优化内存或希望修改一个地方能同步影响所有引用），那么浅拷贝就是合适的选择。这种选择并非凭空而来，而是基于对数据结构和业务逻辑的深刻理解。

何时应该优先选择深拷贝而不是浅拷贝？

决定使用深拷贝还是浅拷贝，关键在于你对“独立性”的需求。当你的操作需要完全独立的数据副本时，深拷贝是唯一的选择。

修改副本不影响原始数据： 这是最常见的场景。比如，用户编辑表单数据，你希望在用户点击“保存”之前，对数据的修改只是暂时的，不影响原始数据源。如果用户取消编辑，你可以直接丢弃副本，原始数据保持不变。
复杂嵌套数据结构： 当你的对象或数组包含多层嵌套的对象或数组时，如果只进行浅拷贝，内部的引用类型依然会共享。一旦修改了深层属性，原始数据也会被改变，这往往不是你想要的结果。
历史记录/撤销功能： 实现“撤销”或“重做”功能时，你需要保存每个操作前的完整状态。深拷贝可以确保每个历史状态都是独立的快照，互不干扰。
组件间数据隔离： 在组件化开发中，如果一个子组件接收了一个复杂对象作为props，并且需要在内部修改这个对象（通常是不推荐的，但有时业务逻辑复杂可能需要），为了不影响父组件的状态，子组件应该先对props进行深拷贝。

浅拷贝则适用于以下情况：

只需要复制顶层属性： 如果你的对象或数组只包含基本类型值，或者你明确知道内部的引用类型不需要独立复制，那么浅拷贝更高效。
性能敏感的场景： 深拷贝，尤其是递归实现，可能会有性能开销，特别是对于非常大的或深度嵌套的数据结构。如果业务逻辑允许，浅拷贝通常更快。
明确需要共享引用： 比如，你可能有一个配置对象，多个模块都需要读取和修改它的某个深层属性，并且希望这些修改能相互同步。在这种情况下，浅拷贝甚至不拷贝，直接传递引用可能更符合需求。

选择深拷贝通常意味着你对数据的独立性有更高的要求，愿意为这份独立性付出一定的性能代价（尤其是在自定义递归实现时）。而structuredClone() API的出现，大大降低了这种代价，并提升了深拷贝的易用性和健壮性。

深拷贝的实现有哪些常见的陷阱或性能考量？

深拷贝并非没有代价，尤其是在手动实现时，一些细节处理不好就容易踩坑。

循环引用（Circular References）
这是最经典的陷阱。如果一个对象引用了它自身，或者对象A引用了对象B，对象B又引用了对象A，形成一个闭环，那么简单的递归深拷贝会陷入无限循环，最终导致栈溢出。
- 解决方案： 使用WeakMap或Map来存储已经拷贝过的对象和其对应的副本。在递归拷贝之前，先检查当前对象是否已经在Map中。如果存在，直接返回其对应的副本，避免重复拷贝和无限循环。上面提供的deepClone函数就包含了这种处理。
特殊对象类型处理不当JSON.parse(JSON.stringify(obj))的局限性前面已经提过，它会丢失函数、undefined、Symbol，以及将Date、RegExp等特殊对象转换为普通类型或字符串。
- 解决方案： 在递归深拷贝中，需要针对这些特殊类型进行显式判断和处理。例如，对于Date对象，需要new Date(obj)；对于RegExp，需要new RegExp(obj)。对于Map、Set、ArrayBuffer等，也需要相应的构造函数或迭代器来创建新的实例。函数通常不进行深拷贝，因为它们的行为是共享的，但如果你真的需要，可能需要考虑使用eval或new Function，但这通常是危险且不推荐的。
性能开销
深拷贝，尤其是对大型或深度嵌套的数据结构进行递归拷贝时，会消耗大量的CPU和内存资源。每次递归调用都会创建新的对象和数组，并遍历所有属性。
- 考量：
  - 是否真的需要深拷贝？ 重新评估业务需求，看是否可以通过浅拷贝、结构共享（如Immutable.js库）或其他设计模式来避免昂贵的深拷贝操作。
  - 只拷贝必要部分： 如果一个大对象中只有少数几个属性需要深拷贝，可以考虑只对这些特定属性进行深拷贝，其他部分保持浅拷贝或直接引用。
  - structuredClone()的优势： 在浏览器环境中，structuredClone()通常比自定义的JavaScript递归实现更高效，因为它可以在底层利用更优化的算法。优先考虑使用它。
  - 第三方库： 像Lodash的_.cloneDeep等成熟库，它们通常对性能和各种边缘情况（如循环引用、特殊类型）做了很好的优化。在生产环境中，使用这些经过验证的库通常比自己手写更安全、更高效。
原型链问题
简单的深拷贝通常只拷贝对象自身的属性，而会忽略原型链上的属性。这在大多数情况下是期望的行为，因为原型链上的方法和属性通常是共享的。但如果你的应用依赖于原型链上的某些可变状态，那么这可能是一个需要注意的点。