JavaScript数组深拷贝方法全解析

文章不知道大家是否熟悉？今天我将给大家介绍《JavaScript数组深拷贝方法详解》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

数组深拷贝的核心是创建一个与原数组完全独立的新数组，修改新数组不会影响原数组。1. JSON序列化/反序列化：适用于仅含基本数据类型和普通对象且无循环引用的数组，优点是简单高效，缺点是无法处理函数、undefined、Symbol及循环引用。2. 递归拷贝：可处理嵌套结构，需通过Map记录已拷贝对象以避免循环引用导致的栈溢出，但仍无法直接复制函数和Symbol。3. structuredClone：现代浏览器原生支持，性能较好且能处理Date、RegExp等特殊对象，但不兼容旧浏览器且无法复制函数和Symbol。4. 浅拷贝后手动深拷贝：适用于仅需深拷贝部分元素的场景，可提升性能但需手动管理拷贝逻辑。5. lodash的_.cloneDeep：功能最强大，支持复杂结构和循环引用，但需引入外部依赖且性能略低。选择方法应根据数组结构复杂度、是否含特殊类型、兼容性要求及性能需求综合判断。

数组深拷贝，说白了，就是创建一个新数组，这个新数组和原始数组完全独立，修改新数组不会影响到原始数组。

解决方案：

实现 JavaScript 数组深拷贝的方法有很多，各有优劣，选择哪个取决于你的具体需求和数组的复杂程度。

JSON 序列化/反序列化：最简单粗暴，但有局限

这是最简单的方法之一，利用 JSON.stringify() 将数组转换为 JSON 字符串，再用 JSON.parse() 将字符串转换回数组。

const originalArray = [1, 2, { a: 3 }];
const deepCopyArray = JSON.parse(JSON.stringify(originalArray));

deepCopyArray[2].a = 4; // 修改深拷贝后的数组
console.log(originalArray[2].a); // 输出 3，说明原始数组未被修改

优点：

• 简单易懂，代码量少。

缺点：

• 无法拷贝函数、undefined、Symbol 等特殊类型。
• 如果数组中包含循环引用，会报错。
• 性能相对较差，特别是对于大型数组。

所以，如果你的数组只包含基本数据类型和普通对象，并且没有循环引用，那么这种方法是最快的。

递归拷贝：更通用，但需要小心

递归拷贝是一种更通用的深拷贝方法，它可以处理更复杂的数据结构。

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj; // 如果不是对象或为 null，直接返回
  }

  const newObj = Array.isArray(obj) ? [] : {}; // 创建新对象或数组

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]); // 递归拷贝
    }
  }

  return newObj;
}

const originalArray = [1, 2, { a: 3, b: function() { console.log('hello'); } }];
const deepCopyArray = deepCopy(originalArray);

deepCopyArray[2].a = 4;
console.log(originalArray[2].a); // 输出 3

deepCopyArray[2].b(); // 报错，deepCopy无法复制函数

优点：

• 可以处理包含嵌套对象和数组的复杂数据结构。

缺点：

• 无法拷贝函数、undefined、Symbol 等特殊类型（需要额外处理）。
• 如果数组中包含循环引用，会导致无限递归，最终栈溢出。
• 性能相对较差，特别是对于大型数组。

需要注意的是，递归拷贝需要处理循环引用的问题，否则会陷入无限循环。一种常见的处理方式是使用 Map 或 Set 来记录已经拷贝过的对象，避免重复拷贝。

使用 structuredClone：现代浏览器原生支持

structuredClone 是一个现代浏览器提供的原生方法，用于深拷贝对象。

const originalArray = [1, 2, { a: 3, b: function() { console.log('hello'); }, c: undefined, d: Symbol('test') }];
const deepCopyArray = structuredClone(originalArray);

deepCopyArray[2].a = 4;
console.log(originalArray[2].a); // 输出 3

// deepCopyArray[2].b(); // 报错，structuredClone无法复制函数
console.log(deepCopyArray[2].c); // undefined
// console.log(deepCopyArray[2].d); // 报错，structuredClone无法复制Symbol

优点：

• 简单易用，一行代码搞定。
• 性能相对较好，因为它是由浏览器原生实现的。
• 可以处理 Date、RegExp 等特殊对象。

缺点：

• 兼容性问题，只在现代浏览器中支持。
• 无法拷贝函数、Symbol 等特殊类型。
• 如果数组中包含循环引用，会报错。

structuredClone 在大多数情况下是一个不错的选择，但需要注意兼容性和无法拷贝的类型。

浅拷贝后手动深拷贝：针对特定场景的优化

有时候，你只需要深拷贝数组中的部分元素，而不是整个数组。这时，可以先进行浅拷贝，然后手动深拷贝需要深拷贝的元素。

const originalArray = [1, 2, { a: 3 }, 4];
const shallowCopyArray = [...originalArray]; // 浅拷贝

shallowCopyArray[2] = deepCopy(originalArray[2]); // 手动深拷贝对象

shallowCopyArray[2].a = 4;
console.log(originalArray[2].a); // 输出 3

优点：

• 可以针对特定场景进行优化，提高性能。

缺点：

• 需要手动处理，代码量相对较多。
• 容易出错，需要仔细考虑哪些元素需要深拷贝。

