结构化克隆API的前世今生：从深拷贝到原生力量structuredClone()

引言：结构化克隆API的前世今生：从深拷贝到原生力量

在JavaScript的世界里，数据复制是一个常见的需求。尤其是对于复杂的数据结构，如嵌套对象和数组，浅拷贝与深拷贝的概念显得尤为重要。随着技术的发展，我们拥有了structuredClone() API这一强大的内置工具，它不仅解决了深拷贝的问题，还提供了高效的处理机制。本文将通过探讨深浅拷贝概念、手写一个完整的深拷贝方法，并详细解读structuredClone() API的工作原理及其实现，带你走进这个功能强大的API的前世今生。

一、深拷贝与浅拷贝

1. 浅拷贝（Shallow Copy）
浅拷贝是指创建一个新的对象或数组，其元素与原始对象或数组的引用相同，但不包含嵌套对象或数组的独立副本。例如：

let obj = { a: 1, b: { c: 2 } };
let shallowCopy = Object.assign({}, obj);

obj.b.c = 3;
console.log(shallowCopy); // 输出：{ a: 1, b: { c: 3 } }

在这个例子中，虽然shallowCopy是新创建的对象，但是它的b属性指向了与obj.b相同的内存地址，因此当修改obj.b.c时，shallowCopy也会受到影响。

2. 深拷贝（Deep Copy）
深拷贝则是创建一个与原始对象完全独立且内容一致的新对象，包括所有嵌套的对象和数组。这要求递归地复制所有层级的数据。

二、手写一个功能齐全的深拷贝函数

下面是一个简单的深拷贝函数实现，它可以处理基本类型、数组、对象以及它们的嵌套结构：

function deepClone(obj) {
  if (obj === null) return null;
  let cloneObj;
  
  if (Array.isArray(obj)) {
    cloneObj = [];
    for (let i = 0; i < obj.length; i++) {
      cloneObj[i] = deepClone(obj[i]);
    }
  } else if (typeof obj === 'object') {
    cloneObj = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        cloneObj[key] = deepClone(obj[key]);
      }
    }
  } else {
    // 处理基本类型
    return obj;
  }
  
  return cloneObj;
}

let obj = { a: 1, b: { c: 2 } };
let deepCopiedObj = deepClone(obj);

obj.b.c = 3;
console.log(deepCopiedObj); // 输出：{ a: 1, b: { c: 2 } }

三、structuredClone API 的详细解读

structuredClone() 出场

在ECMAScript 6规范之后，Web浏览器引入了一个原生的API——structuredClone()，专门用于深度克隆复杂的数据结构，包括那些自定义类实例无法通过手写方法完美复制的情况。

structuredClone() 是JavaScript中的一个原生API，用于创建给定值的深层拷贝（深克隆）。这个方法使用结构化克隆算法（Structured Clone Algorithm），能够处理包括数组、对象以及一些内置类型在内的复杂数据结构，并且能够正确地复制它们的所有嵌套属性和循环引用。

结构化克隆算法概述

结构化克隆算法可以递归地遍历并复制以下类型的值：

• 基本类型：如数字、字符串、布尔值
• null
• undefined
• Date 对象
• RegExp 对象
• ArrayBuffer, DataView, Int8Array, Uint8Array 等 TypedArray 类型
• Map 和 Set 对象及其内容
• 函数对象以外的普通对象及其可枚举属性（不包括原型链）
• Promise 对象
• Symbol 类型
• 循环引用的对象结构

使用方式

let originalObject = { a: 1, b: { c: 2 } };
let clonedObject = structuredClone(originalObject);

// 修改克隆后的对象不会影响原始对象
clonedObject.a = 2;
clonedObject.b.c = 3;

console.log(originalObject); // 输出：{ a: 1, b: { c: 2 } }
console.log(clonedObject);   // 输出：{ a: 2, b: { c: 3 } }

功能特点

• 深度拷贝：与浅拷贝不同，structuredClone() 不仅复制对象的第一层属性，还会递归复制所有嵌套的对象和数组，确保整个数据结构独立于原始对象。
• 处理循环引用：该算法能识别并正确处理循环引用的情况，即对象之间相互引用的情况。
• 性能优化：在实现过程中，算法会维护一个内部映射表以避免对同一对象的重复复制，从而提高效率。

应用场景

structuredClone() 在实际开发中有多种用途，例如：

• 在Web Workers中传递复杂的数据结构。
• 将数据持久化存储到IndexedDB中。
• 创建对象的副本以防止直接修改原有数据。

注意事项

尽管功能强大，但structuredClone()仍有一些限制：

• 它不能复制函数、正则表达式实例的 lastIndex 属性、Symbol描述符以及其他不可序列化的内部属性。
• 对于自定义类的实例或包含不可序列化属性的对象，该方法可能无法完全克隆其状态。