Cómo recorrer matrices de JavaScript de forma rápida y elegante

Los bucles se utilizan a menudo para iterar sobre matrices y son una fuente común de problemas de rendimiento en JavaScript. A veces, el uso incorrecto de bucles puede ralentizar seriamente el código. Por ejemplo, al iterar sobre una matriz, es natural escribir código como este:

// Código no optimizado 1

var array = ;

// for -in loop

for (var val in array) {

fn(val);

}

También existe esto común Cómo escribir:

// Código no optimizado 2

var array = ;

// for-loop

for (var i=0; i lt; array.length; i ) {

fn(array[i]);

}

Estos dos métodos se ven así Funciona bien y es semánticamente fácil de entender. Pero todos tienen problemas de rendimiento:

En "Código no optimizado 1", for-in necesita analizar cada atributo de la matriz, lo que causará una enorme sobrecarga de rendimiento, y para matrices con claves conocidas, no tiene costo. -efectivo para decir. Por lo tanto, intente no utilizar for-in, como objetos JSON, a menos que no esté seguro de qué propiedades desea procesar.

En "Código no optimizado 2", el bucle verifica el valor de array.length cada vez que se ejecuta, y la lectura de propiedades es más lenta que la lectura de variables locales, especialmente cuando la matriz está llena de elementos DOM (por ejemplo, ejemplo matriz = document.getElementByClassName = matriz.longitud).

Si su tarea es encontrar el valor de una casilla de verificación seleccionada entre 100 casillas de verificación en la página y colocarla en una matriz, puede tardar medio segundo en completarse en IE. Por lo tanto, al usuario le tomará al menos medio segundo hacer clic en enviar después de seleccionar un elemento en la lista, lo que resultará en un funcionamiento muy lento.

No podemos aceptar esta situación, por lo que necesitamos acelerar el cálculo de la condición de terminación del bucle. Al encontrar primero la longitud de la matriz y almacenarla en una variable local, el ciclo será significativamente más rápido:

// Código rápido

var array = ;

// bucle for

var longitud = array.length;

for (var i=0; i lt; longitud; i) {

fn ( array[i]);

}

Al leer el valor de array.length solo una vez, recorrer la matriz ahora es mucho más rápido.

Pero también podemos hacerlo más rápido. Si la condición de terminación del bucle no requiere una operación de comparación, el bucle será más rápido:

// Código más rápido

var array =;

// for Bucle

for (var i = array.length; i--;;) {

Esta es la primera vez que hacemos esto. ){

fn(array[i]);

}

Cambie el subíndice de la matriz para que disminuya a 0, de modo que la condición de terminación del bucle solo necesite Determine i si es 0.

Dado que el incremento y la terminación del bucle se combinan, puede escribir un bucle while más simple:

// El código más rápido y elegante

var array = ;

// bucle while

var i = matriz.