如何用JavaScript实现深拷贝_有哪些常用技巧

jsON.parse(json.stringify(obj)) 失效因忽略 undefined/function/symbol、无法处理循环引用，且 date/regexp/map/Set 等会失真；structuredClone 是更优原生方案，支持多数内置类型及循环引用，但不支持 function 和 undefined。

JSON.parse(JSON.stringify(obj)) 为什么有时会失效

这个方法看似简单直接，但实际使用中容易踩坑。它会忽略 undefined、function、Symbol 类型的属性，无法处理循环引用，且会把 Date、RegExp、Map、Set 等对象转成空对象或字符串。

适用场景仅限于纯数据对象（POJO），比如从 API 拿到的 JSON 响应体，且确认不含上述特殊类型。

• 遇到 TypeError: Converting circular structure to JSON 就说明有循环引用，必须换方案
• new Date() 经过该方式后变成 ISO 字符串，不再是 Date 实例
• JSON.stringify(new RegExp('a')) 返回 {}，正则信息完全丢失

structuredClone() 是目前最省心的原生方案

chrome 98+、firefox 94+、edge 98+ 已支持，node.js 17.0+（需启用 --experimental-structured-clone）也支持。它能正确处理 Date、RegExp、Map、Set、ArrayBuffer、TypedArray、Blob 和循环引用——只要目标环境支持。

注意：它仍不支持 function 和 undefined（规范明确排除），也不克隆原型链上的属性。

立即学习“Java免费学习笔记（深入）”；

const obj = {   date: new Date(),   map: new Map([['key', 'value']]),   nested: { a: 1 } }; const copy = structuredClone(obj); console.log(copy.date instanceof Date); // true console.log(copy.map.get('key')); // 'value'

手写递归实现要注意什么

手动实现深拷贝时，核心是类型判断 + 递归 + 缓存循环引用。不能只用 typeof，得结合 Object.prototype.toString.call() 或 constructor 做精确识别。

关键点：

• 用 WeakMap 缓存已拷贝过的对象，遇到重复引用直接返回缓存结果，避免无限递归
• 区分 Array 和普通 Object，前者用 [] 初始化，后者用 {}
• 对 Map、Set、Date、RegExp 等内置对象，需单独处理构造逻辑
• 不处理 function 和 undefined（它们本就不该被“深拷贝”，而是引用或跳过）

Lodash 的 cloneDeep 在生产环境是否可靠

在不支持 structuredClone 的旧环境（如 IE、低版本 node.js）中，lodash.cloneDeep 仍是稳妥选择。它覆盖了绝大多数边缘类型，包括 Uint8Array、Error、promise（浅拷贝其状态）、自定义类实例（如果实现了 toJSON）等。

但要注意两点：

• 它默认不保留函数属性（除非显式配置 customizer），行为和 structuredClone 一致
• 体积较大（约 20KB gzip 后），如果项目已用 ES modules，可考虑按需引入：import { cloneDeep } from 'lodash-es'
• 对非常深的嵌套对象（>1000 层），可能触发栈溢出，此时需改用循环 + 栈模拟递归

复杂类型兼容性和运行时环境支持度，比代码行数更重要。别为了“一行解决”硬套 JSON.parse(JSON.stringify())，尤其当数据来自用户输入或第三方 SDK 时。