这种方法适用于只需要深拷贝数组中少量元素的场景，例如，数组中大部分元素都是基本数据类型，只有少数元素是对象或数组。

lodash 的 _.cloneDeep：功能强大，但引入依赖

lodash 是一个流行的 JavaScript 工具库，提供了很多实用的函数，包括深拷贝函数 _.cloneDeep。

const _ = require('lodash');

const originalArray = [1, 2, { a: 3, b: function() { console.log('hello'); } }];
const deepCopyArray = _.cloneDeep(originalArray);

deepCopyArray[2].a = 4;
console.log(originalArray[2].a); // 输出 3

// deepCopyArray[2].b(); // 报错，lodash默认无法复制函数

优点：

• 功能强大，可以处理各种复杂的数据结构。
• 使用方便，一行代码搞定。

缺点：

• 需要引入 lodash 库，增加了项目的依赖。
• 性能可能不如原生方法。

lodash 的 _.cloneDeep 是一个功能强大的深拷贝函数，可以处理各种复杂的数据结构，但需要引入 lodash 库。

哪种方法最适合你？

• 如果数组很简单，只包含基本数据类型和普通对象，并且没有循环引用，那么 JSON.stringify()/JSON.parse() 是最快的。
• 如果需要处理包含嵌套对象和数组的复杂数据结构，并且没有循环引用，那么递归拷贝是一个不错的选择。
• 如果你的目标浏览器支持 structuredClone，并且不需要拷贝函数和 Symbol，那么 structuredClone 是最方便的。
• 如果只需要深拷贝数组中的部分元素，那么浅拷贝后手动深拷贝可以提高性能。
• 如果需要处理各种复杂的数据结构，并且不介意引入 lodash 库，那么 _.cloneDeep 是最强大的。

深拷贝时如何处理循环引用？

循环引用是指对象之间相互引用，例如：

const obj1 = { a: 1 };
const obj2 = { b: obj1 };
obj1.c = obj2; // obj1 引用 obj2，obj2 引用 obj1，形成循环引用

如果使用递归拷贝，遇到循环引用会导致无限递归，最终栈溢出。为了解决这个问题，可以使用 Map 或 Set 来记录已经拷贝过的对象，避免重复拷贝。

function deepCopy(obj, map = new Map()) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (map.has(obj)) {
    return map.get(obj); // 如果已经拷贝过，直接返回
  }

  const newObj = Array.isArray(obj) ? [] : {};
  map.set(obj, newObj); // 记录已经拷贝过的对象

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key], map);
    }
  }

  return newObj;
}

const obj1 = { a: 1 };
const obj2 = { b: obj1 };
obj1.c = obj2;

const deepCopyObj1 = deepCopy(obj1);

deepCopyObj1.a = 2;
console.log(obj1.a); // 输出 1

在这个例子中，Map 用于记录已经拷贝过的对象。当递归拷贝遇到已经拷贝过的对象时，直接返回 Map 中记录的拷贝对象，避免重复拷贝，从而解决了循环引用的问题。

深拷贝函数和 Symbol 类型怎么办？

默认情况下，JSON.stringify()、递归拷贝和 structuredClone 都无法拷贝函数和 Symbol 类型。如果需要拷贝这些类型，需要自定义处理。

对于函数，一种简单的处理方式是直接返回原始函数，这意味着拷贝后的对象和原始对象共享同一个函数。

function deepCopy(obj, map = new Map()) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (typeof obj === 'function') {
    return obj; // 直接返回原始函数
  }

  if (map.has(obj)) {
    return map.get(obj);
  }

  const newObj = Array.isArray(obj) ? [] : {};
  map.set(obj, newObj);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key], map);
    }
  }

  return newObj;
}

const originalObj = { a: 1, b: function() { console.log('hello'); } };
const deepCopyObj = deepCopy(originalObj);

deepCopyObj.b(); // 输出 hello，和原始对象共享同一个函数

对于 Symbol 类型，一种处理方式是忽略它，不进行拷贝。另一种处理方式是使用 Symbol.keyFor() 和 Symbol() 重新创建 Symbol。

function deepCopy(obj, map = new Map()) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (typeof obj === 'function') {
    return obj;
  }

  if (typeof obj === 'symbol') {
    const key = Symbol.keyFor(obj);
    if (key) {
      return Symbol.for(key); // 如果是全局 Symbol，重新创建
    } else {
      return Symbol(obj.description); // 如果是局部 Symbol，重新创建
    }
  }

  if (map.has(obj)) {
    return map.get(obj);
  }

  const newObj = Array.isArray(obj) ? [] : {};
  map.set(obj, newObj);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key], map);
    }
  }

  return newObj;
}

const sym = Symbol('test');
const originalObj = { a: 1, b: sym };
const deepCopyObj = deepCopy(originalObj);

console.log(deepCopyObj.b === sym); // 输出 false，重新创建了 Symbol

需要注意的是，拷贝函数和 Symbol 类型可能会带来一些问题，例如，拷贝后的函数可能无法访问原始对象的作用域，拷贝后的 Symbol 可能不再是唯一的。因此，需要根据具体情况选择合适的处理方式。

好了，本文到此结束，带大家了解了《JavaScript数组深拷贝方法全解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！