《星球大战》中克隆人军队
展开操作符(Spreading)是JavaScript中复制对象的常用手段:
展开有个明显的缺点,复制的结果是浅拷贝,顶层被复制,但属性值是引用数据。
structuredClone() 是一个新功能,现在已经被大多数浏览器、Node.js 和 Deno 支持。它可以创建对象的深拷贝。下面是对它的研究分享,阅读时间约为 5 分钟。
目录
1. 在哪里可以使用structuredClone()?
尽管structuredClone()是 ECMAScript 的一部分,但它已被添加到许多平台中(并且会更快更广泛的普及):
提示:
-
structuredClone()在 WebWorkers 中支持并不完全,具体可以查看MDN 浏览器兼容性表。
-
在不支持的平台上structuredClone,可以使用polyfill代替。
2. 通过展开复制对象的浅拷贝
在 JavaScript 中复制数组和普通对象的一种常见方法是通过展开。比如展开对象代码:
const obj = {
id: 'abcd1234', values: ['a', 'b']};
const clone1 = {
...obj};
唉,这是使用频率非常高的浅拷贝方式。一方面,因为clone1.id是一个复制,因此更改它不会更改obj:
clone1.id = 'yes';
assert.equal(obj.id, 'abcd1234');
另一方面,数组 inclone1.values与 共享obj。如果我们改变它,同时也会改变obj:
clone1.values.push('x');
assert.deepEqual(
clone1, {
id: 'yes', values: ['a', 'b', 'x'