JS对象数组深度克隆方法详解

在JavaScript中，深度克隆对象数组是确保数据独立性的关键操作，尤其在状态管理等场景下至关重要。本文深入探讨了实现深度克隆的多种方法，包括JSON序列化与反序列化、Lodash库的`_.cloneDeep()`方法以及原生`structuredClone()`API。JSON方法虽然简单，但存在丢失函数、undefined、Symbol等数据类型的局限性。Lodash的`_.cloneDeep()`则更为稳健，能处理日期、正则等复杂类型。而`structuredClone()`作为原生API，支持循环引用，是未来的轻量级选择，但需注意浏览器兼容性。此外，自定义递归克隆函数也是一种选择，但实现复杂，需谨慎考虑。本文旨在帮助开发者选择最适合自身需求的深度克隆方案，避免因浅克隆带来的副作用。

要深度克隆对象数组，必须使用能递归复制嵌套对象的方法；2. JSON.parse(JSON.stringify()) 虽常用，但会丢失函数、undefined、Symbol、BigInt，将日期转为字符串，正则变空对象，且不支持循环引用；3. Lodash 的 _.cloneDeep() 能处理日期、正则、Map、Set 等复杂类型，是更稳健的方案；4. 原生 structuredClone() API 支持日期、正则、数组、嵌套对象甚至循环引用，但不兼容老版本浏览器，是未来推荐的轻量选择；5. 自行实现递归克隆函数可行但复杂，需处理类型判断和循环引用，一般不建议。深度克隆的本质是切断引用关系，确保新旧对象完全独立，避免修改副本影响原始数据，这在状态管理等场景中至关重要。

在 JavaScript 里要深度克隆一个对象数组，可不是简单地用 ... 展开运算符或者 slice() 就能搞定的。那些方法只能做“浅克隆”，意思是数组里的基本类型值被复制了，但如果数组元素是对象，复制的只是它们的引用。要真正做到“深度”，让每个嵌套的对象也独立出来，你需要更强力的手段，比如利用 JSON 的序列化和反序列化，或者引入像 Lodash 这样的工具库，再或者，自己写一个递归函数来精细控制。

说实话，在 JavaScript 里处理深度克隆，尤其是一个包含复杂对象的数组，最常见也最“偷懒”的方法就是 JSON.parse(JSON.stringify(originalArray))。这招简单粗暴，但有效，它把你的数组先变成一个 JSON 字符串，再解析回来，过程中就切断了所有原始引用。不过，这招有明显的局限性，比如它会丢失函数、undefined、Symbol、BigInt，日期对象会变成字符串，正则表达式会变成空对象等等。所以，如果你的数据结构比较纯粹，都是可序列化的基本类型和普通对象，那它够用。

如果你追求更稳健、更全面的解决方案，Lodash 库提供的 _.cloneDeep() 方法几乎是行业标准。它能处理各种复杂的数据类型，包括日期、正则表达式、Map、Set，甚至循环引用（虽然处理循环引用时它有自己的策略）。在大型项目里，引入 Lodash 的这个方法，能省去你不少麻烦，而且代码可读性也很好。

// 使用 Lodash 的 _.cloneDeep
import _ from 'lodash';

const originalArray = [
  { id: 1, name: 'Item A', details: { value: 10, tags: ['new', 'hot'] }, createdAt: new Date() },
  { id: 2, name: 'Item B', details: { value: 20, tags: ['old'] }, func: () => console.log('hi') }
];

const clonedArray = _.cloneDeep(originalArray);

// 验证深度克隆
clonedArray[0].details.value = 100;
clonedArray[1].name = 'Item C';
clonedArray[0].createdAt.setFullYear(2000); // 修改克隆后的日期

console.log('Original Item A Value:', originalArray[0].details.value); // 应该还是 10
console.log('Cloned Item A Value:', clonedArray[0].details.value);     // 应该是 100
console.log('Original Item B Name:', originalArray[1].name);         // 应该还是 'Item B'
console.log('Cloned Item B Name:', clonedArray[1].name);             // 应该是 'Item C'
console.log('Original Item A Date Year:', originalArray[0].createdAt.getFullYear()); // 应该还是当前年份
console.log('Cloned Item A Date Year:', clonedArray[0].createdAt.getFullYear());     // 应该是 2000
console.log('Original Item B Func:', originalArray[1].func); // Lodash会丢失函数，这里会是 undefined

