如何在JavaScript中合并两个数组？

扩展运算符

扩展运算符 (...) 在ES6中引入，可以用于合并两个或多个数组，通过将每个数组展开到一个新数组中：

const a = [1, 2, 3];
const b = [4, 5, 6];

const merged = [...a, ...b]; // [1, 2, 3, 4, 5, 6]

Array.prototype.concat()

Array.prototype.concat() 是Array原型上的一个方法，可以用于创建一个新数组，通过将两个数组连接到一个新数组中，或者将一个数组连接到另一个数组中。这两种方法都会生成一个新数组，而不会改变原始数组：

const a = [1, 2, 3];
const b = [4, 5, 6];

const merged = [].concat(a, b); // [1, 2, 3, 4, 5, 6]
// -- 或者 --
const alsoMerged = a.concat(b); // [1, 2, 3, 4, 5, 6]

比较两种方法

展开运算符版本的代码确实更短，而且与Array.prototype.concat()的代码一样易读。除此之外，根据我进行的一些基准测试（截至2020年8月，使用Google Chrome 84），展开运算符似乎稍微更快一些（这在将来可能会发生变化，因为不同浏览器会有新的优化）。

然而，Array.prototype.concat()比展开运算符更好地处理非数组值，这可能是在合并不确定是否为数组的值时需要考虑的问题：

const a = [1, 2, 3];
const b = true;
const c = 'hi';

const spreadAb = [...a, ...b]; // 报错：b不可迭代
const spreadAc = [...a, ...c]; // [1, 2, 3, 'h', 'i']，结果错误
// 应该使用[...a, b]和[...a, c]

const concatAb = [].concat(a, b); // [1, 2, 3, true]
const concatAb = [].concat(a, c); // [1, 2, 3, 'hi']

如上面的示例所示，当传递一个非可迭代对象时，展开运算符要么抛出错误，要么输出不正确的结果。而Array.prototype.concat()则没有问题，可以接受混合输入。

那么结论是什么呢？当你知道输入是数组时，使用展开运算符（...），因为它的性能更好，而且易于阅读和理解。当你对一个或多个输入不确定，并且不想添加额外的检查时，更倾向于使用Array.prototype.concat()，因为它更优雅地处理这些情况。