smart - JavaScript para… en vs para

remove html tags javascript

Question

¿Crees que hay una gran diferencia en for ... in y for loops? ¿Qué tipo de "para" prefieres usar y por qué?

Digamos que tenemos una serie de matrices asociativas:

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

Así podemos iterar:

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

Y:

for (var i in myArray)

No veo una gran diferencia. ¿Hay problemas de rendimiento?

Answer 1

FYI - jQuery Users

jQuery each(callback) método each(callback) utiliza for( ; ; ) bucle each(callback) forma predeterminada, y usará for( in ) solo si la longitud undefined está undefined .

Por lo tanto, diría que es seguro asumir el orden correcto al utilizar 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 algo de lógica no UI, sus funciones serán menos portátiles a otros marcos. La función each() es probablemente mejor reservada para el uso con los selectores jQuery y for( ; ; ) podría ser recomendable de otra manera.

Answer 2

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

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

Answer 3

¡Cuidado!

Si tiene varias etiquetas de secuencia de comandos 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 instrucción foreach para (var i en su lista), devolverá las propiedades y los 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 debería devolver una NodeList, la mayoría de los navegadores están devolviendo una HTMLCollection: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

Answer 4

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ías
esto 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 :)

Answer 5

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 la salida es:

ESTANDAR PARA LOOP:

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:

Bucle de entrada:

ARRAY [1] = B

ARRAY [2] = C

ARRAY [10] = D

ARRAY [ABC] = 123

Answer 6

Con for (var i en myArray) también puede recorrer objetos, contendré el nombre de la clave y podrá acceder a la propiedad a través de myArray [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 prototipo, o si agrega métodos para objetar prototipos directamente, en un momento lo señalaré. esos metodos

Answer 7

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

Si utiliza for in para hacer un bucle sobre los nombres de propiedades en un objeto, los resultados no se ordenan. Peor aún: puede obtener resultados inesperados; Incluye miembros heredados de la cadena de prototipos 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ías originalmente:

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

Answer 8

Existen diferencias de rendimiento según el tipo de bucle que utilice y el 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 arreglos sean GRANDES o los utilice constantemente, todos son lo suficientemente rápidos. Dudo seriamente que el bucle de matrices sea un cuello de botella en su proyecto (o para cualquier otro proyecto)

Answer 9

Hay una diferencia importante entre ambos. El for-in itera sobre las propiedades de un objeto, así 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ía usar el for-in con un if(myArray.hasOwnProperty(i)) . Sin embargo, cuando estoy iterando sobre matrices, siempre prefiero evitar esto y solo uso la instrucción for (;;).

Answer 10

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

mi entendimiento es que para cada uno es para propiedades de objetos y NO arreglos

Answer 11

La elección debe basarse en cuál idioma se entiende mejor.

Una matriz se itera utilizando:

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 para destruir la tierra, apéguese al patrón de uso establecido.

Answer 12

La instrucción for in permite recorrer en bucle los nombres de todas las propiedades de un objeto. Desafortunadamente, también pasa por todos los miembros que se heredaron a través de la cadena del prototipo. Esto tiene el efecto secundario negativo de que las funciones de los métodos están disponibles cuando el interés está en los miembros de los datos.

Answer 13

Los dos no son iguales cuando la matriz es dispersa.

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.
}

Answer 14

Para in loops en 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

Answer 15

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

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

es como tener la lógica while dentro de la sentencia for y es menos redundante. También Firefox tiene Array.forEach y Array.filter

Answer 16

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

Answer 17

Tengo una segunda opinión de que debe elegir el método de iteración de acuerdo con su necesidad. Te sugiero que en realidad nunca vuelvas a través de Array nativo con for in structure. Es mucho más lento y , como señaló Chase Seibert en este momento, no es compatible con el marco de Prototype.

Hay un excelente punto de referencia en diferentes estilos de bucle que absolutamente debería echarle un vistazo si trabaja con JavaScript . No hagas optimizaciones tempranas, pero debes mantener esas cosas en algún lugar en la parte posterior de tu cabeza.

Lo usaría for in obtener todas las propiedades de un objeto, lo cual es especialmente útil cuando se depuran sus scripts. Por ejemplo, me gusta tener esta línea a mano cuando exploro un objeto desconocido:

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) a mi registro de Firebug. Muy práctico

Answer 18

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

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

Answer 19

Usaría los diferentes métodos basados ​​en cómo quería hacer referencia a los artículos.

Utilice foreach si solo desea el elemento actual.

Use para 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.

Answer 20

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

Answer 21

Respuesta actualizada para la versión actual de 2012 de todos los principales navegadores: Chrome, Firefox, IE9, Safari y Opera son compatibles con la matriz nativa de ES5.

A menos que tenga alguna razón para admitir IE8 de forma nativa (teniendo en cuenta que ES5-Shim o Chrome Frame pueden proporcionarse a estos usuarios, lo que proporcionará un entorno JS adecuado), es más sencillo utilizar la sintaxis correcta del idioma:

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

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

Answer 22

Usando forEach para saltar la cadena del prototipo

Solo un complemento rápido a la respuesta anterior de @ nailer, usar forEach con Object.keys significa que puede evitar la iteración de 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]);
});

Answer 23

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

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