对于那些对性能有极致要求，或者数据结构极其特殊，且不想引入第三方库的场景，你也可以考虑自己实现一个递归的深度克隆函数。但这通常比较复杂，需要处理各种边缘情况，比如循环引用，不同类型的对象（数组、日期、正则、Map、Set等），以及原型链的继承问题。一般情况下，不建议自己造这个轮子。

为什么简单的赋值或展开运算符不能实现深度克隆？

这其实是 JavaScript 中一个非常基础但也容易让人迷惑的概念：值类型和引用类型。当你用 const newArr = oldArr; 或者 const newArr = [...oldArr]; 这样的方式去“复制”一个数组时，如果数组里面存放的是基本数据类型（比如数字、字符串、布尔值），那它们确实会被复制一份。但一旦数组里有对象（包括普通对象、数组、函数等），你复制的就不是对象本身，而是指向这些对象的“引用”或者说“地址”。这就像你复制了一本书的目录，而不是书的全部内容。

所以，当你修改 newArr[0].name 时，因为 newArr[0] 和 oldArr[0] 指向的是内存中的同一个对象，你实际上修改的是同一个对象，结果就是 oldArr[0].name 也会跟着变。这在实际开发中一不小心就可能导致意想不到的副作用，尤其是在处理组件状态、数据不可变性这些场景时，简直是“灾难现场”。你本以为自己操作的是一份独立的数据，结果却影响了原始数据，这可不是闹着玩的。理解这一点，是掌握 JavaScript 数据操作的关键一步。

使用 JSON.parse(JSON.stringify()) 进行深度克隆有哪些坑？

JSON.parse(JSON.stringify()) 这种方式虽然简单，但它的“坑”可不少，尤其是在你处理复杂数据时。它的核心原理是利用 JSON 规范来序列化和反序列化数据，而 JSON 规范对数据类型有着严格的限制。

首先，它会丢失函数。对象里的方法或者任何函数属性都会在序列化过程中被直接忽略。因为 JSON 压根就不支持存储函数。

const objWithFunc = {
  name: 'Test',
  greet: function() { console.log('Hello'); }
};
const cloned = JSON.parse(JSON.stringify(objWithFunc));
console.log(cloned.greet); // undefined

其次，undefined、Symbol、BigInt 也会被忽略。它们在 JSON 字符串中无法表示，所以会被直接“抹掉”。

const objWithSpecial = {
  a: undefined,
  b: Symbol('sym'),
  c: 10n // BigInt
};
const cloned = JSON.parse(JSON.stringify(objWithSpecial));
console.log(cloned); // {} - 什么都没了

再来，Date 对象会变成字符串。日期对象会被转换成 ISO 8601 格式的字符串，而不是一个 Date 对象实例。如果你需要对日期进行操作，还得手动转换回来。

const objWithDate = {
  eventDate: new Date()
};
const cloned = JSON.parse(JSON.stringify(objWithDate));
console.log(cloned.eventDate);       // "2023-10-27T08:30:00.000Z" (一个字符串)
console.log(cloned.eventDate instanceof Date); // false

还有，RegExp 对象会变成空对象。正则表达式对象也会在序列化后变成一个普通的空对象 {}。

const objWithRegExp = {
  pattern: /abc/g
};
const cloned = JSON.parse(JSON.stringify(objWithRegExp));
console.log(cloned.pattern); // {}

最后，它不能处理循环引用。如果你的对象结构中存在循环引用（比如 A 引用 B，B 又引用 A），JSON.stringify() 会直接抛出一个 TypeError: Converting circular structure to JSON 错误。这是它最大的局限性之一。

所以，虽然 JSON.parse(JSON.stringify()) 用起来方便，但你得清楚它的适用场景和这些潜在的“陷阱”。一旦数据里包含上述任何一种类型，你就得考虑其他更健壮的方案了。

除了 Lodash，还有哪些库或方法可以实现更健壮的深度克隆？

Lodash 的 _.cloneDeep 确实是多数开发者的首选，但 JavaScript 生态系统一直在进化，我们也有了更多原生的或者其他库的选择。

一个非常值得关注的，是现代浏览器和 Node.js（v17+）提供的原生 API：structuredClone()。这个方法原本是用于 Web Workers 之间传递消息的，现在被暴露出来，可以直接用于深度克隆。它的强大之处在于，它能够处理许多 JSON.parse(JSON.stringify()) 无法处理的数据类型，包括 Date、`

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~