JavaScript 中如何实现深拷贝？

推荐答案

在 JavaScript 中，实现深拷贝的常见方法有以下几种：

1. 使用 JSON.parse(JSON.stringify(obj))：

   • 这种方法简单且适用于大多数场景，但它无法处理函数、undefined、Symbol 等特殊类型的数据。

   const obj = { a: 1, b: { c: 2 } };
   const deepCopy = JSON.parse(JSON.stringify(obj));

2. 使用递归实现深拷贝：

   • 这种方法可以处理所有类型的数据，包括函数、undefined、Symbol 等。

   // www.javascriptcn.com code example
   function deepClone(obj) {
     if (obj === null || typeof obj !== 'object') {
       return obj;
     }
     const clone = Array.isArray(obj) ? [] : {};
     for (let key in obj) {
       if (obj.hasOwnProperty(key)) {
         clone[key] = deepClone(obj[key]);
       }
     }
     return clone;
   }

3. 使用第三方库（如 Lodash 的 _.cloneDeep）：

   • 这种方法简单且功能强大，适用于复杂的对象结构。

   const _ = require('lodash');
   const obj = { a: 1, b: { c: 2 } };
   const deepCopy = _.cloneDeep(obj);

本题详细解读

1. JSON.parse(JSON.stringify(obj)) 的局限性

• 优点：简单易用，适用于大多数场景。
• 缺点：
  • 无法处理函数、undefined、Symbol 等特殊类型的数据。
  • 无法处理循环引用的对象。
  • 会忽略对象的原型链。

2. 递归实现深拷贝

• 优点：
  • 可以处理所有类型的数据，包括函数、undefined、Symbol 等。
  • 可以处理循环引用的对象（需要额外处理）。
• 缺点：
  • 实现较为复杂，需要考虑各种边界情况。
  • 性能较差，尤其是在处理大型对象时。

3. 使用第三方库

• 优点：
  • 简单易用，功能强大。
  • 适用于复杂的对象结构。
• 缺点：
  • 需要引入额外的库，增加了项目的依赖。

4. 其他方法

• 使用 structuredClone：
  • 这是一个新的 API，可以处理大多数数据类型，包括循环引用。
  • 目前支持度较低，仅在部分浏览器中可用。

  const obj = { a: 1, b: { c: 2 } };
  const deepCopy = structuredClone(obj);

5. 选择合适的方法

• 如果对象结构简单且不包含特殊类型的数据，可以使用 JSON.parse(JSON.stringify(obj))。
• 如果需要处理复杂对象或特殊类型的数据，建议使用递归实现或第三方库。
• 如果项目允许使用新的 API，可以尝试 structuredClone。