2023-1-27 日,第 623 期 JavaScript Weekly 介绍了最新的原生深拷贝函数 structuredClone(),借此总结一下 JavaScript 中 clone 相关的方法。
JavaScript 中的数据类型分为原始类型和引用类型,他们的区别之一,就是在拷贝时的表现不一样。
原始类型生成新数据;引用类型生成新的指针,还是指向原有的对象。
jslet user = {
name: "John",
sizes: {
height: 182,
width: 50
}
}
let clone = Object.assign({}, user)
alert( user.sizes === clone.sizes ) // true,同一个对象
jslet user = {
name: "John",
sizes: {
height: 182,
width: 50
}
}
let clone = {...user}
alert( user.sizes === clone.sizes ) // true,同一个对象
jslet user = {
name: "John",
sizes: {
height: 182,
width: 50
}
}
let clone = JSON.parse(JSON.stringify(user))
alert( user.sizes === clone.sizes ) // false,不是同一个对象
缺点
jsconst obj = {
set: new Set([1, 3, 3]),
map: new Map([[1, 2]]),
regexp: /foo/,
deep: { array: [ new File(someBlobData, 'file.txt') ] },
error: new Error('Hello!')
}
const clone = JSON.parse(JSON.stringify(obj))
console.log(clone)
// 我们会得到 🙂
{
set: {},
map: {},
regex: {},
deep: {
array: [
{}
]
},
error: {},
}
new Function('return ' + fn.toString())()
缺点
需要额外装包。
2022 年,HTML Living Standard 新增了一个全局函数 structuredClone,可以直接深拷贝引用类型。
jsconst obj = {
title: "Builder.io Conf",
date: new Date(123),
attendees: ["Steve"]
}
const clone = structuredClone(obj)
console.log(clone)
// 我们将得到 😍
{
title: "Builder.io Conf",
date: "1970-01-01T00:00:00.123Z",
attendees: ["Steve"]
}
浏览器支持情况(2023 年 1 月 30 日):
缺点
本文作者:青波
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!