JavaScript中array.push()与array=[...array,newItem]添加元素有什么区别？

核心差异 #

• 可变性不同
  array.push(item)是原地修改操作，直接在原数组末尾追加元素，不会生成新数组，执行后返回值是追加后的数组长度。如果有其他变量引用同一个原数组，所有引用都会同步感知到数组的变化：

const arr = [1,2]
const ref = arr
arr.push(3)
console.log(ref) // 输出 [1,2,3]

而array = [...array, item]是不可变操作，会先基于原数组拷贝所有元素生成一个全新的数组，再在新数组末尾追加元素，原数组本身不会被改动，只有被赋值的变量会指向新数组：

let arr = [1,2]
const ref = arr
arr = [...arr, 3]
console.log(ref) // 输出 [1,2]

• 性能表现不同
  短数组场景下两者性能差异可以忽略，当数组长度很大时，push()性能优势会非常明显：push()的时间复杂度是O(1)，仅需要在数组末尾新增一个元素；而扩展运算符写法需要遍历整个原数组做全量拷贝，时间复杂度是O(n)，数组越长额外开销越大。

选型建议 #

没有绝对的优劣，根据场景选择即可：

• 优先用push()的场景：只是单纯需要给数组追加元素，不需要保留原数组的历史状态，也没有依赖不可变特性的逻辑，用push()写法更简洁，性能也更好。
• 适合用扩展运算符写法的场景：

  1. 前端框架状态管理：比如React的state、Vue的响应式状态更新，要求状态不可变，直接原地修改数组不会触发视图更新，必须返回新数组才能触发重渲染，这种场景下不可变写法是符合框架要求的标准写法。
  2. 函数式编程/纯函数场景：要求不能修改入参，需要保证函数没有副作用，用不可变写法可以避免污染外部传入的数组参数。
  3. 需要保留历史状态的场景：比如需要实现撤销、重做、时间回溯这类功能，不可变写法可以保留每一步的数组快照，不会因为修改覆盖历史数据。

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