17370845950

深拷贝需创建完全独立副本，避免引用干扰；JSON法简洁但丢函数/循环引用；structuredClone是现代推荐方案；手写递归可定制且兼容旧环境；Lodash cloneDeep最健壮但体积大。

JavaScript中深拷贝的核心是创建一个全新对象，使其与原对象完全独立，修改副本不会影响原始数据。直接赋值或浅拷贝（如Object.assign()、展开运算符{...obj}）只复制引用，导致修改嵌套属性时互相干扰。

使用JSON序列化与反序列化（简单场景适用）

这是最简方式，适合纯数据对象（不含函数、undefined、Symbol、Date、RegExp、Map、Set、循环引用等）：

• const deepCopy = JSON.parse(JSON.stringify(originalObj));
• 优点：一行代码，无依赖，性能尚可
• 缺点：会丢失函数、undefined、NaN、Infinity；Date变成字符串；正则变空对象；遇到循环引用直接报错

使用structuredClone（现代浏览器推荐）

ES2025引入的原生API，支持大多数内置类型（包括Map、Set、Date、RegExp、ArrayBuffer等），且能处理循环引用：

• const deepCopy = structuredClone(originalObj);
• 目前主流浏览器（Chrome 98+、Firefox 94+、Edge 98+、Safari 15.4+）已支持
• 注意：Node.js 17.0+需启用--experimental-structured-cloning标志；18.11+默认启用

手写递归深拷贝（兼容旧环境或需定制逻辑）

适用于需要兼容IE或控制拷贝行为（如忽略某些字段、处理特殊类型）的场景：

• 判断类型：用Object.prototype.toString.call(val)区分普通对象、数组、Date、RegExp等
• 缓存已拷贝对象：防止循环引用导致栈溢出（用WeakMap记录源对象→副本映射）
• 对数组、普通对象递归遍历属性；对Date、RegExp等构造新实例；对基本类型直接返回
• 示例关键逻辑：
    if (seen.has(obj)) return seen.get(obj);
    const copy = Array.isArray(obj) ? [] : {};
    seen.set(obj, copy);
    for (let key in obj) { if (obj.hasOwnProperty(key)) { copy[key] = deepClone(obj[key], seen); } }

借助第三方库（开发效率优先）

Lodash的_.cloneDeep()经过大量边界测试，支持几乎所有JS类型和循环引用，适合生产环境快速落地：

• import { cloneDeep } from 'lodash-es';
  const deepCopy = cloneDeep(originalObj);

• 体积较大（全量lodash约24KB gzip），建议按需引入lodash-es或CDN按需加载
• 比手写更健壮，尤其在处理稀疏数组、原型链、不可枚举属性等细节上