在 JavaScript 中，如果想要将多个数组合并成一个数组，常用的有以下 2 种方式。
- 使用 concat() 方法。
- 使用 ES6 扩展运算符。
使用 concat() 合并数组
在 JavaScript 中，我们可以使用 concat() 方法来将 “当前数组” 与 “其他值（或数组）” 进行合并，然后返回一个新数组。
语法：
const newArray= arr.concat(value1, value2, ..., valueN);说明：
value1、value2、...、valueN 可以是值，也可以是一个数组。如果参数不是数组，它们会被作为单个元素添加到新数组的末尾。
字符串也有类似的 concat() 方法。另请参阅：JavaScript 字符串 concat() 方法。
注意: concat() 方法不会改变原数组，而是返回一个新数组（即合并后的结果）。
示例 1：合并两个数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const arr1 = ["红", "绿"];
const arr2 = ["蓝", "黄"];
const result = arr1.concat(arr2);
console.log(arr1);
console.log(arr2);
console.log(result);
</script>
</body>
</html>运行结果如下。
["红", "绿"]
["蓝", "黄"]
["红", "绿", "蓝", "黄"]分析：
从结果可以看出，concat() 方法并不会改变原数组，而是返回一个新数组。
示例 2：合并多个数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const arr1 = ["红", "绿"];
const arr2 = ["蓝", "黄"];
const arr3 = ["橙", "紫"];
const result = arr1.concat(arr2, arr3);
console.log(result);
</script>
</body>
</html>运行结果如下。
["红", "绿", "蓝", "黄", "橙", "紫"]分析：
concat() 方法可以接收多个数组作为参数，然后会将所有数组一一合并。
示例 3：合并值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const arr = ["红", "绿"];
const blue = "蓝";
const result = arr.concat(blue);
console.log(result);
</script>
</body>
</html>运行结果如下。
["红", "绿", "蓝"]分析：
在这个例子中，变量 blue 是一个字符串，而不是一个数组，此时它会被直接添加到新数组的末尾。
使用 ES6 扩展运算符
想要将多个数组合并成一个数组，除了 concat() 方法之外，我们还可以使用 ES6 扩展运算符。扩展运算符这种方式同样不会修改原数组，而是创建一个新数组。
语法：
const newArray = [...arr1, ...arr2, ..., ...arrN];说明：
扩展运算符 “...” 会将一个数组 “展开” 成其独立的元素。
示例 4：使用 ES6 扩展运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const arr1 = ["红", "绿"];
const arr2 = ["蓝", "黄"];
const result = [...arr1, ...arr2];
console.log(result);
</script>
</body>
</html>运行结果如下。
["红", "绿", "蓝", "黄"]分析：
“...arr1” 会将 arr1 数组中的元素取出来， “...arr2” 也是如此。这些取出的元素共同构成了一个新的数组 result。
提示: 在实际开发中，首选推荐使用 ES6 扩展运算符来合并数组，因为这种方式最为简单。
