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 vecesforEach()
— Ejecuta la función dada para cada elemento en la matriz o NodeListfor...in
— Recorre las propiedades de un objetofor...of
— Recorre los valores de un objeto iterablewhile
— Repite un bloque de código mientras la condición especificada es verdaderado...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 devuelvetrue
, el bucle seguirá ejecutándose. Si devuelvefalse
, 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.