js 如何使用cloneDeep深度克隆对象数组

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

在 JavaScript 里要深度克隆一个对象数组，可不是简单地用

...

slice()

说实话，在 JavaScript 里处理深度克隆，尤其是一个包含复杂对象的数组，最常见也最“偷懒”的方法就是

JSON.parse(JSON.stringify(originalArray))

undefined

Symbol

BigInt

如果你追求更稳健、更全面的解决方案，Lodash 库提供的

_.cloneDeep()

// 使用 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

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

JSON.parse(JSON.stringify())

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

Tome

先进的AI智能PPT制作工具

下载

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

其次，

undefined

Symbol

BigInt

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

再来，

Date

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

一个非常值得关注的，是现代浏览器和 Node.js（v17+）提供的原生 API：

structuredClone()

JSON.parse(JSON.stringify())

Date