JavaScript para ... en vs para

¿Crees que hay una gran diferencia en ... en y para bucles? ¿Qué tipo de "para" prefiere usar y por qué?

Digamos que tenemos una matriz de matrices asociativas:

var myArray = [{'key': 'value'}, {'key': 'value1'}];

Entonces podemos iterar:

for (var i = 0; i < myArray.length; i++)

Y:

for (var i in myArray)

No veo una gran diferencia. ¿Hay algún problema de rendimiento?

La elección debe basarse en qué idioma se entiende mejor.

Una matriz se itera usando:

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

Un objeto que se usa como una matriz asociativa se itera usando:

for (var key in o)
  //do stuff with o[key]

A menos que tenga razones devastadoras, manténgase en el patrón de uso establecido.

Douglas Crockford recomienda en JavaScript: The Good Parts (página 24) para evitar el uso de la for indeclaración.

Si utiliza for inpara recorrer los nombres de propiedad en un objeto, los resultados no están ordenados. Peor: puede obtener resultados inesperados; incluye miembros heredados de la cadena del prototipo y el nombre de los métodos.

Todo menos las propiedades se pueden filtrar con .hasOwnProperty. Este ejemplo de código hace lo que probablemente quería originalmente:

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

FYI - Usuarios de jQuery

El each(callback)método de jQuery usa el for( ; ; )bucle por defecto, y for( in ) solo lo usará si la longitud es undefined.

Por lo tanto, diría que es seguro asumir el orden correcto al usar esta función.

Ejemplo :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

La desventaja de usar esto es que si está haciendo alguna lógica que no sea de UI, sus funciones serán menos portables a otros marcos. La each()función probablemente esté mejor reservada para su uso con los selectores jQuery y, de lo for( ; ; )contrario, sería aconsejable.

existen diferencias de rendimiento según el tipo de bucle que use y en qué navegador.

Por ejemplo:

for (var i = myArray.length-1; i >= 0; i--)

es casi el doble de rápido en algunos navegadores que:

for (var i = 0; i < myArray.length; i++)

Sin embargo, a menos que sus matrices sean ENORMES o las repita constantemente, todas son lo suficientemente rápidas. Dudo seriamente que el bucle de matriz sea un cuello de botella en su proyecto (o para cualquier otro proyecto)

Tenga en cuenta que el método nativo Array.forEach ahora es ampliamente compatible .

Respuesta actualizada para la versión actual de 2012 de todos los principales navegadores: Chrome, Firefox, IE9, Safari y Opera admiten la matriz nativa de ES5. Para cada uno.

A menos que tenga alguna razón para admitir IE8 de forma nativa (teniendo en cuenta que se puede proporcionar ES5-shim o Chrome frame a estos usuarios, lo que proporcionará un entorno JS adecuado), es más sencillo usar la sintaxis adecuada del lenguaje:

myArray.forEach(function(item, index) {
    console.log(item, index);
});

La documentación completa de array.forEach () está en MDN.

Los dos no son lo mismo cuando la matriz es escasa.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

Usando forEach para saltear la cadena del prototipo

Solo un apéndice rápido a la respuesta de @ nailer anterior , usar forEach con Object.keys significa que puede evitar iterar sobre la cadena del prototipo sin tener que usar hasOwnProperty.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

En segundo lugar, creo que debe elegir el método de iteración según sus necesidades. Te sugeriría que en realidad nunca recorras el nativo Arraycon la for inestructura. Es mucho más lento y , como Chase Seibert señaló en este momento, no es compatible con el marco Prototype.

Hay un excelente punto de referencia en diferentes estilos de bucle que debe tener en cuenta si trabaja con JavaScript . No haga optimizaciones tempranas, pero debe mantener esas cosas en algún lugar detrás de su cabeza.

Lo usaría for inpara obtener todas las propiedades de un objeto, lo que es especialmente útil al depurar sus scripts. Por ejemplo, me gusta tener esta línea a mano cuando exploro objetos desconocidos:

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

