资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript 深拷贝性能分析

JavaScript 深拷贝性能分析

MyFaith / 967人阅读

摘要：它接受任意数量的源对象，枚举它们的所有属性并分配给。所以现在怎么办有几种方法可以创建一个对象的深拷贝。为了防止发生任何意外，请使用而不是。我想测量哪种方法是最高性能的。图表以下是，和中不同技术的性能。

原文：Deep-copying in JavaScript - DasSur.ma

如何在 JavaScript 中拷贝一个对象？对于这个很简单的问题，但是答案却不简单。

引用传值

在 JavaScript 中所有的东西都是引用传递(原文有误，稍后写篇批判文 “By Value” or “By Reference” in JavaScript · Issue #22)。

如果你不知道什么意思，看看下面的例子：

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

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

函数 mutate 改变了它的参数。在值传递的场景中，函数的形参只是实参的一个副本——a copy——当函数调用完成后，并不改变实参。但是在 JavaScript 这种引用传递的场景中，函数的形参和实参指向同一个对象，当参数内部改变形参的时候，函数外面的实参也被改变了。

因此在某些情况下，你需要保留原始对象，这时你需要把原始对象的一个拷贝传入到函数中，以防止函数改变原始对象。

浅拷贝：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); // prints true 
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

所以现在怎么办？有几种方法可以创建一个对象的深拷贝。

注意：也许有人提到了对象解构运算，这也是浅拷贝。

JSON.parse

创建对象副本的最古老方法之一是：将该对象转换为其 JSON 字符串表示形式，然后将其解析回对象。这感觉有点压抑，但它确实有效：

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!

另外，诸如 Map, Set, RegExp, Date, ArrayBuffer 和其他内置类型在进行序列化时会丢失。

Structured Clone 结构化克隆算法

Structured cloning 是一种现有的算法，用于将值从一个地方转移到另一地方。例如，每当您调用postMessage将消息发送到另一个窗口或 WebWorker 时，都会使用它。关于结构化克隆的好处在于它处理循环对象并 支持大量的内置类型。问题是，在编写本文时，该算法并不能直接使用，只能作为其他 API 的一部分。我想我们应该了解一下包含哪些，不是吗。。。

MessageChannel

正如我所说的，只要你调用postMessage结构化克隆算法就可以使用。我们可以创建一个 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，你就知道你可以提供一个状态对象来保存 URL。事实证明，这个状态对象使用结构化克隆 - 而且是同步的。我们必须小心使用，不要把程序逻辑使用的状态对象搞乱了，所以我们需要在完成克隆之后恢复原始状态。为了防止发生任何意外，请使用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

在发了一条推文之后，Jeremy Banks 向我展示了第三种方法来利用结构化克隆：Notification API。

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

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

短小，简洁。我喜欢它！

但是，它需要浏览器内部的权限机制，所以我怀疑它是很慢的。由于某种原因，Safari 总是返回undefined。

Performance extravaganza

我想测量哪种方法是最高性能的。在我的第一次（天真的）尝试中，我拿了一个小 JSON 对象，并通过不同的方式克隆对象 1 千次。幸运的是，Mathias Bynens 告诉我，当你添加属性到一个对象时，V8有一个缓存。所以我是在给缓存做基准测试。为了确保我永远不会碰到缓存，我编写了一个函数，使用随机密钥名称生成给定深度和宽度的对象，并重新运行测试。

图表！

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

结论

那么我们从中得到了什么呢？

如果您没有循环对象，并且不需要保留内置类型，则可以使用跨浏览器的JSON.parse(JSON.stringify())获得最快的克隆性能，这让我感到非常惊讶。

如果你想要一个适当的结构化克隆，MessageChannel是你唯一可靠的跨浏览器的选择。

如果浏览器平台直接提供一个 structuredClone()函数，会不会更好？我当然这样认为，最新的 HTML 规范正在讨论这个 Synchronous clone = global.structuredClone(value, transfer = []) API · Issue #793 · whatwg/html。

云服务器 GPU云服务器 javascript深拷贝 深拷贝 深拷贝和浅拷贝 javascript浅拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107192.html

相关文章

  • javascript对象的浅拷贝、深拷贝和Object.assign方法浅析

    摘要：对象的浅拷贝浅拷贝是对象共用一个内存地址，对象的变化相互影响。这是特别值得注意的地方。和能正确处理的对象只有等能够被表示的数据结构，因此函数这种不能被表示的类型将不能被正确处理。 对象的浅拷贝： 浅拷贝是对象共用一个内存地址，对象的变化相互影响。比如常见的赋值引用就是浅拷贝: let srcObj = {name: lilei, age: 20}; let copyObj = srcO...

    lixiang 评论0 收藏0

  • JavaScript中的浅拷贝与深拷贝

    摘要：所以，深拷贝是对对象以及对象的所有子对象进行拷贝实现方式就是递归调用浅拷贝对于深拷贝的对象，改变源对象不会对得到的对象有影响。 为什么会有浅拷贝与深拷贝什么是浅拷贝与深拷贝如何实现浅拷贝与深拷贝好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！ 如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过 以下↓ 数据类型在开始了解 浅拷贝 与 深拷贝 之前，让我们先...

    546669204 评论0 收藏0

  • JavaScript中的浅拷贝与深拷贝

    摘要：所以，深拷贝是对对象以及对象的所有子对象进行拷贝实现方式就是递归调用浅拷贝对于深拷贝的对象，改变源对象不会对得到的对象有影响。 上一篇 JavaScript中的继承 前言 文章开始之前，让我们先思考一下这几个问题： 为什么会有浅拷贝与深拷贝 什么是浅拷贝与深拷贝 如何实现浅拷贝与深拷贝 好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！ 如果文章中有出现纰漏、错误之处...

    AZmake 评论0 收藏0

  • JavaScript之浅、深拷贝

    摘要：前言里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。对象的拷贝又分为浅拷贝和深拷贝。印证了上述所说的对于所有的基本类型，简单的赋值已经是实现了深拷贝。 前言 JavaScript里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。 深浅拷贝的区别 拷贝：其实就是一个对象复制给另外...

    leanxi 评论0 收藏0

  • JavaScript专题之深浅拷贝

    摘要：专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如返回一个新数组的特性来实现拷贝。所以我们可以看出使用和是一种浅拷贝。 JavaScript 专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路 前言 拷贝也是面试经典呐！ 数组的浅拷贝 如果是数组，我们可以利用数组的一些方法比如：slice、co...

    RancherLabs 评论0 收藏0

  • JavaScript 数据结构与算法之美 - 栈内存与堆内存 、浅拷贝与深拷贝

    摘要：栈内存与堆内存浅拷贝与深拷贝，可以说是前端程序员的内功，要知其然，知其所以然。栈内存与堆内存中的变量分为基本类型和引用类型。 showImg(https://segmentfault.com/img/bVbuvnj?w=900&h=250); 前言 想写好前端，先练好内功。 栈内存与堆内存 、浅拷贝与深拷贝，可以说是前端程序员的内功，要知其然，知其所以然。 笔者写的 JavaScrip...

    dailybird 评论0 收藏0

发表评论

登陆后可评论

0条评论

MyFaith

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<