JavaScript 数组 concat() 方法

如果你使用 JavaScript，你会经常遇到处理存储在单个变量中的数组和值列表。一个常见的需求是将两个或多个数组合并为一个更大的数组。这正是 concat() 方法可以帮助你完成的。

在本文中，我们将以一种易于理解的方式分解 concat() 的工作原理，即使你是初学者。

concat() 方法是什么？

concat() 方法是一个内置的 JavaScript 方法，由 Array 对象管理。它用于将两个或多个数组合并为一个新的数组。

“concat()”这个词是“concatenation”的缩写，它简单地意味着将事物连接成一个链或序列。

例如：

• 连接字符串意味着连接 字符串
• 连接数组意味着连接 数组

基本语法

• array1 是你调用 concat() 的原始数组
• array2、array3 等是你想要添加的其他数组或值。
• newArray 是结合所有这些数组的结果。

concat() 如何与数组一起工作？

concat() 方法用于数组，以将两个或多个数组（甚至单个值）合并为一个新的单个数组。

以下是它如何工作的逐步表示

1. 从原始数组开始

如果你在现有数组上调用 concat()。该数组被视为基础。让我们将以下 “fruits” 数组视为基础。

2. 传递要组合的数组或值

在 concat() 括号内，你列出了要添加到初始数组的数组或值。

3. 创建一个新数组

当组合两个数组时，concat() 方法不会改变原始数组。相反，它会创建一个全新的数组，该数组以原始数组中的元素开头，然后添加你传递给 concat() 的所有内容。

代码

输出

[ 'apple', 'banana', 'carrot', 'tomato' ]
[ 'apple', 'banana' ]
[ 'carrot', 'tomato' ]

fruits 和 vegetables 数组未更改，combined 数组包含新合并的数组。

Array concat() 方法的示例

1. 连接两个数组

在此示例中，我们将利用 concat() 方法连接两个数组。

代码

输出

[ 1, 2, 3, 4 ]

说明

在上面的代码中，我们有两个数组 array1 和 array2。我们借助 concat() 方法将这两个数组合并，并将其存储在一个名为 result 的数组中，然后使用 console.log() 方法将其打印到控制台。

2. 连接两个以上数组

在此示例中，我们将利用 concat() 方法连接两个以上数组。

代码

输出

[ 1, 2, 3, 4, 5, 6 ]

说明

在上面的代码中，我们有三个数组，分别名为 a、b 和 c。我们使用 concat() 方法将这些数组合并，并将其存储在另一个名为 result 的数组中，然后将其打印到控制台。

3. 通过传递值和其他数组来连接数组

在此示例中，我们将一个数组与单个值和另一个数组合并。

代码

输出

[ 10, 20, 30, 40, 50]

说明

在上面的代码中，我们有一个名为 nums 的数组。我们使用 concat() 方法将其与单个数字 30 和另一个包含元素 [40, 50] 的数组合并，并将结果打印到控制台。

4. 连接嵌套数组

当数组未扁平化时

默认情况下，concat() 方法不会扁平化嵌套数组。在此示例中，我们将一个数组与一个嵌套数组合并，并看到数组未扁平化。

代码

输出

[ 1, 2, [ 3, 4 ] ]

说明

在上面的代码中，我们有两个数组，第一个名为 numbers，另一个名为 nestedNumbers。我们将这两个数组合并并存储在另一个名为 result 的数组中，然后将其打印到控制台。我们可以看到数组未扁平化。

当数组扁平化时:

我们将一个数组与一个嵌套数组合并，但在本例中，我们将利用 flat() 函数，以便结果数组被扁平化。

代码

输出

[ 1, 2, 3, 4 ]

说明

这与上面的代码相同，唯一的区别是存储在 result 中的数组通过使用 flat() 函数被扁平化。

5. 与空数组连接

在此示例中，我们将一个数组与一个空数组合并。这样做是为了创建数组的副本。

代码

输出

[5, 6]

说明

在上面的代码中，我们有一个名为 arr 的数组。我们使用 concat() 方法将其与一个空数组合并，它不会改变数组中的任何内容。将其打印到控制台后，它会给出与原始数组相同的结果。

你何时应该在 JavaScript 中使用 array.concat()？

当你希望以干净、安全的方式组合数组或向数组添加值时，concat() 方法非常方便。在需要避免更改原始数组的情况下，它特别有用。以下是一些你应该使用 concat() 方法的情况

1. 当你想要合并两个或多个数组时

如果你有多个数组，并且想将所有元素合并到一个大数组中，那么请使用 concat()。它比编写 循环 或使用 push() 方法逐个添加项目要简单和干净得多。

代码

输出

[ 'apple', 'banana', 'carrot', 'tomato' ]

说明

在上面的代码中，我们有名为 fruits 和 vegetables 的数组。我们借助 concat() 方法将这些数组合并，并将其存储在一个名为 food 的新数组中，然后将其打印到控制台。

2. 当你想要向数组添加新值时

你可以使用 concat() 向现有数组添加单个项目甚至整个项目数组，而无需更改原始数组。

代码

输出

[ 1, 2, 3, 4, 5, 6 ]

说明

在上面的代码中，我们有一个名为 numbers 的数组。我们使用 concat() 方法将其与另一个值为 (3, 4, [5, 6]) 的数组合并，并将其存储在一个名为 newNumbers 的新数组中，然后将其打印到控制台。

3. 当你想要避免更改原始数组时

与 push() 或 splice() 等方法不同，这些方法会更改原始数组，但 concat() 不会触及原始数组，而是返回一个全新的数组。这在函数式编程或像 React 这样的框架中非常有用，其中不变性很重要，你尝试不修改原始数据。

代码

输出

[ 1, 2 ]
[ 1, 2, 3, 4 ]

说明

在上面的代码中，我们有一个名为 a 的数组。我们使用 concat() 方法将其与另一个值为 (3, 4) 的数组合并，并将其存储在一个名为 b 的新数组中，然后将其打印到控制台。

支持的浏览器

JavaScript 的 Array concat() 方法支持的浏览器有

• 火狐
• Safari
• 边
• Chrome
• Opera

结论

JavaScript 中的 concat() 函数是一种简单而强大的方法，用于组合数组和值。它是安全的，因为它从不改变原始数组，因此可以在不变性很重要的场景中使用。它可以组合项目列表，并允许将新值添加到你正在组合的数组中。一旦你开始使用它，concat() 将使你能够更有效地处理数组。

常见问题解答 (FAQs)

1. concat() 在 JavaScript 中有什么作用？

concat() 方法将两个或多个数组或值合并到一个新数组中。它不会改变原始数组，而是返回一个新的组合数组。

2. concat() 会改变原始数组吗？

不，concat() 是非变异的。它不会触及你的原始数组，并为你提供一个包含组合元素的新数组。

输出

[ 1, 2 ]
[ 1, 2, 3, 4 ]

3. 我可以使用 concat() 添加单个值还是只能添加数组？

你可以使用 concat() 添加单个值和只添加数组。

输出

[ 1, 2, 3, 4, 5 ]

4. 我可以用 concat() 组合两个以上的数组吗？

是的，你可以传递任意数量的数组或值。

输出

[ 1, 2, 3, 4, 5, 6 ]

5. 我可以链式调用 concat() 吗？

是的。由于 concat() 返回一个新数组，你可以将多个 concat() 调用链接在一起。

输出

[ 1, 2, 3, 4 ]

6. concat() 只适用于数组吗？

不，concat() 方法是一个数组方法，但它可以接受数组和非数组值，例如 数字、字符串、布尔值 等。结果始终是一个新数组。