JS数组复制的5种方法

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JS复制数组的几种方法》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

在JavaScript中复制数组不能直接用等号赋值，因为数组是引用类型，直接赋值只会复制内存地址，导致新旧数组相互影响。1. 使用展开运算符 [...originalArray] 是最简洁现代的浅拷贝方法；2. Array.from(originalArray) 和 slice() 也能实现浅拷贝，效果类似；3. concat() 通过空数组连接原数组实现复制；这些方法均为浅拷贝，即新数组中的引用类型元素仍共享原数组的引用，修改嵌套对象会影响原数组。4. 深拷贝需用 JSON.parse(JSON.stringify()) 或递归函数（如Lodash的 _.cloneDeep()），以彻底分离所有嵌套结构。选择方法应根据是否需要深拷贝及数据复杂度决定，性能差异在常规场景下可忽略，推荐优先考虑代码可读性与适用性。

在JavaScript里，如果你想复制一个数组，可不是简单地用等号赋值就能搞定的。你需要明确地告诉JavaScript，你要一个新的数组，并且把原数组里的所有元素都搬过来。这样做才能确保你修改新数组时，不会意外地影响到原来的那个。

复制数组的方法有很多，每种都有它适用的场景和一些需要注意的小细节。我个人最常用的，也是现在前端开发里非常流行且简洁的方式，就是使用展开运算符（spread syntax）。比如，你有一个 originalArray，想复制一份，直接 const newArray = [...originalArray]; 就可以了。这行代码的背后，是JavaScript创建了一个全新的数组，然后把 originalArray 里的每一个元素“展开”并填充到这个新数组里。

当然，还有其他一些经典方法：

• Array.from()：这个方法非常灵活，它能从一个类数组对象或可迭代对象创建一个新的、浅拷贝的数组实例。对于数组来说，const newArray = Array.from(originalArray); 效果和展开运算符类似，同样是创建了一个新数组。
• slice()：这是数组原型上的一个方法，当不带任何参数调用时，originalArray.slice() 会返回原数组的一个浅拷贝。const newArray = originalArray.slice(); 简单直接，也是很多老项目里常见的写法。
• concat()：虽然 concat 主要用于连接数组，但当它与一个空数组结合时，也能实现复制的效果。const newArray = [].concat(originalArray); 同样会返回一个新数组，包含原数组的所有元素。

这些方法都属于“浅拷贝”，这意味着如果你的数组里嵌套了对象或其他数组，那么这些嵌套的引用类型数据在复制后，新旧数组仍然会共享同一个引用。这一点，在实际开发中非常重要，也是很多初学者容易踩坑的地方。

为什么直接赋值不行？理解引用与值类型

你可能会好奇，为啥不能直接 let newArr = oldArr; 呢？这其实是JavaScript数据类型的一个核心概念在作祟。在JavaScript中，数据类型大致分为两类：基本类型（如字符串、数字、布尔值、null、undefined、Symbol、BigInt）和引用类型（主要是对象、数组和函数）。

当你对一个基本类型变量进行赋值时，比如 let a = 10; let b = a;，b 会得到 a 的一个副本，它们是完全独立的。你修改 b 不会影响 a。

但数组是引用类型。当你写 let newArr = oldArr; 时，newArr 并没有得到 oldArr 的一个副本，它只是得到了 oldArr 所指向的那个内存地址。简单来说，newArr 和 oldArr 现在都指向了内存中的同一个数组。这就好比你给同一个文件夹起了两个不同的名字，无论你通过哪个名字去修改文件夹里的内容，实际修改的都是同一个地方。

举个例子：

const original = [1, 2, { name: 'Alice' }];
const assigned = original; // 直接赋值

assigned.push(4);
assigned[0] = 99;
assigned[2].name = 'Bob'; // 修改嵌套对象

console.log(original); // 输出: [99, 2, { name: 'Bob' }, 4]
console.log(assigned); // 输出: [99, 2, { name: 'Bob' }, 4]
// 它们完全一样，因为指向的是同一个数组

这种行为在某些场景下可能正是你想要的，比如你希望两个变量始终同步更新。但更多时候，尤其是在处理数据时，我们希望拥有一个独立的数据副本，避免“牵一发而动全身”的副作用。这就是为什么我们需要明确地进行数组复制操作的原因。

浅拷贝与深拷贝：何时需要更彻底的复制？

前面提到的展开运算符、slice()、Array.from() 和 concat() 都属于浅拷贝。它们能很好地处理数组中包含基本类型元素的情况，因为这些基本类型的值会被直接复制。然而，一旦数组中出现了对象或另一个数组（即引用类型），浅拷贝就显得力不从心了。

浅拷贝的本质是：它创建了一个新数组，但如果原数组的元素是引用类型（比如对象或数组），那么新数组中对应的元素仍然是原引用类型元素的引用。换句话说，它们指向的是内存中的同一个对象或数组。

const originalArray = [1, { a: 1 }, [2, 3]];
const shallowCopy = [...originalArray];

shallowCopy[0] = 100; // 修改基本类型，互不影响
shallowCopy[1].a = 200; // 修改嵌套对象属性，原数组也会受影响
shallowCopy[2].push(4); // 修改嵌套数组，原数组也会受影响

console.log(originalArray); // 输出: [1, { a: 200 }, [2, 3, 4]]
console.log(shallowCopy);   // 输出: [100, { a: 200 }, [2, 3, 4]]

可以看到，虽然 shallowCopy 是一个新数组，但它内部的 { a: 1 } 和 [2, 3] 仍然是和 originalArray 共享的。

