¿Qué enfoque para eliminar el primer elemento de una matriz en js proporciona un mejor rendimiento?
Supongamos que tenemos esta matriz:
let fruits = ['Apple', 'Orange', 'Banana', 'Lemon'];1. cambio de enfoque
let a = fruits.shift();2. enfoque de empalme
let [b] = fruits.splice(0, 1);3. enfoque de corte
let c; [c, fruits] = [...fruits.slice(0, 1), fruits.slice(1)]4. Enfoque de desestructuración
let d; [d, ...fruits] = fruits;Mencione las razones por las que uno de estos enfoques es más rápido que otro.
Hice algunas pruebas en jsbench.me y perf.link pero realicé exactamente las mismas pruebas varias veces y cada vez obtuve resultados opuestos de 180 grados.
Sé que estas cosas son diferentes de un entorno y motor a otro, así que quiero saber cuál es mejor en el motor Chrome V8.
En mi experiencia, el método .shift() es el más fácil de usar. Pero si desea conocer la velocidad exacta del código, probé todos los métodos con console.time() y console.timeEnd() .
Principalmente, el método .shift() es el más rápido. Usted puede preguntar por qué? Bueno, no vuelve a declarar ninguna variable ya que las otras se redefinen. Solo tiene en varibale, que se devuelve automáticamente al llamar al método shift() . Especialmente los dos últimos ejemplos son los más lentos. Están redefiniendo dos variables, a una se le asignan dos tiempos (c, d). Una vez, solo con let y la otra vez al declarar.
Aquí está el código que usé para probar, siéntete libre de editarlo.
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);Recomiendo publicar el fragmento en su propio código, ya que el desbordamiento de pila no muestra resultados correctos en este fragmento.
Además, no solo la velocidad de ejecución del código es rápida, sino que escribir array.slice() es más rápido que, por ejemplo, escribir todo el código de desestructuración.
Espero haberte podido ayudar :)