JavaScript中使用concat方法对比push拼接数组的优势有哪些？

一、array1.push(...array2)的适用场景与优势 #

• 直接修改原数组：如果需要让原数组直接变为拼接后的结果（比如原数组被其他模块引用，需同步更新），这个方法无需创建新数组，省去额外变量赋值步骤。
• 灵活混合添加元素：可以在拼接数组的同时直接追加单个元素，一次操作完成多类型元素添加，无需额外调用push，示例：

  const arr1 = [1, 2];
  arr1.push(...[3, 4], 5, 6);
  // arr1 最终为 [1,2,3,4,5,6]
  

二、concat的适用场景与优势 #

• 无副作用的纯操作：不会修改任何原数组，返回全新的拼接结果数组，符合函数式编程无副作用原则，适合需要保留原数组的场景（比如原数组是不可变状态的一部分）。
• 支持多参数拼接：可同时拼接多个数组或单个值，语法更简洁，示例：

  const arr1 = [1,2];
  const arr2 = [3,4];
  const arr3 = [5,6];
  const result = arr1.concat(arr2, arr3, 7);
  // result 为 [1,2,3,4,5,6,7]
  

• 避免大数组参数溢出：当要拼接的数组非常大时，push(...bigArray)可能因超出JS引擎函数参数个数上限抛出错误，而concat无此限制，能安全处理超大数组。
• 兼容非数组参数：若传入参数不是数组，concat会自动将其作为单个元素添加到结果中，比如[1,2].concat(3)会得到[1,2,3]；而push(...3)会直接报错，因为数字不是可迭代对象。

补充：等价无副作用的push写法 #

如果想用push语法但不想修改原数组，可以先复制原数组再操作：

const arr1 = [1,2];
const arr2 = [3,4];
const result = [...arr1];
result.push(...arr2);
// 效果等价于 arr1.concat(arr2)

但这种写法在处理多参数或非数组元素时，不如concat直观。

内容的提问来源于stack exchange，提问作者Dain