JS中对象数组深拷贝方法

structuredClone()

  • JavaScript 中提供了一个原生 API 来执行对象的深拷贝:structuredClone。它可以通过结构化克隆算法创建一个给定值的深拷贝,并且还可以传输原始值的可转移对象。

当对象中存在循环引用 时,仍然可以通过 structuredClone() 进行深拷贝。

javascript 复制代码
      const A = {
        set: new Set([1, 3, 3]),
        map: new Map([[1, 2]]),
        regex: /foo/,
        error: new Error('Hello!')
      }
      A.a = A

      const copied = structuredClone(A)
      console.log(copied)

注意:

原型链不能被遍历或拷贝(克隆的对象将不再是这个类的一个实例(但是这个类的所有有效属性都将被拷贝))

不能拷贝函数、方法DOM节点 、属性描述符、settergetter 以及类似的元数据不能被克隆

支持拷贝的类型:

Array(数组)、ArrayBuffer(数据缓冲区)、Boolean(布尔类型)、DataView(数据视图)、Date(日期类型)、Error(错误类型,包括下面列出的具体类型)、Map(映射类型)、Object (仅指纯对象,如从对象字面量中创建的对象)、原始类型(除symbol外,即 number、string、null、undefined、boolean、BigInt)、RegExp(正则表达式)、Set(集合类型)、TypedArray(类型化数组)。

JSON.parse(JSON.stringify())

使用时需要注意:

JSON.stringify 只能处理基本对象、数组和基本类型,而其他类型的值在转换之后都可能出现出乎意料的结果,例如 Date 会转化为字符串, Set 会转化为 {}

JSON.stringify甚至完全忽略某些内容,比如undefined或函数。

JSON.parse(JSON.stringify(x)) 无法对包含循环引用的对象进行深克隆

javascript 复制代码
      const A = {
        set: new Set([1, 3, 3]),
        map: new Map([[1, 2]]),
        regex: /foo/,
        error: new Error('Hello!')
      }
      A.a = A

      const copied = JSON.parse(JSON.stringify(A))

报错:

所以,如果对象没有上面说的这些情况,使用 JSON.parse(JSON.stringify(x)) 进行深克隆是完全没有问题的。如果有,就可以使用 structuredClone() 来进行深拷贝。

实现深拷贝只需以下三个核心步骤:

  1. 创建出对应数据类型的空白数据。即,若须拷贝的是对象类型数据,则创建一个空白对象,以此类推。
  2. 拷贝目标数据。即把目标数据拷贝到步骤1中创建的空白数据里。
  3. 返回拷贝的数据。
javascript 复制代码
export function deepClone(data: any){
  // 普通类型数据则直接返回
  
  // 循环引用处理
  
  // 1. 创建对应类型的空白数据
  
  // 2. 复制
  
  // 3. 返回
  
}

其他拷贝方式:

Object.assign/解构赋值/arr.concat
当拷贝内容中数据的值都是简单数据类型时,是深拷贝
当拷贝内容中数据的值出现引用数据类型时,引用数据仍然是浅拷贝,只有简单数据类型是深拷贝

转载于:

JavaScript 中更现代的深拷贝方法! - 掘金 (juejin.cn)

相关推荐
m0_73692704几秒前
Spring Boot自动配置与“约定大于配置“机制详解
java·开发语言·后端·spring
Bacon20 分钟前
前端:从0-1实现一个脚手架
前端
Bacon22 分钟前
前端项目部署实战 nginx+docker持续集成
前端
feiyangqingyun26 分钟前
Qt项目作品在苹果macos上编译运行效果/视频监控系统/物联网平台等
开发语言·qt·macos
beckyye27 分钟前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东23338 分钟前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump68041 分钟前
手写事件总线、事件总线可能带来的内存泄露问题
前端
你不是我我1 小时前
【Java 开发日记】我们来说一说 Redisson 的原理
java·开发语言
kk”1 小时前
C++ stack 和 queue
开发语言·c++
岁月宁静1 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js