js实现深拷贝函数 js深拷贝json parse

JavaScript深拷贝核心是完全创建独立的新对象，避免引用共享；常用方法包括JSON.parse(JSON.stringify())（简洁但有类型）、structedClone()（现代标准，支持多类型）、手写分区（可控但复杂）和Lodash的cloneDeep()（全面可靠）。

JavaScript中深拷贝对象，核心是一个与原对象完全独立的新对象，新对象的属性值（包括对象对象、读写）都不与原对象共享引用。直接属性或浅拷贝（如Object.assign()、展开报表{...obj}）只复制第一层，内部仍占用内存地址，修改对象内容会影响原对象。

使用 JSON.parse(JSON.stringify()) —— 简单但有惯例

这是最常用、写法最简洁的方法，适合纯数据对象（只含字符串、数字、布尔值、null、数组、普通对象）：✅ 优点：一行代码搞定，无依赖，兼容性好 ❌ 缺点明显：   • 会丢失、undefined、Symbol、Date、RegExp、Map、Set、BigInt 等类型   •循环引用会直接报错（TypeError：将循环结构转换为 JSON）   • 日期变成字符串，正则变成空对象

示例：Waifulabs

一键生成动漫二次元头像和插图 347 查看详情 const obj = { a： 1， b： { c： 2 } }；const copy = JSON.parse(JSON.stringify(obj))； // ✅ 深拷贝成功使用结构化克隆（） —— 现代浏览器推荐方案是ES2022新增的标准API，专为深复制设计，支持更多内置类型且能处理循环引用（部分环境）：

立即学习“Java学习笔记（深入）”；✅支持Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Error、Blob等 ✅ 无缝、安全、占用第三方库 ⚠免费️注意：   •目前不支持函数、undefined、Symbol（同 JSON 方法）   • 循环引用在 Chrome 98 、Firefox 94 、Safari 15.4 支持；旧版本不支持会抛错

示例：const obj = { date： new Date()， re： /abc/g }；const copy = StructuredClone(obj)； // ✅ 正确保留日期和正则手写一份深拷贝 —— 完全可控，适合学习或特殊需求

适用于需要自定义行为（如忽略某些字段处理函数、兼容旧环境）的场景。

关键逻辑是判断类型、中继处理对象/备份，其他类型直接返回：用 typeof 和 A​​rray.isArray() 区分基本类型、备份、普通对象 使用 Object.prototype.toString.call() 或 instanceof 识别 Date、RegExp 等内置对象 需用 Wea​​kMap 记录复制的对象，避免循环引用无限递归

简化版（透明循环引用处理）：function deepClone(obj) {  if (obj === null) || typeof obj !== 'object') return obj；  if (obj instanceof Date) return new Date(obj)；  if (obj instanceof RegExp) return new RegExp(obj)；  const clone = Array.isArray(obj) ? [] ： {}；  for (let key in obj) {    if (obj.hasOwnProperty(key)) {      clone[key] = deepClone(obj[key])；    }  }  return clone；}借助第三方库——生产环境正确选择

Lodash的_.cloneDeep()是最成熟稳定的方案，覆盖几乎所有边界情况：✅支持函数、未定义、循环引用、各种内置对象、不可枚举属性 ✅经过大量测试，性能优化良好 ⚠️缺点：引入额外依赖，包体积增加（可导入导入）

示例：import {cloneDeep } from 'lodash-es'；const copy = cloneDeep(originalObj)；

基本上就这些。日常开发优先考虑StructuredClone()（兼容时），老项目或需最大限度兼容Lodash；JSON 方案仅限于简单的数据结构；手写适合教学或定制化强的场景。

以上就是JavaScript中如何深拷贝对象_有哪些实现方法的详细内容，更多请关注乐哥常识网其它相关文章！ Workers_它如何实现多线程编程？如何实现排序算法_javascript中排序排序方法有哪些？ javascript中的自定义如何实现_ES6模块与CommonJS模块有什么不同 React/NextJS中批量状态更新的陷阱与不可变数据实践 JavaScript中如何解析JSON_JSON.stringify参数