JavaScript 自带的对象深拷贝方法

一、现行常用深拷贝方法的缺点

JSON.parse(JSON.stringify())

说到 JavaScript 深拷贝,以前我们可能经常会这么干:

js 复制代码
const temp = {
  a:{
    name:'xiaoming',
    age:18
  }
}
const copyTemp = JSON.parse(JSON.stringify(temp))
copyTemp.a.age = 20

console.log(copyTemp) //{ a: { name: 'xiaoming', age: 20 } }
console.log(temp); //{ a: { name: 'xiaoming', age: 18 } }

但是有一些缺点,如果拷贝值里面带有 undefined/map/set 等特殊类型,可能会被转换成我们不想看到的结果,比如这样:

js 复制代码
const temp = {
  set: new Set([1, 3, 3]),
  map: new Map([[1, 2]]),
  regex: /foo/,
  deep: { array: [ new ArrayBuffer(1) ] },
  error: new Error('Hello!'),
  date: new Date(),
  buffer: new ArrayBuffer(1),
  defaultVal: undefined
}
const copyTemp = JSON.parse(JSON.stringify(temp))

console.log(copyTemp);
// {
//   set: {},
//   map: {},
//   regex: {},
//   deep: { array: [ {} ] },
//   error: {},
//   date: '2024-03-01T06:24:34.199Z',
//   buffer: {}
// }

上面例子可以看到 map/set 等对象会被转换成 {},date 会被转换成字符串,而 undefined 值直接就被过滤掉了,有时候我们深拷贝是想要拷贝一份一模一样的数据,可能这个深拷贝方法就不适合了。

展开对象、Object.assign

我们可能还经常这么干使用展开或者 Object.assign 创建拷贝对象。

js 复制代码
const temp = {
  title: "Builder.io Conf",
  date: new Date(123),
  attendees: ["Steve"]
}
const copyTemp = { ...temp }
const copyTemp1 = Object.assign({}, temp)

copyTemp.title = "111"
copyTemp.attendees.push("Bob")
copyTemp.date.setTime(456)

copyTemp1.title = "111"
copyTemp1.attendees.push("Bob")
copyTemp1.date.setTime(456)

console.log(temp);
console.log(copyTemp);
console.log(copyTemp1);
// {
//   title: 'Builder.io Conf',
//   date: 1970-01-01T00:00:00.456Z,
//   attendees: [ 'Steve', 'Bob', 'Bob' ]
// }
// {
//   title: '111',
//   date: 1970-01-01T00:00:00.456Z,
//   attendees: [ 'Steve', 'Bob', 'Bob' ]
// }
// {
//   title: '111',
//   date: 1970-01-01T00:00:00.456Z,
//   attendees: [ 'Steve', 'Bob', 'Bob' ]
// }

从输出可以看出,这种方式只能拷贝对象的第一层,更深层的属性还是指向原来的地址,在拷贝对象上改动会改到原对象上。

lodash cloneDeep

我们可能还经常会使用 lodash 的 cloneDeep 方法来做深拷贝,这种方法可以说是很完备了,缺点就是我们要另外去按照 lodash 库,可能会占用一点的内存

二、JavaScript 新推出的 structuredClone 方法

这个方法推出于 2022 年,如今已经 2024 年了,现代主流浏览器普遍都支持了,使用这个方法可以避免上述所有缺点,深拷贝对象,使用起来也很简单

js 复制代码
const temp = {
  a:{
    name:'xiaoming',
    age:18
  }
}
const copyTemp = structuredClone(temp)
copyTemp.a.age = 20

console.log(copyTemp) //{ a: { name: 'xiaoming', age: 20 } }
console.log(temp); //{ a: { name: 'xiaoming', age: 18 } }
相关推荐
zhanshuo5 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang6 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥6 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil8 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录15 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672215 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少20 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
1234Wu34 分钟前
React Native 接入 eCharts
javascript·react native·react.js
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle