关于JS的深拷贝，你用对方法了吗?

最新推荐文章于 2024-04-09 10:49:45 发布

前端达人

最新推荐文章于 2024-04-09 10:49:45 发布

阅读量817

点赞数

文章标签： javascript 前端 vue.js json 开发语言

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/129234061

版权

JS深拷贝，你用对了吗？

在JavaScript中，深拷贝一个对象是创建一个全新的对象，包括嵌套对象在内，所有属性都是完全独立的副本。这与浅拷贝不同，浅拷贝只会复制第一级属性，而嵌套的对象则是引用，而非复制。

在JavaScript中，有多种方法可以进行深拷贝，但是你需要结合使用场景选择最佳的。

能否使用 JSON.parse & JSON.stringify 吗? ❌

JSON.parse(JSON.stringify(obj))是一种使用JSON序列化创建对象的深度拷贝的方法。（它适用于不包含任何循环引用的对象，但如果对象包含循环引用，则该方法会失败）。

例如这个示例：

const obj = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(obj));
console.log(clone);
// Output: { a: 1, b: { c: 2 } }

实际上，这种方法很棒，而且性能出乎意料地好，但是它存在一个问题，无法很好地解决某些情况。

以这个为例：

const calendarEvent = {
  title: "source: https://www.qianduandaren.com",
  date: new Date(123),
  attendees: ["Lian"]
}
// JSON.stringify将date转换为字符串
const copy = JSON.parse(JSON.stringify(calendarEvent))

如果我们打印输出copy变量，将会得到：

{
  title: "source: https://www.qianduandaren.com",
  date: "1970-01-01T00:00:00.123Z"
  attendees: ["Lian"]
}

这不是我们想要的！日期应该是一个Date对象，而不是字符串。

能否使用 Lodash 或 underscore _.cloneDeep() 的深拷贝方法? ❌

Lodash或underscore _.cloneDeep()方法 - 这些库提供了一个深拷贝函数，可以处理循环引用和其他边缘情况。

例如：

const _ = require('lodash');
const obj = { a: 1, b: { c: 2 } };
const clone = _.cloneDeep(obj);
console.log(clone);
// 输出：{ a: 1, b: { c: 2 } }

到目前为止，Lodash的cloneDeep函数一直是解决这个问题的常见方法。

实际上，这种方法确实可以正常工作：

import cloneDeep from 'lodash/cloneDeep'
const calendarEvent = {
title: "源自：https://www.qianduandaren.com/",
date: new Date(123),
attendees: ["Lian"]
}
// ✅ 一切正常！
const clonedEvent = cloneDeep(calendarEvent)

然而，有一个问题。我的开发环境中使用的 Import 导入，每个导入模块的大小（以千字节为单位）。而这个特定的函数相当的庞大，经过最小化处理后的大小为 17.4kb，经过压缩后的大小为 5.3kb。

这个大小估算仅基于单独导入函数。如果您选择常见的导入方式，暂不考虑 tree shaking（可能不总是有效）那么整个引入函数包，可能会带来高达 25kb 的数据量。

尽管这个数据量不算大，但它在我们的情况下是不必要的，因为现代浏览器已经内置了 Structured Clone 功能，后面会原生实现这个功能。

能否使用展开运算符来深度克隆一个对象吗？❌

不行，JavaScript中的展开运算符(...)只能对对象进行浅拷贝(shallow clone)。使用展开运算符克隆一个对象时，任何嵌套的对象仍将被引用而不是被复制，因此在克隆对象中对嵌套对象进行的更改也会影响原始对象。

以下是一个例子：

const original = {a: 1, b: {c: 2}};
const clone = {...original};

console.log(clone);
// Output: {a: 1, b: {c: 2}}

clone.b.c = 3;

console.log(original);
// Output: {a: 1, b: {c: 3}}

在这个例子中，即使克隆对象是一个新对象，对克隆的b属性所做的任何更改也会影响原始对象的b属性。

可以使用 Object.assign 在 javascript 中深度克隆一个对象吗？❌

不行，JavaScript 中的 Object.assign() 方法只会执行浅克隆（shallow clone）一个对象。当使用 Object.assign() 来克隆一个对象时，任何嵌套的对象仍然会被引用而不是被复制，因此克隆对象中嵌套对象的更改也会影响到原始对象。

以下是一个示例：

const original = {a: 1, b: {c: 2}};
const clone = Object.assign({}, original);

console.log(clone);
// Output: {a: 1, b: {c: 2}}

clone.b.c = 3;

console.log(original);
// Output: {a: 1, b: {c: 3}}

在这个例子中，尽管克隆对象是一个新的对象，但是对克隆对象的 b 属性进行的任何更改也会影响到原始对象的 b 属性。

结构化克隆（Structured Clone）✅

结构化克隆是 JavaScript 中的一个概念，它指的是创建对象的深层克隆过程，包括其嵌套对象、数组以及其他复杂数据结构。结构化克隆算法被 JavaScript 中多个 API 所使用，例如用于窗口对象（例如页面和 iframe 之间）之间通信的 postMessage 方法，用于在浏览器中存储和检索数据的 IndexedDB API，以及用于后台处理网络请求的 Service Workers API。

结构化克隆算法通过递归地复制对象的所有属性，包括嵌套对象和数组，将其复制到具有相同结构和值的新对象中。它可以处理多种数据类型，包括函数、日期、正则表达式、数组和对象。

结构化克隆算法是在 JavaScript 中创建复杂数据结构的深层克隆的强大工具，并经常用于在浏览器或其他 JavaScript 环境中执行复杂的数据操作。