那么，何时需要深拷贝呢？当你需要一个完全独立的数据副本，包括所有嵌套的对象和数组都不能与原数据有任何关联时，你就需要深拷贝。这在处理复杂的配置对象、状态管理（如Redux中不可变状态的更新）、或者需要回溯数据历史的场景中非常常见。

实现深拷贝的方法通常有：

1. JSON.parse(JSON.stringify(object))：这是最简单粗暴，也最常用的深拷贝方法。它先把对象序列化成JSON字符串，再反序列化回来，这样就切断了所有引用。

   • 优点：简单，一行代码搞定。
   • 缺点：
     • 无法处理函数、undefined、Symbol、BigInt 类型的数据（它们会在序列化时丢失）。
     • 无法处理循环引用（会报错）。
     • 无法处理 Date 对象（会变成字符串）。
     • 性能相对较低，尤其是在处理大型复杂对象时。

   const originalDeep = [1, { a: 1, b: () => {} }, new Date()];
   const deepCopyJSON = JSON.parse(JSON.stringify(originalDeep));
   console.log(deepCopyJSON); // 输出: [1, { a: 1 }, "2023-10-27T...Z"] (函数丢失，日期变字符串)

2. 递归拷贝：对于更复杂的情况，尤其是要处理函数、日期、循环引用等，你需要编写一个递归函数来遍历对象的每一个属性，并根据其类型进行深拷贝。这通常是手写或使用成熟库（如Lodash的 _.cloneDeep()）的方式。

   // 简化版递归深拷贝（不处理循环引用、特殊对象如Date、RegExp等）
   function deepClone(obj) {
       if (obj === null || typeof obj !== 'object') {
           return obj;
       }
   
       let clone = Array.isArray(obj) ? [] : {};
       for (let key in obj) {
           if (Object.prototype.hasOwnProperty.call(obj, key)) {
               clone[key] = deepClone(obj[key]);
           }
       }
       return clone;
   }
   
   const originalDeepComplex = [1, { a: 1, b: { c: 2 } }];
   const deepCopyManual = deepClone(originalDeepComplex);
   deepCopyManual[1].b.c = 99;
   console.log(originalDeepComplex[1].b.c); // 输出: 2 (原数组未受影响)

选择哪种拷贝方式，完全取决于你的具体需求。对于大多数只包含基本类型或不需要修改嵌套对象的数组，浅拷贝就足够了，而且性能更好。当你需要一个完全独立的数据副本，并且数据结构复杂时，才应该考虑深拷贝。

性能考量：哪种数组复制方法效率更高？

在JavaScript中，不同的数组复制方法在性能上确实存在差异，但对于大多数日常应用场景和中小型数组而言，这些差异通常微乎其微，不足以成为你选择方法的决定性因素。我们更多地会从代码的可读性、简洁性以及是否满足浅拷贝/深拷贝需求来考量。

不过，既然提到了性能，我们还是可以简单聊聊：

• 展开运算符 (...)、slice()、Array.from() 和 concat()：这些浅拷贝方法通常都非常高效。它们在底层实现上都涉及创建一个新数组并迭代原数组元素。现代JavaScript引擎（如V8）对这些操作进行了高度优化，尤其是在处理数组时，它们的性能表现往往不相上下。展开运算符因为其简洁和声明式风格，在很多情况下甚至可能被引擎进一步优化。

  • 我个人在实践中发现，对于大部分场景，选择展开运算符 (...) 既能保证性能，又能提供极佳的可读性，是我的首选。它表达意图清晰：“我要一个和这个数组一样的新数组”。

• JSON.parse(JSON.stringify(array))：这种深拷贝方法在性能上通常会比浅拷贝方法慢很多，尤其是在处理大型或深度嵌套的数组/对象时。这是因为它涉及到两个阶段：先将整个对象序列化为字符串（CPU密集型操作），再将字符串解析回对象（同样是CPU密集型操作）。这种开销在数据量大时会变得非常明显。

• 递归深拷贝（手写或库函数如Lodash cloneDeep）：这类方法性能介于浅拷贝和 JSON.parse(JSON.stringify()) 之间，具体取决于实现复杂度和数据结构。它们通常比 JSON.parse(JSON.stringify()) 更灵活，可以处理更多数据类型，但也会有递归调用的开销。对于需要处理复杂数据结构且注重性能的场景，专业的深拷贝库通常会做得更好，因为它们会考虑各种边缘情况和优化策略。

总结一下我的看法：

除非你正在处理数万甚至数十万级别的数组元素，并且对性能有极致要求（这种情况下你可能需要进行性能基准测试），否则，选择浅拷贝方法时，你大可不必纠结于它们之间那微小的性能差异。更重要的是选择一个让你和你的团队成员都能快速理解、易于维护的方法。

对于浅拷贝，我倾向于推荐展开运算符 (...)，因为它现代、简洁、表达力强。

而对于深拷贝，如果你只是处理纯粹的JSON数据（没有函数、日期等特殊类型），JSON.parse(JSON.stringify()) 确实是最简单的方案。但如果数据结构复杂，或者对性能有较高要求，那么引入像Lodash这样的库，使用其提供的 _.cloneDeep() 会是更稳妥、更专业的选择。

总而言之，理解不同复制方法的原理和它们在浅拷贝/深拷贝上的差异，远比纠结于它们之间的微小性能差距来得重要。选择最适合你当前任务和数据结构的方法，才是王道。

今天关于《JS数组复制的5种方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于引用类型,浅拷贝,深拷贝,展开运算符,JS复制数组的内容请关注golang学习网公众号！