JavaScript 中复制数组的全面指南

2023-11-15 17:14:31

在 JavaScript 中复制数组的 14 个技巧

简介

在 JavaScript 中，数组是一种数据结构，用于存储有序元素的集合。复制数组是常见的操作，因为它允许您创建原始数组的副本，而不会影响原始数组本身。了解不同复制数组的方法至关重要，因为每种方法都有其优点和缺点。

本文将深入探讨在 JavaScript 中复制数组的 14 种技巧，涵盖从基本到高级的技术。我们将详细介绍每种方法的语法、优点和缺点，让您能够根据您的特定需求选择最合适的方法。

1. Array.from() 方法

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

Array.from() 方法创建一个新数组，其元素与原始数组中的元素相同。它是一种现代且推荐的方法，因为它在所有浏览器中都受支持，并且效率很高。

优点：

创建精确副本
支持可迭代对象
在现代浏览器中得到广泛支持

缺点：

无法修改原型属性

2. 展开运算符 (...运算符)

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

展开运算符 (...) 创建一个新数组，该数组包含原始数组中元素的副本。它是一种简洁且常用的方法，特别是在函数参数中。

优点：

语法简洁
创建精确副本
支持任何可迭代对象

缺点：

无法修改原型属性

3. 切片

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

slice() 方法返回一个新数组，该数组包含原始数组的部分或全部元素。它是一种灵活的方法，可让您复制数组的特定部分。

优点：

允许部分复制
创建精确副本
在所有浏览器中得到广泛支持

缺点：

语法比其他方法更长

4. map() 方法

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

map() 方法创建一个新数组，其中每个元素都是原始数组中相应元素的转换结果。我们可以使用箭头函数返回每个元素的原始值，从而有效地复制数组。

优点：

允许元素转换
非常适合执行逐个元素操作

缺点：

可能会创建新对象（如果元素是对象）

5. slice() 方法

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

slice() 方法与前面的 slice() 方法类似，但它接受单个参数，指定要复制的起始索引。通过将起始索引设置为 0，我们可以复制整个数组。

优点：

创建精确副本
语法简洁
在所有浏览器中得到广泛支持

缺点：

仅支持正数索引

6. concat() 方法

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

concat() 方法创建一个新数组，它是原始数组与第二个数组的连接。我们可以使用空数组作为第二个参数来有效地复制原始数组。

优点：

创建精确副本
允许连接多个数组
在所有浏览器中得到广泛支持

缺点：

对于大型数组效率较低

7. 对象扩展 (Object.assign())

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

Object.assign() 方法通常用于复制对象，但也可以用于复制数组。它创建一个新数组，该数组包含第一个数组（目标数组）的所有元素，并将其与第二个数组（源数组）的元素合并。

优点：

创建精确副本
支持可枚举属性
在所有现代浏览器中得到广泛支持

缺点：

对于大型数组效率较低

8. JSON.parse(JSON.stringify())

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

JSON.parse() 和 JSON.stringify() 方法一起用于序列化和反序列化数据。通过将数组序列化为 JSON 字符串，然后将其反序列化为一个新数组，我们可以有效地复制数组。

优点：

创建精确副本
支持复杂数据结构
跨平台兼容

缺点：

对于大型数组效率较低
可能转换日期等复杂数据类型

9. for...of 循环

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

for...of 循环遍历原始数组中的每个元素，并将每个元素推送到新数组中。它是一种老式的方法，但仍然有效。

优点：

允许元素修改
易于理解和实现

缺点：

比其他方法慢
无法复制复杂数据类型

10. while 循环

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

while 循环与 for...of 循环类似，但它使用索引手动遍历原始数组。

优点：

允许元素修改
易于理解和实现

缺点：

比其他方法慢
无法复制复杂数据类型

11. push() 和 unshift() 方法

const originalArray = [1, 2, 3];
const copiedArray = [];
for (let i = 0; i < originalArray.length; i++) {
  copiedArray.push(originalArray[i]);
}
// 或
const copiedArray = [];
for (let i = originalArray.length - 1; i >= 0; i--) {
  copiedArray.unshift(originalArray[i]);
}

push() 和 unshift() 方法分别将元素推送到新数组的末尾和开头。我们可以使用循环遍历原始数组，将每个元素推送到新数组中。

优点：

允许元素修改
易于理解和实现

缺点：

比其他方法慢
无法复制复杂数据类型

12. splice() 方法

const originalArray = [1, 2, 3];
const copiedArray = originalArray.splice(0);

splice() 方法从原始数组中删除元素并返回一个包含已删除元素的新数组。通过将起始索引设置为 0，我们将删除并返回整个原始数组，有效地复制它。

优点：

创建精确副本
允许部分复制
在所有浏览器中得到广泛支持

缺点：

可能会修改原始数组

13. 创建新的数组对象

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