JavaScript中的结构化克隆算法与深拷贝实现

描述
结构化克隆算法是JavaScript中用于复制复杂JavaScript对象的算法，主要用于Web Workers通信、IndexedDB存储等场景。与JSON序列化相比，它能处理更多数据类型，是实现真正深拷贝的重要机制。

知识讲解

1. 什么是结构化克隆
结构化克隆算法可以递归地遍历对象，创建完整的副本，包括处理循环引用和特殊数据类型。

// JSON.stringify的局限性
const obj = {
  date: new Date(),
  regex: /pattern/,
  set: new Set([1, 2, 3]),
  map: new Map([['key', 'value']])
};

const jsonCopy = JSON.parse(JSON.stringify(obj));
console.log(jsonCopy); 
// { date: "2023-10-01T...", regex: {}, set: {}, map: {} } - 类型丢失

// 结构化克隆能保持类型
const cloned = structuredClone(obj);
console.log(cloned.date instanceof Date); // true

2. 支持的数据类型
结构化克隆支持以下数据类型：

• 基本类型（string、number、boolean等）
• Array、Object
• Date、RegExp
• Map、Set
• ArrayBuffer、TypedArray
• Blob、File
• ImageBitmap
• 循环引用

3. 实现原理步骤

步骤1：检测循环引用

function structuredClonePolyfill(value) {
  const visited = new Map(); // 存储已访问对象
  
  function clone(input) {
    // 处理基本类型
    if (typeof input !== 'object' || input === null) {
      return input;
    }
    
    // 检测循环引用
    if (visited.has(input)) {
      return visited.get(input);
    }
    
    // 继续处理引用类型...
  }
  
  return clone(value);
}

步骤2：处理特殊对象类型

function clone(input) {
  // ... 基本类型处理同上
  
  // 处理Array
  if (Array.isArray(input)) {
    const copy = [];
    visited.set(input, copy);
    input.forEach((item, index) => {
      copy[index] = clone(item);
    });
    return copy;
  }
  
  // 处理Date
  if (input instanceof Date) {
    return new Date(input.getTime());
  }
  
  // 处理RegExp
  if (input instanceof RegExp) {
    return new RegExp(input);
  }
  
  // 处理Set
  if (input instanceof Set) {
    const copy = new Set();
    visited.set(input, copy);
    input.forEach(value => {
      copy.add(clone(value));
    });
    return copy;
  }
  
  // 处理Map
  if (input instanceof Map) {
    const copy = new Map();
    visited.set(input, copy);
    input.forEach((value, key) => {
      copy.set(clone(key), clone(value));
    });
    return copy;
  }
  
  // 处理普通对象
  if (input instanceof Object) {
    const copy = Object.create(Object.getPrototypeOf(input));
    visited.set(input, copy);
    
    // 复制所有自有属性（包括Symbol属性）
    const allKeys = [
      ...Object.getOwnPropertyNames(input),
      ...Object.getOwnPropertySymbols(input)
    ];
    
    allKeys.forEach(key => {
      const descriptor = Object.getOwnPropertyDescriptor(input, key);
      if (descriptor) {
        Object.defineProperty(copy, key, {
          ...descriptor,
          value: clone(descriptor.value)
        });
      }
    });
    
    return copy;
  }
}

4. 浏览器原生API使用
现代浏览器提供了原生的structuredClone API：

const original = {
  name: "John",
  hobbies: new Set(['reading', 'coding']),
  metadata: new Map([['created', new Date()]]),
  friends: [{ name: "Alice" }]
};

// 添加循环引用
original.self = original;

try {
  const cloned = structuredClone(original);
  console.log(cloned.hobbies instanceof Set); // true
  console.log(cloned.metadata instanceof Map); // true
  console.log(cloned.self === cloned); // true - 保持循环引用
} catch (err) {
  console.error('克隆失败:', err);
}

5. 不支持的情况与限制

// 不支持的数据类型
const problematicObj = {
  func: function() {}, // 函数
  domElement: document.body, // DOM节点
  proto: Object.create(null) // 无原型对象
};

try {
  structuredClone(problematicObj);
} catch (err) {
  console.log(err.message); // 无法克隆函数、DOM节点等
}

6. 实际应用场景

场景1：Web Workers通信

// 主线程
const worker = new Worker('worker.js');
const complexData = {
  array: new Float32Array([1, 2, 3]),
  config: new Map([['size', 100]])
};

worker.postMessage(complexData); // 自动使用结构化克隆

// Worker线程
self.onmessage = function(e) {
  console.log(e.data.array instanceof Float32Array); // true
};

场景2：状态管理中的不可变更新

function immutableUpdate(state, updates) {
  const newState = structuredClone(state);
  Object.assign(newState, updates);
  return newState;
}

const prevState = {
  users: new Map([['user1', { name: 'John' }]]),
  settings: { theme: 'dark' }
};

const nextState = immutableUpdate(prevState, {
  settings: { theme: 'light' }
});

console.log(prevState.users === nextState.users); // false - 深度不可变

总结
结构化克隆算法提供了比JSON序列化更强大的对象复制能力，能正确处理特殊数据类型和循环引用。虽然原生API存在一些限制，但通过polyfill可以实现完整的深拷贝功能，是处理复杂数据复制的理想选择。