JavaScript Iteración


Ejemplo

Un tradicional for -loop

Un tradicional for bucle tiene tres componentes:

  1. La inicialización: ejecutada antes de que se ejecute el bloque look la primera vez.
  2. La condición: verifica una condición cada vez antes de que se ejecute el bloque de bucle, y abandona el bucle si es falso
  3. El pensamiento posterior: se realiza cada vez que se ejecuta el bloque de bucle

Estos tres componentes están separados unos de otros por a ; símbolo. El contenido para cada uno de estos tres componentes es opcional, lo que significa que lo siguiente es el mínimo posible for bucle:

for (;;) {
    // Do stuff
}

Por supuesto, deberá incluir un if(condition === true) { break; } o un if(condition === true) { return; } algún lugar dentro de eso for -loop para que deje de correr.

Generalmente, sin embargo, la inicialización se usa para declarar un índice, la condición se usa para comparar ese índice con un valor mínimo o máximo, y la idea posterior se usa para incrementar el índice:

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

Usando un bucle for tradicional for recorrer un array

La forma tradicional de recorrer una matriz, es esta:

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

O, si prefieres hacer un bucle hacia atrás, haz esto:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

Hay, sin embargo, muchas variaciones posibles, como por ejemplo esta:

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... o este ...

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

... o este:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

Lo que funcione mejor es en gran medida una cuestión de gusto personal y del caso de uso específico que está implementando.

Tenga en cuenta que cada una de estas variaciones es compatible con todos los navegadores, incluidos los muy antiguos.


A while bucle

Una alternativa a una for bucle es un while bucle. Para recorrer una matriz, puedes hacer esto:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Al igual tradicional for bucles, while los bucles son apoyadas por incluso el más antiguo de los navegadores.

Además, tenga en cuenta que cada bucle while puede reescribirse como un bucle for . Por ejemplo, el while aquí anteriormente bucle se comporta de la misma manera como este for -loop:

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

for...in

En JavaScript, también puedes hacer esto:

for (i in myArray) {
    console.log(myArray[i]);
}

Esto se debe utilizar con cuidado, sin embargo, ya que no se comporta igual que una tradicional for bucle en todos los casos, y hay efectos secundarios potenciales que deben tenerse en cuenta. Ver ¿Por qué es una mala idea usar "for ... in" con iteración de matriz? para más detalles.

for...of

En ES 6, el bucle for-of es la forma recomendada de iterar sobre los valores de una matriz:

6
let myArray = [1, 2, 3, 4];
for (let value of myArray) {
  let twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
}

El siguiente ejemplo muestra la diferencia entre un bucle for...of y un bucle for...in :

6
let myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Array.prototype.keys()

El método Array.prototype.keys() se puede usar para iterar sobre índices como este:

6
let myArray = [1, 2, 3, 4];
for (let i of myArray.keys()) {
  let twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

Array.prototype.forEach()

El .forEach(...) es una opción en ES 5 y superior. Es compatible con todos los navegadores modernos, así como con Internet Explorer 9 y versiones posteriores.

5
[1, 2, 3, 4].forEach(function(value, index, arr) {
  var twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
});

Comparando con el bucle for tradicional, no podemos saltar fuera del bucle en .forEach() . En este caso, use el bucle for , o use la iteración parcial que se presenta a continuación.

En todas las versiones de JavaScript, es posible iterar a través de los índices de una matriz utilizando un estilo C tradicional for bucle.

var myArray = [1, 2, 3, 4];
for(var i = 0; i < myArray.length; ++i) {
  var twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

También es posible usar while loop:

var myArray = [1, 2, 3, 4],
    i = 0, sum = 0;
while(i++ < myArray.length) {
  sum += i;
}
console.log(sum);

Array.prototype.every

Desde ES5, si desea iterar sobre una parte de una matriz, puede usar Array.prototype.every , que se repite hasta que devolvamos false :

5
// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
  console.log(value);
  return value % 2 === 0; // iterate until an odd number is found
}); 

Equivalente en cualquier versión de JavaScript:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && (arr[i] % 2 !== 0); i++) { // iterate until an odd number is found
  console.log(arr[i]);
}

Array.prototype.some

Array.prototype.some itera hasta que devolvamos true :

5
// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
  console.log(value);
  return value === 7; // iterate until we find value 7
}); 

Equivalente en cualquier versión de JavaScript:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
  console.log(arr[i]);
}

Bibliotecas

Finalmente, muchas bibliotecas de utilidades también tienen su propia variación foreach . Tres de los más populares son estos:

jQuery.each() , en jQuery :

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each() , en Underscore.js :

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach() , en Lodash.js :

_.forEach(myArray, function(value, key) {
    console.log(value);
});

Consulte también la siguiente pregunta en SO, donde gran parte de esta información se publicó originalmente: