Bucle de JavaScript a través de un array

1. Utilice el bucle for para recorrer un array en JavaScript
2. Utilice el bucle while para recorrer un array en JavaScript
3. Utilice el bucle do...while para recorrer un array en JavaScript
4. Utilice el bucle forEach para recorrer un array en JavaScript
5. Utilice for...of para recorrer un array en JavaScript
6. Utilice for...in para recorrer un array en JavaScript
7. Utilice el método map para recorrer un array en JavaScript
8. Utilice el método reduce para recorrer un array en JavaScript
9. Utilice el método filter para recorrer un array en JavaScript
10. Utilice some para recorrer un array en JavaScript
11. Utilice every para recorrer un array en JavaScript

Este tutorial explica cómo recorrer un array en JavaScript. Podemos hacer esto usando métodos tradicionales en Vanilla JavaScript como el bucle for y el bucle while o usando los métodos más nuevos introducidos por ES5, ES6 como forEach, for ... of, for ... in , y muchos otros métodos dependiendo de nuestro caso de uso y la velocidad/eficiencia del código.

Utilice el bucle for para recorrer un array en JavaScript

El bucle tradicional for es similar al bucle for en otros lenguajes como C++, Java, etc. Tiene 3 partes:

1. La inicialización de variables/iteradores se ejecuta antes de la ejecución del bucle for.
2. La condición a verificar cada vez que se ejecute el bucle.
3. El paso a realizar cada vez después de la ejecución del bucle.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
for (var i = 0; i < length; i++) {
  console.log(arr[i]);
}

Producción :

1
2
3
4
5
6

Tomamos un iterador i y recorremos el array utilizando un bucle for que incrementa i en 1 después de cada iteración y lo mueve al elemento next.

Utilice el bucle while para recorrer un array en JavaScript

El bucle while es muy simple porque tiene una condición que verifica después de cada iteración, y a menos que se cumpla esta condición, sigue ejecutándose.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
let i = 0;

while (i < length) {
  console.log(arr[i]);
  i++;
}

Al igual que el bucle for, tomamos el iterador i y lo incrementamos hasta la longitud del array para recorrer todos los elementos.

Utilice el bucle do...while para recorrer un array en JavaScript

El bucle do...while es el mismo que el bucle while excepto por el hecho de que se ejecuta al menos una vez incluso si la condición del bucle es falsa. Por lo tanto, debemos tener cuidado al escribir este bucle.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
var i = 0;

do {
  console.log(arr[i]);
  i++;
} while (i < length);

Utilice el bucle forEach para recorrer un array en JavaScript

ES5 introdujo forEach como una nueva forma de iterar sobre matrices. forEach toma una función como argumento y la llama para cada elemento presente dentro del array.

const arr = [1, 2, 3, 4, 5, 6];
arr.forEach(item => console.log(item));

Aquí, hemos escrito una función de flecha para imprimir el argumento pasado a la función y le hemos dado esa función a forEach para iterar sobre el array e imprimir ese elemento.

Utilice for...of para recorrer un array en JavaScript

ES6 introdujo el concepto de objetos iterables y proporcionó for ... of que se puede utilizar para iterar objetos Array.

let arr = [1, 2, 3, 4, 5, 6];
for (const item of arr) {
  console.log(item);
}

Lo usamos como un bucle normal, pero iteramos fácilmente una amplia gama de objetos y no solo matrices.

Utilice for...in para recorrer un array en JavaScript

Podemos iterar matrices usando for ... in, pero no se recomienda porque enumera las propiedades del objeto. Enumera incluso los métodos adjuntos a Array.prototype además de los elementos del array.

var arr = [1, 2, 3, 4, 5, 6];

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

Utilice el método map para recorrer un array en JavaScript

El método map recorre el array, usa la función de devolución de llamada en cada elemento y devuelve una nueva matriz, es decir, toma la entrada de un array y la asigna a una nueva matriz con cálculos realizados por la función de devolución de llamada.

arr = [1, 2, 3, 4, 5, 6];
const square = (x) => {
  return Math.pow(x, 2);
} mapped = arr.map(square);
console.log(arr);
console.log(mapped);

Aquí iteramos sobre el array de entrada y formamos un array con cuadrados de elementos dentro del array.

Utilice el método reduce para recorrer un array en JavaScript

El método reduce recorre el array y llama a la función reducer para almacenar el valor del cálculo del array mediante la función de un acumulador. Un acumulador es una variable que se recuerda a lo largo de todas las iteraciones para almacenar los resultados acumulados de recorrer un array.

const arr = [1, 2, 3, 4];
const reducer = (accumulator, curr) => accumulator + curr;
console.log(arr.reduce(reducer));

Aquí recorremos el array y sumamos todos los elementos dentro de un acumulador.

Utilice el método filter para recorrer un array en JavaScript

Los métodos filter recorren el array y filtran los elementos que satisfacen una condición dada específica.

const fruits =
    ['apple', 'orange', 'pomegranete', 'banana', 'pear', 'blueberry'];
const result = fruits.filter(word => word.length > 6);
console.log(result);

Aquí recorremos el array y verificamos si la longitud del nombre de la fruta dada es mayor que 6. Si es así, la incluimos en nuestra matriz de resultados, es decir, filtramos los elementos requeridos.

Utilice some para recorrer un array en JavaScript

Se usa para recorrer el array y verificar si una condición dada es satisfecha por al menos uno de los elementos presentes dentro del array.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.some(under_three));

Aquí usamos some para comprobar si hay algún elemento presente dentro del array que sea menor que 3. Devuelve un valor booleano true o false.

Utilice every para recorrer un array en JavaScript

Se usa para recorrer el array y verificar si una condición dada es satisfecha por todos los elementos dentro de un array.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.every(under_three));

Aquí usamos every para comprobar si todos los elementos presentes dentro del array son menores que 3 o no. Devuelve un valor booleano true o false.