（译文）JavaScript基础——JavaScript中的深拷贝

2023-01-10 13:24:55

在JavaScript中如何拷贝一个对象？

通过引用调用

function mutate(obj) {

  obj.a = true;

}

const obj = {a: false};

mutate(obj)

console.log(obj.a); // prints true

mutate可以对obj进行改动，然后外面的obj的值也变化了。

浅拷贝：Object.assign()

一种拷贝方式是这种方法： Object.assign(target, sources...).

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); // prints true

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和其他内置对象序列化的时候可能都有问题。

结构化克隆

它是一种算法，将一个值转换为另外一个值。而且能处理对象循环依赖和大部分的内置对象。比如调用postMessage发消息给window或者WebWorker的时候就用到。

比如像这样：obj是被深拷贝过的

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);

历史API

如果你用过history.pushState()去构建一个单页应用（SPA），你应该知道你可以根据当前URL保存一个state object。这个state object是结构化拷贝的，并且是同步的。

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的调用次数。

通知API

function structuralClone(obj) {

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

}

const obj = /* ... */;

const clone = structuralClone(obj);