JavaScript深拷贝

PreviousJavaScript是何如工作的--概述 NextJavaScript的全局变量是如何工作的

Last updated 5 years ago

JavaScript深拷贝

来看看JavaScript中的深拷贝。

通过引用调用(call by reference)

译注：通过引用调用可能有点绕，你就当做"用引用作为参数调用"。

JavaScript通过引用传递所有的东西。如果你不知道这句话的意思，那么看下这个例子：

function mutate(obj) {
  obj.a = true;
}

const obj = {a: false};
mutate(obj)
console.log(obj.a); // true

函数mutate更改了作为参数传递的对象。在"通过值调用(call by value)"的环境中，函数会得到传递过来的值，也就是一个拷贝，这个函数使用这个值来一起工作。函数对对象所做的任何更改在该函数之外都不可见。但是在像JavaScript这样的"通过引用调用"环境中，函数会得到一个——你已经猜到了——引用，并会改变实际对象本身。因此最后的console.log会打印出true。

但是在有些时候，你可能想保持你的原始对象并且为对应的函数创建一个副本。

译：对于这个还不是很了解的朋友可以看下在下的相关资源

浅拷贝：Object.assign()

拷贝一个对象的一种办法是使用Object.assign(target, sources…)。他接受任意数量的源对象，枚举他们自己所有的属性并将这些属性分配给target。如果我们用一个新的空的对象作为target，我们基本上是在进行拷贝。

const obj = /* ... */;
const copy = Object.assign({}, obj);

然而，这是一个浅拷贝。如果我们的对象包含一个对象，那他们将会保持共享引用，这不是我们想要的结果：

function mutateDeepObject(obj) {
  obj.a.thing = true;
}

const obj = {a: {thing: false}};
const copy = Object.assign({}, obj);
mutateDeepObject(copy)
console.log(obj.a.thing); // true

另一个潜在的是Object.assign()将getter转换为一个单纯的属性。

译：和getter有什么关系？来试试：

var myObject = {
    get say() {
        return 'Hi, xiaohesong';
    }
};
console.log('before assign', Object.getOwnPropertyDescriptor(myObject, 'say'))
var obj = Object.assign({}, myObject)
console.log('after assign', Object.getOwnPropertyDescriptor(obj, 'say'));

动手试试，是不是变成了单纯的属性？那再动手试试setter呗？

那么现在呢？事实证明，有两种办法可以创建对象的深拷贝。

JSON.parse

有个最古老的方法去创建对象拷贝的是将对象转换为字符串表示形式，然后再将他解析回对象的形式。这个感觉有些沉重，但是确实可以有效：

const obj = /* ... */;
const copy = JSON.parse(JSON.stringify(obj));

这里有个缺点就是你创建了一个临时的而且可能会很大的字符串，其目的只是为了转回到解析器。另一个缺点是这种方法不能处理循环对象。不管你怎么认为，这些都很容易发生。例如，在构建树状数据结构时，节点引用其父节点，而父节点又引用其子节点。

const x = {};
const y = {x};
x.y = y; // Cycle: x.y.x.y.x.y.x.y.x...
const copy = JSON.parse(JSON.stringify(x)); // throws!

此外，像Maps，Sets，RegExps，Dates，ArrayBuffers和其他内置类型这样的东西在序列化时会丢失。

Structured Clone

MessageChannel

function structuralClone(obj) {
  return new Promise(resolve => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}

const obj = /* ... */;
const clone = await structuralClone(obj);

这种方法的缺点是它是异步的。这也没什么大不了的，但有时你需要以一种同步方式来深度拷贝对象。

History API

如果你曾经使用history.pushState()来构建SPA，那么你就会知道可以提供一个state对象来保存URL。事实证明，这个state对象在结构的克隆上是同步进行的。我们必须小心不要打乱任何可能使用state对象的程序逻辑，所以我们需要在完成克隆后恢复原始state。要防止触发任何事件，请使用history.replaceState()而不是history.pushState()。

function structuralClone(obj) {
  const oldState = history.state;
  history.replaceState(obj, document.title);
  const copy = history.state;
  history.replaceState(oldState, document.title);
  return copy;
}

const obj = /* ... */;
const clone = structuralClone(obj);

再一次，只是为了复制一个对象而进入浏览器的引擎感觉有点重，但是你必须做你必须做的事情。此外，Safari将replaceState的调用数量限制在30秒内100次。

Notification API

function structuralClone(obj) {
  return new Notification('', {data: obj, silent: true}).data;
}

const obj = /* ... */;
const clone = structuralClone(obj);

短小，简洁。我喜欢他。不过，它基本上是需要在浏览器中启动权限机制，所以我怀疑它非常慢。由于某种原因，Safari始终为数据对象返回undefined。

性能特征

图解!

以下是Chrome，Firefox和Edge中不同技术的表现。越低越好。

总结

那么我们从本文得到了什么？

如果你不需要循环对象，也不需要保留内置类型，那么你可以使用JSON.parse(JSON.stringify())在所有浏览器中获得最快的克隆，我发现这非常令人惊讶。
如果你想要一个合适的结构化克隆，MessageChannel是你唯一可靠的跨浏览器选择。

PreviousJavaScript是何如工作的--概述 NextJavaScript的全局变量是如何工作的

Last updated 5 years ago