2454 votos

¿Como iterar una matriz con for each en JavaScript?

Tengo un array de un número variable de objetos. En cierto punto, quiero hacer algo a todos los objetos de esa matriz.

¿Cómo puedo hacer esto con Javascript?

Pensé en algo como esto: forEach(instance in objects) (donde objects es mi matriz de objetos), pero esto no parece ser correcto en JavaScript...

368voto

PatrikAkerstrand Puntos 23968

La manera estándar para recorrer un array en JavaScript es una de vainilla for-loop:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element i.
}

Nota, sin embargo, que este enfoque sólo es bueno si usted tiene una densa matriz, y cada índice está ocupado por un elemento. Si la matriz es dispersa, a continuación, puede ejecutar en problemas de rendimiento con este enfoque, ya que tendrá que recorrer una gran cantidad de índices que no se realmente existen en la matriz. En este caso, un for .. in-bucle podría ser una mejor idea. Sin embargo, usted debe utilizar los mecanismos de seguridad apropiados para asegurar que sólo las propiedades deseadas de la matriz (es decir, los elementos de la matriz) son graves, ya que el for..in-bucle también se enumeran en el legado de los navegadores, o si las propiedades adicionales se definen como enumerable.

En ECMAScript 5 no será un método forEach en la matriz de prototipo, pero no es compatible con navegadores antiguos. Por lo que para poder usarla de forma coherente debe tener un ambiente en el que la soporta (por ejemplo, Node.js para server side JavaScript), o el uso de un "Relleno". El Relleno para que esta funcionalidad es, sin embargo, trivial y dado que hace el código más fácil de leer, es un buen relleno para incluir.

163voto

Poonam Puntos 2588

Si usted está utilizando jQuery, puede utilizar jQuery.each :

$.each(yourArray, function(index, value) {
  // do your stuff here
});

EDIT: Como en la pregunta el usuario quiere código en javascript en lugar de jQuery:

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

51voto

zzzzBov Puntos 62084

Algunos C-estilo de idiomas de uso foreach bucle a través de las enumeraciones. En JavaScript esto se hace con el for..in estructura de bucle:

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Hay una trampa. for..in bucle a través de cada uno de los objetos del enumerable miembros, y los miembros de su prototipo. Para evitar la lectura de los valores que se heredan a través del objeto prototipo, basta con comprobar si la propiedad pertenece a el objeto de:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

Además, ECMAScript 5 ha añadido un forEach método para Array.prototype que puede ser utilizado para enumerar más de una matriz mediante un calback (el relleno está en el docs, por lo que aún puede utilizar para navegadores antiguos):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Es importante tener en cuenta que Array.prototype.forEach no se rompa cuando la devolución de llamada devuelve false. jQuery y Underscore.js de proveer a sus propias variaciones en each a proporcionar los bucles que pueden ser de corto-circuito.

45voto

joeytwiddle Puntos 3226

Bucle hacia atrás

Creo que el reverso for bucle merece una mención:

for (var i=array.length; i--; ) {
     // process array[i]
}

Ventajas:

  • No es necesario declarar un temporal len variable, o comparar contra array.length en cada iteración, cualquiera de los cuales podría ser un minuto de optimización.
  • La eliminación de los hermanos de la DOM en orden inverso, es generalmente más eficiente. (El navegador tiene que hacer menos cambios de elementos en su interior matrices.)
  • Si usted modificar la matriz, mientras que el bucle, durante o después de índice i (por ejemplo, quitar o insertar un elemento en array[i]), un avance de bucle iba a saltar el elemento que se desplaza a la izquierda en la posición i, o volver a procesar las ith elemento que se desplaza a la derecha. En tales situaciones, usted puede actualizar i a punto para la opción "siguiente" de que las necesidades de procesamiento, sino, simplemente, invertir la dirección de la iteración es a menudo una solución más elegante.
  • Es más corto que el de muchas de las otras opciones disponibles. (Aunque pierde a forEach() y ES6 del for ... of.)

Desventajas:

  • Se procesa los elementos en orden inverso. Si se está creando una nueva matriz a partir de los resultados, o la impresión de las cosas en la pantalla, naturalmente, el resultado sería invertida respecto a la orden original.
  • En repetidas ocasiones la inserción de los hermanos en el DOM como un primer hijo para conservar el orden es no más eficientes. (El navegador mantener a tener que cambiar las cosas a la derecha). Para crear nodos DOM eficientemente y en el orden, sólo loop hacia delante y anexar como normal (y también el uso de un "fragmento de documento").
  • El reverso de bucle confunde junior desarrolladores. (Usted puede considerar que una ventaja, dependiendo de su perspectiva.)

Sé que algunos de los desarrolladores utilizar el reverso for bucle de forma predeterminada, a menos que exista una buena razón para loop hacia delante.

A pesar de las mejoras de rendimiento son probablemente insignificante, que es una especie de gritos de "Solo tienes que hacer esto para cada elemento en la lista, no me importa el orden!". (Aunque es indistinguible de esas ocasiones cuando usted haga de atención acerca de la orden, y realmente ¿ desea bucle en reverso).


¿Cómo funciona?

Usted notará que i-- es la media de la cláusula, y la última cláusula (donde están acostumbrados a ver i++) está vacía. Eso significa que i-- también se utiliza como condición para la continuidad. Se ejecuta y comprueba antes de cada iteración.

  • ¿Cómo puede comenzar en array.length sin que explote?

    Porque i-- ejecuta antes de cada iteración, en la primera iteración vamos a ser realmente acceder al artículo en array.length-1 que evita problemas con la Matriz-out-of-bounds undefined elementos.

  • ¿Por qué no dejar de recorrer antes de índice de 0?

    El bucle se detendrá la iteración, cuando la condición i-- evalúa a un falsey valor (cuando el resultado es 0).

    El truco es que, a diferencia --i, el trailing i-- operador decrementos i pero se obtiene el valor antes de que el decremento. La consola se puede demostrar esto:

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    Así que en la final de la iteración, i fue previamente 1 y a las i-- cambios en la expresión de a 0 pero en realidad los rendimientos 1 (truthy), y por lo tanto la condición pasa. En la siguiente iteración i-- sets i a -1 , pero los rendimientos 0 (falsey), causando que el bucle se termina inmediatamente.

    En el tradicional adelante en el bucle, i++ y ++i son intercambiables (como Douglas Crockford puntos). Sin embargo, en el reverso de bucle, porque nuestro decrementor es también nuestra expresión de condición, debemos cumplir con i-- si queremos procesar el elemento en el índice 0.


Trivia

Algunas personas les gusta poner un poco de flecha en el reverso for de bucle, y termina con un guiño:

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

Crédito a WYL para, finalmente, la conversión de mí.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X