JS深度克隆详解：JSON、递归、structuredClone与Lodash对比

在 JavaScript 中执行深度克隆（deep clone）意味着生成一个对象的完整独立副本，确保所有嵌套层级的对象都被实际复制，而非仅保留对原始嵌套对象的引用。这与浅克隆有本质区别：浅克隆仅复制对象的第一层引用，而深度克隆会递归地复制对象内部所有层级的数据。

为什么需要深度克隆

在复杂应用开发中，特别是涉及不可变数据结构的场景下，修改对象副本而不影响原始数据至关重要。例如在 React 的状态管理、Vue 的数据绑定机制，或 Redux 的状态更新流程中，保持原始状态不被意外修改是核心要求。

常见的深度克隆方法

方法 1：使用 JSON 方法

实现深度克隆最直观的方式是利用 JSON.parse() 结合 JSON.stringify()。尽管该方法代码简洁，但存在明显的局限性和潜在缺陷：

const originalObj = {
  name: 'Alice',
  address: {
    city: 'Wonderland',
    postalCode: '12345'
  }
};

const clonedObj = JSON.parse(JSON.stringify(originalObj));

console.log(clonedObj); // { name: 'Alice', address: { city: 'Wonderland', postalCode: '12345' } }

优点：

实现简单，代码量极少。

缺点：

无法处理函数、undefined 值、Symbol 类型以及 Date 等特定对象。
无法保留循环引用，遇到循环结构时会报错或丢失数据。
忽略对象的 prototype 链以及 getter/setter 等特殊属性定义。

方法 2：手动递归克隆

针对结构更复杂的对象，可以通过编写递归函数来实现深度克隆：

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj; // 如果是原始类型，直接返回
  }

  // 处理特殊情况：Date 和 RegExp 等类型
  if (obj instanceof Date) {
    return new Date(obj); // 克隆 Date 对象
  }

  if (obj instanceof RegExp) {
    return new RegExp(obj); // 克隆 RegExp 对象
  }

  // 处理数组和对象
  const clonedObj = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepClone(obj[key]); // 递归克隆每个属性
    }
  }

  return clonedObj;
}

const originalObj = {
  name: 'Bob',
  age: 30,
  dateOfBirth: new Date('1994-12-25'),
  address: {
    city: 'New York',
    zip: '10001'
  },
  hobbies: ['reading', 'coding'],
  greet: function() { console.log('Hello'); }
};

const clonedObj = deepClone(originalObj);

console.log(clonedObj);
console.log(clonedObj.dateOfBirth instanceof Date); // true
console.log(clonedObj.hobbies === originalObj.hobbies); // false

优点：

支持多种数据类型，包括 Date 和 RegExp 对象。
通过额外逻辑可以处理循环引用问题。
可根据具体业务需求进行高度定制。

缺点：

需手动判断并处理各种对象类型，代码逻辑复杂。
若对象存在深层循环引用且未正确处理，可能导致调用栈溢出。

方法 3：使用 StructuredClone (现代浏览器支持)

StructuredClone 是现代浏览器提供的原生克隆方法，能够复制对象及其内部结构，支持 Date、Map、Set、ArrayBuffer 等类型。不过，它依然不支持函数及部分特殊对象（如 RegExp）。

const originalObj = {
  name: 'Charlie',
  birthdate: new Date('1992-05-15'),
  hobbies: ['running', 'painting'],
  meta: new Map([['key', 'value']])
};

const clonedObj = structuredClone(originalObj);

console.log(clonedObj);
console.log(clonedObj.birthdate instanceof Date); // true
console.log(clonedObj.meta instanceof Map); // true
console.log(clonedObj.hobbies === originalObj.hobbies); // false

优点：

现代浏览器内置支持，无需额外引入库，代码简洁。
支持更多原生数据类型，如 Map、Set、ArrayBuffer 和 Date 等。

缺点：

兼容性有限，并非所有 JavaScript 运行环境都支持，例如部分旧版浏览器或 Node.js 环境中不可用。

方法 4：使用第三方库

第三方库通常提供强大且可靠的深度克隆功能，例如 Lodash 的 cloneDeep 方法。它能处理大多数复杂情况，包括循环引用。

// 使用 lodash
import cloneDeep from 'lodash/cloneDeep';

const originalObj = {
  name: 'David',
  hobbies: ['sports', 'music'],
  meta: new Map([['key', 'value']])
};

const clonedObj = cloneDeep(originalObj);

console.log(clonedObj);
console.log(clonedObj.hobbies === originalObj.hobbies); // false

优点：

能处理复杂数据结构，包括循环引用、Map、Set 等。
经过广泛测试，稳定性高且可靠。

缺点：

需引入第三方库，增加项目依赖体积。

实际项目中的应用

假设在开发应用时需要对某个对象状态进行深度克隆，例如在 Redux 或 Vuex 中管理状态：

// 假设这是你的状态对象
const state = {
  user: {
    name: 'Alice',
    preferences: {
      theme: 'dark',
      language: 'en',
    },
  },
  isAuthenticated: true,
};

// 使用深度克隆来避免直接修改原始状态
const newState = deepClone(state);

// 修改新的 state，不会影响原始 state
newState.user.preferences.theme = 'light';

console.log(state.user.preferences.theme); // 'dark'
console.log(newState.user.preferences.theme); // 'light'

此例中，深度克隆确保原始 state 对象不被修改，从而避免不必要的副作用。这在管理应用状态，尤其是要求状态不可变的场景中尤为重要。

总结

JSON 方法适用于简单对象的深度克隆，但不支持函数、日期、正则表达式等类型。

手动递归克隆是最灵活的方式，可处理多种类型，但需编写额外代码。

structuredClone 是现代浏览器中的原生方法，支持更多数据类型，但兼容性较差。

第三方库（如 Lodash）提供了可靠的深度克隆实现，适用于复杂应用，但增加了项目依赖。

在实际项目中，应根据需求选择适合的方法。若项目依赖较少且需处理复杂数据类型，手动实现或使用 structuredClone 是不错的选择。若处理非常复杂的对象且愿意引入外部依赖，使用 Lodash 等库会更为方便。

到此这篇关于如何在JavaScript中进行深度克隆的文章就介绍到这了,更多相关JavaScript深度克隆内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript 深度克隆的四种实现方案与对比