JS 拷贝数组 14 个技巧：让数组操控易如反掌！

深入剖析 JavaScript 中的数组拷贝方法

前言

在 JavaScript 中，数组是一种必不可少的结构，用于存储和操作相关的数据。然而，对数组进行拷贝却经常被忽略或误解。本文将深入探讨 JavaScript 数组拷贝的机制，并提供多种实用的方法，帮助开发人员有效地拷贝数组。

JavaScript 中的数组可变性

了解 JavaScript 中数组的可变性对于理解数组拷贝至关重要。与某些其他编程语言不同，JavaScript 中的数组是可变的，这意味着在创建数组后仍可以修改其内容。因此，简单地将旧数组分配给新变量并不能真正创建一个副本，而是创建了一个对同一数组对象的引用。

浅拷贝 vs 深拷贝

为了避免这种浅拷贝带来的问题，我们需要使用深拷贝来创建一个新数组，其中包含旧数组所有元素的副本。深拷贝会递归地复制数组及其所有嵌套元素，从而创建完全独立的数组。

14 种 JavaScript 数组拷贝方法

1. slice() 方法

const originalArray = [1, 2, 3];
const copyArray = originalArray.slice();

2. concat() 方法

const originalArray = [1, 2, 3];
const copyArray = [].concat(originalArray);

3. 扩展运算符 (...)

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

4. Array.from() 方法

const originalArray = [1, 2, 3];
const copyArray = Array.from(originalArray);

5. map() 方法

const originalArray = [1, 2, 3];
const copyArray = originalArray.map(element => element);

6. reduce() 方法

const originalArray = [1, 2, 3];
const copyArray = originalArray.reduce((acc, element) => {
  acc.push(element);
  return acc;
}, []);

7. forEach() 方法

const originalArray = [1, 2, 3];
const copyArray = [];
originalArray.forEach(element => {
  copyArray.push(element);
});

8. for 循环

const originalArray = [1, 2, 3];
const copyArray = [];
for (let i = 0; i < originalArray.length; i++) {
  copyArray.push(originalArray[i]);
}

9. while 循环

const originalArray = [1, 2, 3];
const copyArray = [];
let i = 0;
while (i < originalArray.length) {
  copyArray.push(originalArray[i]);
  i++;
}

10. do-while 循环

const originalArray = [1, 2, 3];
const copyArray = [];
let i = 0;
do {
  copyArray.push(originalArray[i]);
  i++;
} while (i < originalArray.length);

11. for-of 循环

const originalArray = [1, 2, 3];
const copyArray = [];
for (const element of originalArray) {
  copyArray.push(element);
}

12. for-in 循环

const originalArray = [1, 2, 3];
const copyArray = [];
for (const index in originalArray) {
  copyArray.push(originalArray[index]);
}

13. Object.assign() 方法

const originalArray = [1, 2, 3];
const copyArray = Object.assign([], originalArray);

14. JSON.parse() 和 JSON.stringify() 方法

const originalArray = [1, 2, 3];
const copyArray = JSON.parse(JSON.stringify(originalArray));

总结

掌握 JavaScript 数组拷贝的技巧对于有效地管理数据结构至关重要。本文讨论了浅拷贝和深拷贝之间的区别，并提供了 14 种实用的数组拷贝方法。通过理解这些方法及其优缺点，开发人员可以根据自己的具体需求选择最合适的解决方案。

常见问题解答

1. 浅拷贝和深拷贝之间有什么区别？

浅拷贝仅拷贝数组的引用，而深拷贝会递归地拷贝数组及其所有嵌套元素。

2. 为什么使用深拷贝而不是浅拷贝？

深拷贝可确保创建完全独立的数组，防止对原始数组的修改影响到新数组。

3. slice() 方法和 concat() 方法有什么区别？

slice() 方法返回原始数组的一个切片，而 concat() 方法将原始数组与一个或多个其他数组连接起来。

4. 什么时候应该使用扩展运算符 (...)？

扩展运算符是创建一个新数组最简洁的方法，特别是在使用箭头函数或解构赋值时。

5. 使用 forEach() 方法拷贝数组有哪些缺点？

forEach() 方法不返回新数组，因此需要手动创建一个新数组并将其填充。