JS 数组移位 vs 拼接 vs 切片 vs 解构

Question

在 js 中删除数组第一个元素的哪种方法提供了更好的性能？

假设我们有这个数组：

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

1. 转移方法

let a = fruits.shift();

2.拼接方式

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

3.切片方法

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

4. 解构方法

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

请提及这些方法中的一种比另一种更快的原因。

我在jsbench.me和perf.link中做了一些测试，但我多次运行完全相同的测试，每次我得到 180 度相反的结果。

我知道这种情况因环境和引擎而异，因此我想知道 Chrome V8 引擎中哪个更好。

Answer 1

根据我的经验， .shift() 方法是最容易使用的。 但是如果你想知道确切的代码速度，我用console.time()和console.timeEnd()测试了每个方法。

大多数情况下， .shift()方法是最快的。 你可能会问为什么？ 好吧，当其他变量被重新定义时，它不会重新声明任何变量。 您只有 on varibale，它在调用shift()方法时会自动返回。 特别是最后两个例子是最慢的。 他们重新定义了两个变量，一个被分配了两次（c，d）。 一次，只用 let ，另一次在声明时。

这是我用于测试的代码，请随时编辑。

 function speedTest(times) { for (var i = 0; i < times; i++) { console.log(i + 1); let fruits = ['Apple', 'Orange', 'Banana', 'Lemon']; console.time('shift'); let a = fruits.shift(); console.timeEnd('shift'); resetFruits(); console.time('splice'); let [b] = fruits.splice(0, 1); console.timeEnd('splice'); resetFruits(); console.time('slice'); let c; [c, fruits] = [...fruits.slice(0, 1), fruits.slice(1)]; console.timeEnd('slice'); resetFruits(); console.time('destructuring'); let d; [d, ...fruits] = fruits; console.timeEnd('destructuring'); resetFruits(); function resetFruits() { fruits = ['Apple', 'Orange', 'Banana', 'Lemon']; } } } speedTest(4);

我建议将代码段发布到您自己的代码中，因为堆栈溢出未在此代码段中显示正确的结果。

此外，不仅代码执行速度很快，而且输入 array.slice() 比输入整个解构代码更快。

我希望我能帮助你:)