如何在 JavaScript 中将一个数组附加到另一个数组

在 JavaScript 中将一个数组附加到另​​一个数组

How to Append one Array to Another in JavaScript

将一个数组附加到另​​一个数组：

1. 使用扩展语法 (…) 将两个数组的值解包到第三个数组中。
2. 传播语法将通过将第二个数组附加到第一个数组来返回一个新数组。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

const arr3 = [...arr1, ...arr2];

console.log(arr3); // 👉️ ['a', 'b', 'c', 'd']

我们使用
扩展语法 (…)
将两个数组的值解包到第三个数组中。

最简单的思考方式是：

1. 我们获取 的所有值arr1并将它们添加到arr3。
2. 我们获取 的所有值arr2并将它们添加到arr3。

我们解包数组的顺序被保留，所有的元素arr1都在 的元素之前arr2。

当您需要向数组添加新元素而不更改原始数组的内容时，通常使用扩展语法 (…)。

const arr1 = ['a', 'b'];

const arr2 = [...arr1, 'c', 'd'];

console.log(arr2); // 👉️ ['a', 'b', 'c', 'd']

或者，您可以使用该Array.concat()方法。

使用#将一个数组附加到另​​一个数组Array.concat()

使用该Array.concat()方法将一个数组附加到另​​一个数组，例如
const arr3 = arr1.concat(arr2);.

该Array.concat()方法会将两个数组合并为第三个数组并返回结果。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

const arr3 = arr1.concat(arr2);

console.log(arr3); // 👉️ ['a', 'b', 'c', 'd']

我们使用
Array.concat()
方法将两个数组合并为第三个数组。

该方法不会更改原始数组的内容，而是返回一个新数组。

该方法将要连接到新数组中的数组作为参数。

concat()下面是使用多个数组调用方法的示例。

const arr1 = ['a', 'b'];

const arr2 = arr1.concat(['c'], ['d'], ['e']);

console.log(arr2); // 👉️ ['a', 'b', 'c', 'd', 'e']

我们传递给Array.concat()方法的所有数组，包括arr1合并到一个新数组中。

您甚至可以将非数组值传递给该concat()方法。

const arr1 = ['a', 'b'];

const arr2 = arr1.concat('c', 'd', ['e']);

console.log(arr2); // 👉️ ['a', 'b', 'c', 'd', 'e']

我们将两个字符串和一个数组传递给concat()方法，它们都被合并到新数组中。

另一种方法是使用该push()方法将一个数组附加到另​​一个数组。

使用#将一个数组附加到另​​一个数组push()

使用该Array.push()方法将一个数组附加到另​​一个数组，例如
arr1.push(...arr2);.

该Array.push()方法用于将一个或多个元素添加到数组的末尾。

const arr1 = ['a', 'b'];

const arr2 = ['c', 'd'];

arr1.push(...arr2);

console.log(arr1); // 👉️ ['a', 'b', 'c', 'd', 'e']

arr2我们在调用
Array.push
方法时使用扩展运算符 (…) 来解压值。

该push()方法采用一个或多个值作为参数。参数被推到数组的末尾。

该方法就地改变数组。

您还可以使用一个简单的while循环将一个数组附加到另​​一个数组。

while使用循环将一个数组附加到另​​一个数组

将一个数组附加到另​​一个数组：

1. 使用while循环遍历第二个数组。
2. 在每次迭代中，使用该Array.shift()方法从数组中删除第一个元素。
3. 使用该Array.push()方法将移除的元素推入另一个数组。

const arr1 = ['a', 'b'];

const arr2 = ['c', 'd'];

while (arr2.length) {
  arr1.push(arr2.shift());
}

console.log(arr1); // 👉️ [ 'a', 'b', 'c', 'd' ]

console.log(arr2); // 👉️ []

while只要 的长度arr2大于 ，我们就使用循环进行迭代0。

在每次迭代中，我们使用该Array.shift()方法从第二个数组中删除并返回第一个元素。

const arr2 = ['c', 'd'];

console.log(arr2.shift()); // 👉️ c

我们直接将Array.shift()方法
的输出传递Array.push()给将元素压入第一个数组的方法。

该while循环将第二个数组的内容原地附加到第一个数组。

您还可以使用该Array.forEach()方法将一个数组附加到另​​一个数组。

使用#将一个数组附加到另​​一个数组Array.forEach()

将一个数组附加到另​​一个数组：

1. 使用该Array.forEach()方法迭代第二个数组。
2. 使用该Array.push()方法将每个元素推入第一个数组。

const arr1 = ['a', 'b'];

const arr2 = ['c', 'd'];

arr2.forEach(element => {
  arr1.push(element);
});

console.log(arr2); // 👉️ [ 'c', 'd' ]

我们传递给
Array.forEach()
方法的函数会针对数组中的每个元素进行调用。

在每次迭代中，我们使用该Array.push()方法将元素推入第一个数组。

这种方法只改变了第一个数组的内容，而while
循环方法就地改变了两个数组。

您选择哪个选项是个人喜好的问题。我会使用扩展语法 (…) 或Array.concat()因为这两个选项都非常直接和直观。