Cómo recorrer una matriz en JavaScript

Los bucles se utilizan ampliamente para ejecutar una sola pieza de código una y otra vez, cada vez con un valor diferente hasta que se cumpla una condición específica. Se usan comúnmente para iterar a través de un montón de valores, calcular una suma de números, llamar repetidamente a una función y muchas otras cosas.

En este artículo, aprenderá a usar bucles de JavaScript básicos para iterar a través de los elementos de una matriz.

El JavaScript moderno proporciona diferentes tipos de bucles:

  • for — Repite un bloque de código un número determinado de veces
  • forEach() — Ejecuta la función dada para cada elemento en la matriz o NodeList
  • for...in — Recorre las propiedades de un objeto
  • for...of — Recorre los valores de un objeto iterable
  • while — Repite un bloque de código mientras la condición especificada es verdadera
  • do...while — Recorre un bloque de código hasta que se cumple una condición específica

En la siguiente sección, analizaremos cada bucle de JavaScript con un ejemplo. Comencemos con el viejo for bucle.

for Bucle

El for loop se usa para iterar sobre arreglos y NodeLists en JavaScript. Tiene la siguiente sintaxis:

for (init; condition; expr) {
    // code block to be executed
}

Como puede ver arriba, el for loop tiene tres sentencias:

  • init se ejecuta solo una vez antes de que comience la ejecución del bloque de código. Aquí es donde se define si desea recorrer todo el arreglo o comenzar a mitad de camino.
  • condition define la condición hasta que el ciclo continúa ejecutando el bloque de código. Es una especie de prueba que se verifica después de cada iteración del bucle. Si devuelve true , el bucle seguirá ejecutándose. Si devuelve false , el ciclo termina.
  • expr se ejecuta cada vez que el bloque de código completa la ejecución. Puede usar esta instrucción para incrementar o disminuir la variable del contador.

Veamos un ejemplo:

const birds = ['🐦', '🦅', '🦆', '🦉'];

// loop all birds
for (let i = 0; i < birds.length; i++) {
  console.log(birds[i]); // current value
  console.log(i); // current index
}

En el ejemplo anterior, usamos el init declaración para establecer una variable i como variable de contador. En el condition declaración, nos aseguramos de que la variable de contador sea siempre más pequeña que el número total de elementos de la matriz. Finalmente, el expr simplemente incrementa la variable del contador en 1 cada vez que el bloque de código ha terminado con la ejecución.

Dentro del cuerpo del ciclo, podemos usar la variable de contador i para acceder al elemento actual de la matriz.

forEach() Bucle

El método Array.forEach() se introdujo en ES6 y ejecuta la función especificada una vez para cada elemento de la matriz en orden ascendente.

Aquí hay un ejemplo que demuestra cómo usar forEach() para iterar a través de los elementos de la matriz en JavaScript:

const birds = ['🐦', '🦅', '🦆', '🦉'];

birds.forEach((bird, index) => {
  console.log(`${index} -> ${bird}`);
});

// 0 -> 🐦
// 1 -> 🦅
// 2 -> 🦆
// 3 -> 🦉

El index el parámetro es opcional. Puede omitirlo si no es necesario:

birds.forEach(bird => console.log(bird));

Desafortunadamente, no hay forma de terminar el forEach() bucle.

for...in Bucle

La declaración for...in itera a través de las propiedades de un objeto.

Aquí hay un ejemplo:

const person = {
    name: 'John Doe',
    email: '[email protected]',
    age: 25
};

for (const prop in person) {
    console.log(prop); // property name
    console.log(person[prop]); // property value
}

El for..in declaración no se limita sólo a los objetos, también debería funcionar para una matriz (aunque no recomendado):

const digits = [2, 3, 5];

for (const index in digits) {
  console.log(digits[index]);
}

// 2
// 3
// 5

for...of Bucle

La instrucción for...of se introdujo en ES6. Recorre los valores de objetos iterables como matrices, cadenas, mapas, conjuntos y mucho más.

Aquí hay un ejemplo:

const birds = ['🐦', '🦅', '🦉'];

// iterate over all values
for (const bird of birds) {
  console.log(`Hey ${bird}`);
}

// Hey 🐦
// Hey 🦅
// Hey 🦉

La principal diferencia entre for...in y for...of declaración es que el primero itera sobre los nombres de propiedad, mientras que el último itera sobre los valores de propiedad.

while Bucle

El while loop itera a través de un bloque de código siempre que una condición específica sea verdadera. Aquí hay un ejemplo:

const cars = ['BMW', 'Porsche', 'Audi', 'Tesla'];

let i = 0;
while (i < cars.length) {
  console.log(i); // index
  console.log(cars[i]); // value
  i++;
}

No olvides incrementar la variable contador i valor, de lo contrario el ciclo nunca terminará. Puede terminar un while bucle usando un break declaración:

while(i < cars.length) {
  // terminate if index = 2
  if(i === 2) {
    break;
  }

  // TODO: do whatever you want to here
}

Para saltar una iteración, solo use el continue declaración:

while(i < cars.length) {
  // skip 2nd iteration
  if(i === 2) {
    continue;
  }

  // TODO: do whatever you want to here
}

do...while Bucle

El do...while el bucle es similar al while círculo. La única diferencia es que el do...while loop ejecuta el bloque de código una vez y luego verifica la condición. Si es verdadero, repetirá el bloque de código mientras la condición siga siendo verdadera.

Aquí hay un ejemplo del do...while bucle:

const cars = ['BMW', 'Porsche', 'Audi', 'Tesla'];

let i = 0;
do {
  console.log(i); // index
  console.log(cars[i]); // value
  i++;
} while (i < cars.length);

Igual que while , puedes usar break y continue declaraciones para terminar el ciclo o saltar una iteración.