Vuelca el contenido de todo el objeto (junto con los cuerpos de los métodos) en mi registro de Firebug. Muy manejable.

Aquí hay algo que hice.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

así es como lo usaría
, funcionará en matrices y objetos (como una lista de elementos HTML)

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

Acabo de hacer esto, así que estoy abierto a sugerencias :)

Usaría los diferentes métodos según cómo quisiera hacer referencia a los elementos.

Use foreach si solo quiere el artículo actual.

Úselo si necesita un indexador para hacer comparaciones relativas. (Es decir, ¿cómo se compara esto con el elemento anterior / siguiente?)

Nunca he notado una diferencia de rendimiento. Esperaría hasta tener un problema de rendimiento antes de preocuparme por ello.

Con for (var i en miMatriz) puede bucle sobre objetos también, que contendrá el nombre de la clave y se puede acceder a la propiedad a través de miMatriz [i] . Además, cualquier método que haya agregado al objeto también se incluirá en el bucle, es decir, si usa un marco externo como jQuery o prototype, o si agrega métodos para objetar prototipos directamente, en un punto apuntaré a Esos métodos.

¡Cuidado!

Si tiene varias etiquetas de script y está buscando información en los atributos de la etiqueta, por ejemplo, debe usar la propiedad .length con un bucle for porque no es una matriz simple sino un objeto HTMLCollection.

https://developer.mozilla.org/en/DOM/HTMLCollection

Si usa la declaración foreach para (var i en su Lista), devolverá protecciones y métodos de la colección HTMLC en la mayoría de los navegadores.

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

Incluso si getElementsByTagName devuelve una NodeList, la mayoría de los navegadores devuelven una colección HTMLC: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

For in loops on Arrays no es compatible con Prototype. Si cree que podría necesitar usar esa biblioteca en el futuro, tendría sentido atenerse a los bucles.

http://www.prototypejs.org/api/array

He visto problemas con el "para cada uno" usando objetos y prototipos y matrices

entiendo que el para cada uno es para propiedades de objetos y NO para matrices

Si realmente quieres acelerar tu código, ¿qué hay de eso?

for( var i=0,j=null; j=array[i++]; foo(j) );

es algo así como tener la lógica while dentro de la instrucción for y es menos redundante. Firefox también tiene Array.forEach y Array.filter.

Un código más corto y mejor según jsperf es

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

Use el Array (). ForEach loop para aprovechar el paralelismo

para (;;) es para matrices : [20,55,33]

for..in es para objetos : {x: 20, y: 55: z: 33}

¡¡¡Ten cuidado!!! Estoy usando Chrome 22.0 en Mac OS y tengo problemas con cada sintaxis.

No sé si esto es un problema del navegador, un problema de JavaScript o algún error en el código, pero es MUY extraño. Fuera del objeto funciona perfectamente.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

Hay una diferencia importante entre ambos. El for-in itera sobre las propiedades de un objeto, por lo que cuando el caso es una matriz, no solo iterará sobre sus elementos, sino también sobre la función "eliminar" que tiene.

for (var i = 0; i < myArray.length; i++) { 
    console.log(i) 
}

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

Podrías usar el for-in con un if(myArray.hasOwnProperty(i)). Aún así, al iterar sobre matrices, siempre prefiero evitar esto y simplemente usar la instrucción for (;;).

Aunque ambos son muy parecidos, hay una pequeña diferencia:

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

en este caso el resultado es:

NORMA PARA LAZO:

ARRAY [0] = A

ARRAY [1] = B

ARRAY [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

mientras que en este caso la salida es:

FOR-IN LOOP:

ARRAY [1] = B

ARRAY [2] = C

ARRAY [10] = D

ARRAY [ABC] = 123

La instrucción for in permite recorrer los nombres de todas las propiedades de un objeto. Desafortunadamente, también recorre todos los miembros que fueron heredados a través de la cadena de prototipos. Esto tiene el efecto secundario negativo de servir funciones de método cuando el interés está en los miembros de datos.