over - ¿Cuál es la mejor manera de hacer bucles en JavaScript?

javascript json iterate key value

Question

Me he tropezado con varios métodos de bucle en JavaScript, lo que más me gusta es:

for(var i = 0; i < a.length; i++){
    var element = a[i];
}

Pero tal como se probó aquí ( http://www.robertnyman.com/2008/04/11/javascript-loop-performance/ ), probablemente debería escribirse de modo que la longitud solo se calcule una vez.

En jQuery hay un .each que puedes pegar una función. Me gusta un poco mejor, porque no tengo que escribir la matriz dos veces, como en la solución anterior.

Si Macros soportadas por JavaScript sería un pan comido hacer su propio, lamentablemente no es así.

Entonces, ¿qué usan ustedes?

Answer 1

Empecé a usar iteradores donde sea relevante. El rendimiento es razonable, pero lo más importante es que le permite encapsular la lógica de bucle:

function createIterator(x) {
    var i = 0;

     return function(){
       return x[i++];
    };
}

Entonces para usar:

var iterator=createIterator([''a'',''b'',''c'',''d'',''e'',''f'',''g'']);

iterator();

devuelve "a";

iterator();

devuelve "b";

y así.

Para repetir la lista completa y mostrar cada elemento:

var current; while(current=iterator()) { console.log(current); }

Tenga en cuenta que lo anterior solo es aceptable para iterar una lista que contiene valores "no falsos". Si esta matriz contiene alguno de:

• 0
• falso
• ""
• nulo
• Yaya

el ciclo anterior se detendría en ese elemento, no siempre lo que desea / espera.

Para evitar este uso:

var current;

while((current=iterator())!==undefined)
{
   console.log(current);
}

Answer 2

Entonces, primero identificas el ciclo de Javascript perfecto, creo que debería verse así:

ary.each (function () {$ arguments [0]). remove ();})

Esto puede requerir la biblioteca prototype.js.

A continuación, obtiene disgustet con la parte de argumentos [0] y hace que el código se genere automáticamente desde su marco de servidor. Esto funciona solo si la escalera es Seaside.

Ahora, tienes lo anterior generado por:

ary do: [: cada | cada elemento eliminar].

Esto viene completo con la finalización de la sintaxis y se traduce exactamente al javascript anterior. Y hará girar la cabeza a la gente que no haya utilizado antes la integración del prototipo de Seaside, mientras leen tu código. Seguro que te hace sentir genial también. Sin mencionar la ganancia en geekiness que puedes obtener aquí. ¡A las chicas les encanta!

Answer 3

No veo cuál es el problema con el uso de un estándar para el bucle (;;). Una pequeña prueba

var x;
var a = [];
// filling array
var t0 = new Date().getTime();
for( var i = 0; i < 100000; i++ ) {
    a[i] = Math.floor( Math.random()*100000 );
}

// normal loop
var t1 = new Date().getTime();
for( var i = 0; i < 100000; i++ ) {
    x = a[i];
}

// using length
var t2 = new Date().getTime();
for( var i = 0; i < a.length; i++ ) {
    x = a[i];
}

// storing length (pollution - we now have a global l as well as an i )
var t3 = new Date().getTime();
for( var i = 0, l = a.length; i < l; i++ ) {
    x = a[i];
}

// for in
var t4 = new Date().getTime();
for( var i in a ) {
    x = a[i];
}

// checked for in
var t5 = new Date().getTime();
for( var i in a ) {
    if (a.hasOwnProperty(i)) {
        x = a[i];
    }
}

var t6 = new Date().getTime();
var msg = ''filling array: ''+(t1-t0)+''ms/n''+
          ''normal loop: ''+(t2-t1)+''ms/n''+
          ''using length: ''+(t3-t2)+''ms/n''+
          ''storing length: ''+(t4-t3)+''ms/n''+
          ''for in: ''+(t5-t4)+''ms/n''+
          ''checked for in: ''+(t6-t5)+''ms'';
console.log( msg );

resultados en:

filling array: 227ms
normal loop: 21ms
using length: 26ms
storing length: 24ms 
for in: 154ms
checked for in: 176ms

Por lo tanto: para que la toma sea la más larga, usar la propiedad de longitud (que es una propiedad y no necesita calcularse) es casi tan rápido como almacenarla primero, lo cual es solo un poco más lento que usar un número entero.
AND a for () es la forma habitual de recorrer una matriz, que todos esperan y entienden.

Todos ellos agregan una variable al ámbito en el que se ejecutan - i - que es un nombre común para este uso y, por lo tanto, no se debe usar para otras cosas. Almacenar la longitud primero agrega otra var - l - al alcance, que es innecesario

Answer 4

Pequeña mejora al original, para calcular solo el tamaño de la matriz una vez:

for(var i = 0, len = a.length; i < len; i++){ var element = a[i]; }

Además, veo mucho por ... vueltas. Sin embargo, tenga en cuenta que técnicamente no es kosher y que causará problemas específicamente con Prototype:

for (i in a) { var element = a[i]; }

Answer 5

Sé que llego tarde a la fiesta, pero uso ciclos inversos para bucles que no dependen del orden.

Muy similar a @Mr. Muskrat''s - pero simplificando la prueba:

var i = a.length, element = null;
while (i--) {
  element = a[i];
}

Answer 6

Si tiene muchos elementos en la matriz y la velocidad es un problema, entonces desea usar un ciclo while que itere de mayor a menor.

  var i = a.length;
  while( --i >= 0 ) {
    var element = a[i];
    // do stuff with element
  }  

Answer 7

Siempre puedes usar un ciclo while y calcular el límite de la matriz antes de la mano.

Var max = a.length-1;
var i = 0;

while(i <= max)
{
var element = a[i];
i++;
}

Answer 8

Simplemente almacena la longitud en una variable primero.

  var len = a.length;
  for (var i = 0; i < len; i++) {
    var element = a[i];
  }

Answer 9

Yo no lo uso, pero uno de mis colegas usa este estilo:

var myArray = [1,2,3,4];
for (var i = 0, item; item = myArray[i]; ++i) {
    alert(item);
}

al igual que la respuesta de Ash, esto afectará a los problemas si tienes valores "falsey" en tu matriz. Para evitar ese problema, cámbielo a (item = myArray[i]) != undefined