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 等。

   -- -------------------- ---- -------
   -------- -------------- -
     -- ---- --- ---- -- ------ --- --- --------- -
       ------ ----
     -
     ----- ----- - ------------------ - -- - ---
     --- ---- --- -- ---- -
       -- ------------------------- -
         ---------- - --------------------
       -
     -
     ------ ------
   -

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。