JavaScript 深拷贝对象的现代方法：告别传统方式

JavaScript 深拷贝对象的现代方法：告别传统方式

深入浅出：对象的复制

在 JavaScript 中，对象是功能强大的数据结构，可以容纳各种数据。当需要复制对象时，通常会面临两种选择：浅拷贝和深拷贝。

• 浅拷贝： 仅复制对象的属性值，而不复制其子对象。使用 Object.assign() 或 {...o} 语法时，执行的就是浅拷贝。

• 深拷贝： 不仅复制对象的属性值，还复制其子对象。当需要复制对象的所有属性和子对象时，就需要进行深拷贝。

传统深拷贝的局限性

过去，使用 JSON.parse(JSON.stringify(o)) 来实现深拷贝。虽然这种方法有效，但存在一些缺陷：

• 低效： 需要将对象转换为 JSON 字符串再解析为对象，这会影响性能。
• 无法复制某些数据类型： 函数、Symbol 和正则表达式等类型的数据无法被复制，可能导致数据丢失。

JavaScript 内置的深拷贝利器：structuredClone

从 ES2015 开始，JavaScript 引入了内置的 structuredClone() 函数，可以轻松实现深拷贝。它的优势在于：

• 高效： 直接操作对象，无需转换为 JSON 字符串。
• 全面： 可以复制所有类型的数据，包括函数、Symbol 和正则表达式。
• 简单： 使用方便，只需将对象作为参数传入即可。

使用 structuredClone() 进行深拷贝

下面是使用 structuredClone() 函数进行深拷贝的代码示例：

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

const clonedObject = structuredClone(originalObject);

console.log(clonedObject);

输出结果：

{
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
}

可见，structuredClone() 函数成功复制了原始对象的全部属性和子对象。

结论：深拷贝的现代选择

structuredClone() 函数是 JavaScript 中执行深拷贝的现代、高效、全面的选择。它简化了深拷贝的过程，并克服了传统方法的局限性。如果您需要复制对象的所有属性和子对象，强烈推荐使用 structuredClone() 函数。

常见问题解答

1. 浅拷贝和深拷贝有什么区别？

浅拷贝只复制对象属性的值，而深拷贝还复制其子对象。

2. structuredClone() 的优势是什么？

高效、全面、简单。

3. structuredClone() 是否支持复制所有数据类型？

是的，包括函数、Symbol 和正则表达式。

4. 什么时候应该使用 structuredClone()？

当需要复制对象的所有属性和子对象时。

5. 使用 structuredClone() 有什么注意事项？

如果对象包含循环引用，则 structuredClone() 可能无法正确复制。