结构化克隆——JS 原生的深拷贝方法

前端

2023-05-19 17:50:02

浏览器原生的深拷贝利器：structuredClone 方法全面解析

深拷贝的烦恼

在 JavaScript 中，我们经常需要对复杂数据结构进行复制。传统的深拷贝方法往往复杂且耗时。不过，现在我们迎来了浏览器原生的深拷贝救星——structuredClone 方法。

structuredClone 方法的闪亮登场

structuredClone 方法是 ES2015 引入的浏览器原生方法，专门用于创建对象的深度拷贝。它只用一行代码，就能高效、安全地复制复杂数据结构。

传统深拷贝方法的弊端

传统的深拷贝方法，如 JSON.parse() + JSON.stringify()、展开运算符、递归或 lodash 库，存在以下弊端：

复杂性： 需要编写自定义函数或依赖外部库，代码繁琐。
兼容性： 部分方法可能与某些浏览器不兼容。
性能： 深度拷贝大型数据结构时，效率低下。
安全性： 某些方法可能会修改原对象，导致数据丢失。

structuredClone 方法的优势

与传统方法相比，structuredClone 方法具有以下优势：

简洁高效： 只需一行代码，即可实现深拷贝。
兼容性好： 在所有支持 ES2015 的浏览器中都能使用。
高性能： 浏览器原生优化，深度拷贝速度快。
安全可靠： 保证原对象不会被修改，避免数据丢失。

使用示例

使用 structuredClone 方法进行深拷贝非常简单，代码如下：

const originalObject = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY',
  },
};

const clonedObject = structuredClone(originalObject);

效果演示

clonedObject 是 originalObject 的一个独立副本，对 clonedObject 的修改不会影响 originalObject。

clonedObject.name = 'Jane';
clonedObject.address.city = 'Los Angeles';

console.log(originalObject); // { name: 'John', age: 30, address: { street: 'Main Street', city: 'New York', state: 'NY' } }
console.log(clonedObject); // { name: 'Jane', age: 30, address: { street: 'Main Street', city: 'Los Angeles', state: 'NY' } }