javascript - 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() 方法是最容易使用的。但是如果您想知道确切的代码速度，我用 performance.now() 测试了每个方法。

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

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

    function speedTest(times) {
    let shiftAvg = 0;
    let spliceAvg = 0;
    let sliceAvg = 0;
    let destructuringAvg = 0;
    let t0, t1;
    let fruits = Array(10000).fill('test');
    for (var i = 0; i < times; i++) {

        t0 = performance.now();
    
        let a = fruits.shift();
    
        t1 = performance.now();

        shiftAvg += t1 - t0;
    
        resetFruits();
        
        t0 = performance.now();
    
        let [b] = fruits.splice(0, 1);
    
        t1 = performance.now();
        spliceAvg += t1 - t0;
    
        resetFruits();
        
        t0 = performance.now();
    
        let c;
        [c, fruits] = [...fruits.slice(0, 1), fruits.slice(1)];
    
        t1 = performance.now();
        sliceAvg += t1 - t0;
    
        resetFruits();
        
        t0 = performance.now();
    
        let d;
        [d, ...fruits] = fruits;
    
        t1 = performance.now();
        destructuringAvg += t1 - t0;
    
        resetFruits();
    }
    
    shiftAvg = shiftAvg / times;
    spliceAvg = spliceAvg / times;
    sliceAvg = sliceAvg / times;
    destructuringAvg = destructuringAvg / times;

    return [
        {"avg": destructuringAvg, "approach": 'destructuring'},
        {"avg": spliceAvg, "approach": 'splice'},
        {"avg": sliceAvg, "approach": 'slice'},
        {"avg": shiftAvg, "approach": 'shift'}
    ];
    
    function resetFruits() {
        fruits = Array(10000).fill('test');
    }
}

let result = speedTest(20000).sort((a, b) => (a.avg > b.avg) ? 1 : -1);

result.map((item, index, self) => {
    if(index === 0) {
        console.log(index + 1, item.approach, item.avg, `fastest`);
    }
    else {
        console.log(index + 1, item.approach, item.avg, `${parseInt(item.avg / self[0].avg * 100 - 100)}% slower`);
    }
    
});

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

希望我能帮到你 :)