1、手写代码实现

使用递归自定义实现 —— 这种方法涉及定义一个使用递归创建对象的深层克隆的函数。

const original = { a: 1, b: { c: new Date() } };

const deepClone = (obj) => {
  if (obj === null || typeof obj !== "object") return obj;
  let clone = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] =
        obj[key] instanceof Date
          ? new Date(obj[key].getTime())
          : deepClone(obj[key]);
    }
  }
  return clone;
};

const clone = deepClone(original);

console.log(clone);
// Output: {a: 1, b: {c: 2022-12-31T08:00:00.000Z}}

clone.b.c.setFullYear(2023);

console.log(original);
// Output: {a: 1, b: {c: 2022-12-31T08:00:00.000Z}}

此方法可以解决上述所有问题。以下是上述代码解读：

首先，我们定义了一个原始对象 original，它包含两个属性 a 和 b，其中 b 属性的值是一个日期对象。

const original = { a: 1, b: { c: new Date() } };

接下来，定义了一个 deepClone 函数，用于对任意对象进行深拷贝。这个函数首先检查传入的对象是否是 null 或非对象，如果是，则直接返回该对象。

const deepClone = (obj) => {
  if (obj === null || typeof obj !== "object") return obj;

接着，根据传入对象的类型创建一个克隆对象，如果传入的是数组，则创建一个空数组，否则创建一个空对象。

let clone = Array.isArray(obj) ? [] : {};

然后，遍历原始对象的所有属性，如果该属性是原始对象自身的属性（不是原型链上的属性），则递归地对该属性进行深拷贝，并将其赋值给克隆对象的对应属性。如果该属性是日期对象，则对其进行特殊处理，创建一个新的日期对象，并将其时间戳设置为原始日期对象的时间戳。

for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] =
        obj[key] instanceof Date
          ? new Date(obj[key].getTime())
          : deepClone(obj[key]);
    }
  }

最后，返回克隆对象。

return clone;
};

最后做下验证，使用 deepClone 函数对 original 对象进行深度拷贝，得到了一个新的克隆对象 clone。在 clone 对象上进行修改并不会影响原始对象 original。

const clone = deepClone(original);

console.log(clone);
// Output: {a: 1, b: {c: 2022-12-31T08:00:00.000Z}}

clone.b.c.setFullYear(2023);

console.log(original);
// Output: {a: 1, b: {c: 2022-12-31T08:00:00.000Z}}

运行结果表明，尽管对 clone.b.c 进行了修改，但是原始对象 original 并没有受到影响，它的属性 b.c 仍然是一个日期对象，年份为 2022 年。

2、原生 structuredClone() 方法

structuredClone() 是 JavaScript 的原生方法，它是浏览器内置的 API 之一，可用于深拷贝对象。structuredClone() 方法在复制对象时会处理复杂的数据类型，并确保它们的引用关系得到正确处理。它是深拷贝对象的最佳选择之一，因为它可以同时处理各种数据类型，并保持它们的引用关系不变。此外，它还支持多种环境，包括 Web Workers 和 Service Workers 等。

使用structuredClone()进行深拷贝的优点是它是 JavaScript 的原生方法，内置于浏览器中，因此不需要额外的依赖。此外，它能够深度复制包括 Date，RegExp，Map 和 Set 等所有 JavaScript 基本类型和复杂类型数据，能够准确地复制各种对象和数据结构。在需要精确拷贝数据的场景中，如跨文档通信、存储和恢复应用程序状态等场景，使用该方法可以确保复制的对象完全相同，不会出现副作用。

然而，使用structuredClone()进行深拷贝的缺点是它只能用于浏览器环境，不能用于 Node.js 环境。此外，它不能复制一些特定的对象，如 Blob，File，ImageData，AudioContext 等。还有一点需要注意的是，由于该方法是基于序列化和反序列化实现的，所以它可能不适用于大型对象和数据结构，因为它可能会导致性能问题。

因此，在使用structuredClone()方法进行深拷贝时，需要根据具体情况权衡其优缺点，并确保使用它的场景是合适的。

结束

本文章主要介绍了在 JavaScript 中正确使用深拷贝的方法，想要在 JavaScript 对正确使用深拷贝的我们来说是非常有用的。深拷贝虽然在某些情况下会带来性能问题，但是在处理复杂数据结构时，它是非常有必要的。我们需要仔细评估自己的应用场景，选择适合自己的深拷贝方法。在实践中，我们需要时刻注意内存使用和性能问题，并根据具体情况选择最合适的深拷贝方法。深拷贝虽然能够处理复杂数据结构，但在某些情况下可能会影响性能，因此需要谨慎使用。最好的实践是在需要深拷贝时，先评估数据结构的复杂性和大小，建议使用我推荐的结构化克隆的方法。

今天的分享就到这里，希望对你有所帮助，感谢你的阅读，文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

前端达人

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
关于JS的深拷贝，你用对方法了吗?

JS深拷贝，你用对了吗？在JavaScript中，深拷贝一个对象是创建一个全新的对象，包括嵌套对象在内，所有属性都是完全独立的副本。这与浅拷贝不同，浅拷贝只会复制第一级属性，而嵌套的对象则是引用，而非复制。在JavaScript中，有多种方法可以进行深拷贝，但是你需要结合使用场景选择最佳的。能否使用 JSON.parse & JSON.stringify 吗? ❌JSON.parse(JS...
复制链接

扫一扫