JavaScript合并多个数组的多种方法

在实际开发中，经常需要将多个数组合并为一个数组。JavaScript 提供了灵活的方式来实现这一操作。本文将介绍几种常见的合并数组的方法，并附带代码示例与说明，帮助你选择最适合场景的方案。

方法一：使用 concat 方法

concat() 是数组原型上的方法，可以合并两个或多个数组，返回一个新数组，原数组不会被修改。

// 定义多个数组
var arr1 = [1, 2];
var arr2 = [3, 4];
var arr3 = [5, 6];

// 使用 concat 合并
var merged = arr1.concat(arr2, arr3);
console.log(merged); // 输出: [1, 2, 3, 4, 5, 6]
console.log(arr1);   // 原数组不变: [1, 2]

也可以传入多个参数或嵌套数组，concat 会将数组参数展开一层。

var result = [].concat(arr1, arr2, arr3); // 结果相同

方法二：使用展开运算符 (Spread Operator)

ES6 引入的展开运算符 ... 可以在数组字面量中展开数组元素，从而合并多个数组。

var arr1 = [1, 2];
var arr2 = [3, 4];
var arr3 = [5, 6];

var merged = [...arr1, ...arr2, ...arr3];
console.log(merged); // 输出: [1, 2, 3, 4, 5, 6]

这种方法语法简洁，可读性强，推荐在现代项目中使用。

方法三：使用 push.apply 或 push.call

如果需要将多个数组的元素追加到某个已有的数组（而不是创建新数组），可以使用 push.apply 或 push.call。注意这种方法会修改原数组。

var dest = [1, 2];
var src1 = [3, 4];
var src2 = [5, 6];

// 将 src1 和 src2 的所有元素追加到 dest 中
Array.prototype.push.apply(dest, src1);
dest.push.apply(dest, src2); // 或者 dest.push.call(dest, ...src2) 但需展开
console.log(dest); // 输出: [1, 2, 3, 4, 5, 6]

注意：以上写法在 ES5 中常用，但展开运算符更简洁。如果使用 push.call 需要手动展开数组为多个参数。

方法四：使用 reduce 和 concat

当需要将多个数组组成的数组（二维数组）扁平化合并时，可以用 reduce 配合 concat。

var arrays = [[1, 2], [3, 4], [5, 6]];
var merged = arrays.reduce(function(acc, cur) {
  return acc.concat(cur);
}, []);
console.log(merged); // 输出: [1, 2, 3, 4, 5, 6]

如果环境支持 ES6，也可以使用箭头函数简化：

var merged = arrays.reduce((acc, cur) => acc.concat(cur), []);

方法五：使用 flat 方法（处理嵌套数组）

ECMAScript 2019 引入了 flat() 方法，可以将嵌套数组扁平化到指定深度。对于合并多个普通数组，flat() 并不直接适用，但可以将它们放入一个父数组后再扁平化。

var arr1 = [1, 2];
var arr2 = [3, 4];
var arr3 = [5, 6];

// 将所有数组放入一个外层数组，然后扁平化一层
var merged = [arr1, arr2, arr3].flat();
console.log(merged); // 输出: [1, 2, 3, 4, 5, 6]

这种方法适用于需要一次性合并多个数组的场景，但注意 flat() 默认只扁平一层，如果原数组本身有嵌套则需要指定深度。

性能考量与选择建议

对于大多数日常使用，concat 和展开运算符的性能差异不大，展开运算符在引擎优化后通常表现良好。如果需要保持原数组不变，建议使用 concat 或展开运算符；如果需要向已有数组追加元素，则 push.apply 更高效（但会改变原数组）。

在实际项目中，优先选择可读性强的写法：[...arr1, ...arr2, ...arr3] 或 arr1.concat(arr2, arr3)。当数组数量不确定时，可以用 reduce 或 flat 的方法。

总结

JavaScript 提供了多种合并数组的方式，从传统的 concat 到现代的展开运算符，每种方法都有其适用场景。掌握这些方法可以帮助你在不同的需求下写出高效、简洁的代码。

JavaScript数组合并concat方法展开运算符ES6