Chrome V8引擎下JS数组删除首元素的四种方法性能对比

首先给出示例数组：

let fruits = ['Apple', 'Orange', 'Banana', 'Lemon'];

在Chrome V8引擎中，四种方法的性能从优到劣排序为：shift() > 解构赋值 > splice(0,1) > slice方法实现。以下是各方法的性能差异原因：

1. shift() 方法 #

代码示例：

let a = fruits.shift();

shift()是性能最优的方案。V8引擎对该方法有针对性优化，对于常规大小的数组，它直接调整数组内部的起始索引指针，无需重新分配整个数组内存；仅当数组元素需要物理移动时（如大型数组）才会有额外开销，但在绝大多数场景下，它的执行效率最高。

2. 解构赋值方法 #

代码示例：

let d;
[d, ...fruits] = fruits;

性能仅次于shift()。V8对解构语法做了深度优化，该写法本质是提取首元素后，将剩余元素重新赋值给原数组。它的内部实现接近slice(1)但更高效，避免了额外的冗余操作，不过会创建新数组存储剩余元素，这一点和shift()修改原数组的行为不同，但性能表现十分接近。

3. splice(0, 1) 方法 #

代码示例：

let [b] = fruits.splice(0, 1);

性能略逊于前两者。splice是通用的数组增删方法，支持任意位置的操作，因此内部逻辑更复杂：需要计算操作位置、移动后续元素、返回被删除元素的数组。相比专门针对首元素删除的shift()，它存在额外的逻辑开销，导致性能下降。

4. slice方法实现 #

代码示例：

let c;
[c, fruits] = [...fruits.slice(0, 1), fruits.slice(1)]

这是性能最差的方案。该写法包含多次冗余操作：slice(0,1)和slice(1)分别创建两个临时数组，再通过扩展运算符...展开数组，最后解构赋值。多次数组创建和展开带来了大量内存分配与拷贝开销，远高于其他方法。

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