数组前置元素：修改原数组与克隆数组的最优方案探讨

测试环境初始化 #

// 初始化包含10万条数据的数组
let messages = Array.from({ length: 1e5 }, (_, index) => ({ text: `text for message ${index + 1}` }));

第一组：直接修改原数组的测试 #

这部分测试允许直接修改原数组，各方案性能表现如下：

方案1：展开运算符重新赋值 #

const prependMessage1 = () => {
    messages = [{ text:'test message 1' }, ...messages];
};

prependMessage1();

531 ops/s ± 4.61% | 比最优方案慢99.5%

方案2：concat方法重新赋值 #

const prependMessage2 = () => {
    messages = [{ text:'test message 2' }].concat(messages);
};

prependMessage2();

5.6K ops/s ± 1.49% | 比最优方案慢94.71%

方案3：unshift方法直接修改原数组 #

const prependMessage3 = () => {
    messages.unshift({ text: 'text message 3' })
};

prependMessage3();

105K ops/s ± 1.25% | 性能最优 ✅

方案4：反转+push+反转 #

const prependMessage4 = () => {
    messages.reverse();
    messages.push({ text: 'text message 4' });
    messages.reverse();
};

prependMessage4();

4.9K ops/s ± 1.08% | 比最优方案慢95.3%

第二组：需返回新数组的测试（状态管理器要求） #

由于项目状态管理器禁止直接修改原状态，需返回新数组，测试克隆后前置元素的方案：

方案1：克隆后用展开运算符合并 #

const prependMessage1 = () => {
    const copy = [...messages];
    messages = [{ text:'test message 1' }, ...copy];
};

prependMessage1();

472 ops/s ± 3.19% | 比最优方案慢84.57%

方案2：克隆后用concat合并 #

const prependMessage2 = () => {
    const copy = [...messages];
    messages = [{ text:'test message 2' }].concat(copy);
};

prependMessage2();

3.1K ops/s ± 1.09% | 性能最优 ✅

方案3：克隆后用unshift修改副本 #

const prependMessage3 = () => {
    const copy = [...messages];
    copy.unshift({ text: 'text message 3' })
    messages = copy;
};

prependMessage3();

2.5K ops/s ± 2.28% | 比最优方案慢19.7%

方案4：克隆后反转+push+反转 #

const prependMessage4 = () => {
    const copy = [...messages];
    copy.reverse();
    copy.push({ text: 'text message 4' });
    copy.reverse();
    messages = copy;
};

prependMessage4();

1.2K ops/s ± 1.11% | 比最优方案慢61.14%

问题解答 #

从测试结果来看，在必须返回新数组的场景下，concat确实是当前测试方案里兼顾性能和可读性的最优选择，但还有几个可以尝试的优化方向：

1. 简化concat写法
   可以用Array.of(newItem).concat(messages)替代[newItem].concat(messages)，两者性能接近，但Array.of在处理特殊类型元素时更稳定，写法也更规范。

2. 手动预分配数组空间
   如果数组规模固定且可预估，手动创建新数组并分配足够空间，再通过索引赋值的方式可能更高效：

   const prependMessage = () => {
     const newArr = new Array(messages.length + 1);
     newArr[0] = { text: 'new message' };
     for (let i = 0; i < messages.length; i++) {
       newArr[i + 1] = messages[i];
     }
     messages = newArr;
   };
   

   这种方式避免了concat内部的数组扩容操作，在超大数组场景下性能可能更优，但代码复杂度更高，需要权衡可读性和性能。

3. 替换数据结构
   数组的连续内存结构决定了前置操作必然需要移动大量元素，性能瓶颈无法彻底解决。如果你的场景需要频繁执行前置操作，可以考虑改用双向链表或专用队列结构，将前置操作的时间复杂度降到O(1)，但需要额外实现链表操作逻辑。

总结：在当前数组场景下，concat是最优选择；追求极致性能且数组规模极大时，可尝试手动预分配空间的方式；频繁前置操作则建议替换数据结构。

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