如何高效地在数组开头添加元素（兼顾性能与不可变性）-js教程-PHP中文网

如何高效地在数组开头添加元素（兼顾性能与不可变性）

本文对比了多种在 JavaScript 数组头部插入元素的方法，重点分析 concat()、扩展运算符、toSpliced() 等方案在大规模数据下的性能表现，并给出面向状态管理场景（如 Redux、Zustand）的不可变 prepend 最佳实践。

本文对比了多种在 javascript 数组头部插入元素的方法，重点分析 `concat()`、扩展运算符、`tospliced()` 等方案在大规模数据下的性能表现，并给出面向状态管理场景（如 redux、zustand）的不可变 prepend 最佳实践。

在现代前端开发中，尤其是使用不可变状态管理（如 Redux、Recoil、Zustand）时，我们常需在数组开头安全地插入新元素，同时不修改原数组——即返回一个全新数组。此时，性能与语义清晰性同样重要。基于对 10 万条消息数组的实测（Chrome 120 / Firefox 120），以下方法按综合性能与兼容性排序推荐：

✅ 首选：`Array.prototype.concat()`（最佳平衡点）

const prependMessage = (messages, newMsg) => 
  [{ text: newMsg }].concat(messages);

优势：无需手动拷贝原数组（concat 内部自动创建新数组），语法简洁，浏览器兼容性极佳（IE9+），且在 Chrome 和 Firefox 中均稳居前两名。
注意：concat() 接收任意数量参数，支持多元素前置：
```
[{ text: 'first' }, { text: 'second' }].concat(messages)
```

✅ 新标准首选（现代环境）：`Array.prototype.toSpliced()`（ECMAScript 2023）

const prependMessage = (messages, newMsg) => 
  messages.toSpliced(0, 0, { text: newMsg });

优势：专为不可变数组操作设计，语义明确（“在索引 0 处删除 0 个、插入 1 个”），Chrome 中性能略超 concat，代码可读性更高。
兼容性：需 Node.js ≥ 20.6 或现代浏览器（Chrome 114+、Firefox 115+）。生产环境建议搭配 core-js 或检查运行时支持。

⚠️ 次选（谨慎使用）：扩展运算符（`...`）

const prependMessage = (messages, newMsg) => 
  [{ text: newMsg }, ...messages];

问题：性能最差（Chrome 中比 concat 慢约 4×），尤其在大数组下存在显著内存分配开销；且 V8 引擎对其优化仍弱于 concat。
适用场景：仅限小数组（不推荐用于高频或大数据量状态更新。

❌ 应避免的方法

unshift()：直接修改原数组，违反不可变原则，禁止在状态管理中使用；
reverse() + push() + reverse()：三次遍历，时间复杂度 O(3n)，性能垫底；
Array.from() 手动映射：代码冗长，性能最差（Chrome 中慢 16× 以上）；
for 循环手动生成：虽性能尚可（Chrome 中第二），但可读性差、易出错，无必要过早优化。

实用建议与总结

默认选择 concat()：兼容性好、性能优、语义清晰，是当前最稳妥的通用方案；
渐进升级 toSpliced()：若项目已采用现代工具链（Vite、Webpack 5+），可逐步迁移至 toSpliced()，提升代码表达力；
避免微优化陷阱：除非真实性能瓶颈出现在 prepend 操作（可通过 DevTools Performance 面板验证），否则优先保障代码可维护性；
额外提示：若需频繁首尾增删，可考虑改用 Deque（如 collections-deque 库）或反转数组逻辑（后端追加 + 前端 reverse() 渲染），从根本上规避 prepend 开销。