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

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

String.prototype.concat()

String.prototype.concat() 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

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]

这两种方法都会产生新的数组，而不会改变原数组。

扩展运算符

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

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

两者的比较

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

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

const mergeAb = [...a, ...b] // Error：b is not iterable
const mergeAc = [...a, ...c] // 得到 [1, 2, 3, 'H', 'e', 'l', 'l', 'o'] 错误的结果
// 你应该改用 [...a, b] 和 [...a, c]

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

如上面所看到的，当传递不可迭代对象时，扩展运算符要么抛出错误，要么不输出正确的结果。而 String.prototype.concat 则不会出现这样的问题。

如何选择？

只要知道输入是数组，就使用扩展运算符（...），因为它的性能更好，而且易于阅读和理解。

当您对一个或多个输入不确定且不想添加额外的检查时，请使用 String.prototype.concat()，因为它可以更优雅地处理这些情况。

更多选择

• 使用循环
• 利用 apply() 方法的第二个参数可以传递一个数组的特性
• 使用时，需要注意数组的大小，将小数组合并到大数组上可以减少数组的操作次数，提高代码执行效率