La iteración de arrays es un concepto fundamental en JavaScript que permite a los desarrolladores recorrer y manipular elementos dentro de un array. JavaScript ofrece diversos métodos para iterar sobre arrays, desde bucles tradicionales (while, do...while, for, for...in, for...of) hasta métodos modernos de arrays (forEach, map, filter, reduce, reduceRight). Cada método es adecuado para tareas diferentes, como filtrar, transformar o reducir datos. Los métodos avanzados como flatMap, Array.from, keys, entries y el operador spread ofrecen flexibilidad y funcionalidad adicionales. Dominar estas técnicas permite a los desarrolladores escribir código conciso, eficiente y expresivo para gestionar arrays, algo esencial para crear aplicaciones JavaScript sólidas. Comprender estos métodos también garantiza la compatibilidad con los navegadores modernos, lo que los hace prácticos para el desarrollo web actual.
Puntos clave: JavaScript ofrece diversos métodos para la iteración de arrays, incluidos los bucles tradicionales (while, do...while, for, for...in, for...of) y los métodos modernos de arrays (forEach, map, filter, reduce, reduceRight). Cada método tiene características únicas adecuadas para distintos casos de uso, desde iteraciones simples hasta transformaciones complejas. Dominar estas técnicas permite a los desarrolladores escribir código eficiente y expresivo para manipular arrays, algo esencial para crear potentes aplicaciones JavaScript. La mayoría de los métodos son compatibles con los navegadores modernos, lo que garantiza una amplia compatibilidad.
Escriba código aunque sea principiante con el asistente de IA de Latenode
¿Qué son los bucles en JavaScript?
Los bucles en JavaScript son estructuras de control que permiten a los desarrolladores ejecutar repetidamente un bloque de código hasta que se cumpla una condición específica. Proporcionan una forma de automatizar tareas repetitivas y procesar arrays o colecciones de datos de manera eficiente. JavaScript ofrece varios tipos de bucles, incluidos while, do...while, for, for...in y for...of, cada uno con su propia sintaxis y casos de uso.
Cómo recorrer un array con un bucle while en JavaScript
El bucle while para recorrer un array de objetos en JavaScript ejecuta un bloque de código mientras una condición especificada se evalúe como verdadera. Es un bucle versátil que se puede utilizar para iterar sobre arrays mediante la gestión manual de la variable de índice. A continuación, se muestra un ejemplo de cómo usar un bucle while para iterar sobre un array:
const numbers = [1, 2, 3, 4, 5];
let i = 0;
while (i < numbers.length) {
console.log(numbers[i]);
i++;
}
En este ejemplo, el bucle while continúa ejecutándose mientras el índice i sea menor que la longitud del array numbers. El bucle imprime cada elemento en la consola e incrementa la variable de índice.
Cómo recorrer un array con un bucle do...while en JavaScript
El bucle do...while es similar al bucle while, pero garantiza que el bloque de código se ejecute al menos una vez antes de comprobar la condición. A continuación, se muestra un ejemplo de cómo usar un bucle do...while para arrays en JavaScript:
const fruits = ['apple', 'banana', 'orange'];
let i = 0;
do {
console.log(fruits[i]);
i++;
} while (i < fruits.length);
En este caso, el bucle imprime cada fruta en la consola e incrementa la variable de índice. El bucle continúa hasta que la condición i < fruits.length se evalúa como falsa.
Cómo recorrer un array con un bucle for en JavaScript
El bucle for es una estructura de bucle compacta y utilizada habitualmente en JavaScript. Combina las expresiones de inicialización, condición e incremento/decremento en una sola línea. A continuación, se muestra un ejemplo de cómo usar un bucle for para iterar sobre un array:
const colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
El bucle for inicializa la variable de índice i en 0, comprueba la condición i < colors.length e incrementa i después de cada iteración. El bucle imprime cada color en la consola.
Cómo recorrer un array con un bucle for...in en JavaScript
El bucle for...in se utiliza para iterar sobre las propiedades de un objeto. Cuando se usa con arrays, itera sobre los índices del array. A continuación, se muestra un ejemplo:
const persons = ['Alice', 'Bob', 'Charlie'];
for (let index in persons) {
console.log(index + ': ' + persons[index]);
}
En este ejemplo, el bucle for...in itera sobre los índices del array persons. Imprime cada índice y su valor correspondiente en la consola.
Cómo recorrer un array con un bucle for...of en JavaScript
El bucle for...of, introducido en ECMAScript 2015 (ES6), proporciona una forma más concisa y legible de iterar sobre objetos iterables, incluidos los arrays. Accede directamente a los valores del array sin necesidad de una variable de índice. A continuación, se muestra un ejemplo:
JavaScript
const numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
console.log(number);
}
En este caso, el bucle for...of itera sobre cada elemento del array numbers y lo asigna a la variable number. El bucle imprime cada número en la consola.
Cómo recorrer un array con un bucle forEach en JavaScript
El método forEach() es un método integrado de arrays que ejecuta una función proporcionada una vez por cada elemento del array. Ofrece un enfoque más expresivo y funcional para la iteración de arrays. A continuación, se muestra un ejemplo:
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach((fruit) => {
console.log(fruit);
});
En este ejemplo, se llama al método forEach() en el array fruits. Recibe una función flecha como argumento, que recibe cada fruta como parámetro y la imprime en la consola.
Otros métodos de iteración de arrays
JavaScript proporciona varios otros métodos de iteración de arrays que ofrecen potentes capacidades para manipular y transformar arrays. Estos métodos incluyen:
- map(): Crea un nuevo array llamando a una función proporcionada para cada elemento del array.
- filter(): Crea un nuevo array con todos los elementos que superan la prueba implementada por la función proporcionada.
- reduce(): Ejecuta una función reductora sobre cada elemento del array y produce un único valor de salida.
- every(): Comprueba si todos los elementos del array superan la prueba implementada por la función proporcionada.
- some(): Comprueba si al menos un elemento del array supera la prueba implementada por la función proporcionada.
Exploraremos estos métodos con más detalle en las siguientes secciones.
Array forEach() de JavaScript
El método forEach() ejecuta una función proporcionada una vez por cada elemento del array. No devuelve un nuevo array, pero permite realizar una acción sobre cada elemento. A continuación, se muestran un par de ejemplos:
Ejemplo 1
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number);
});
En este ejemplo, el método forEach() se utiliza para imprimir cada número del array numbers en la consola.
Ejemplo 2
const fruits = ['apple', 'banana', 'orange'];
const upperCaseFruits = [];
fruits.forEach((fruit) => {
upperCaseFruits.push(fruit.toUpperCase());
});
console.log(upperCaseFruits);
En este ejemplo, el método forEach() se utiliza para convertir cada fruta del array fruits a mayúsculas e incorporarla a un nuevo array upperCaseFruits.
Array map() de JavaScript
El método map() crea un nuevo array llamando a una función proporcionada para cada elemento del array. Devuelve un nuevo array con los resultados de la llamada a la función para cada elemento. A continuación, se muestran un par de ejemplos:
Ejemplo 1
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => {
return number ** 2;
});
console.log(squaredNumbers);
En este ejemplo, el método map() se utiliza para crear un nuevo array squaredNumbers elevando al cuadrado cada número del array numbers.
Ejemplo 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const names = persons.map((person) => {
return person.name;
});
console.log(names);
En este ejemplo, el método map() se utiliza para extraer la propiedad name de cada objeto del array persons y crear un nuevo array names que contiene únicamente los nombres.
Array filter() de JavaScript
El método filter() crea un nuevo array con todos los elementos que superan la prueba implementada por la función proporcionada. Devuelve un nuevo array que contiene los elementos que cumplen la condición. A continuación, se muestran un par de ejemplos:
Ejemplo 1
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
return number % 2 === 0;
});
console.log(evenNumbers);
En este ejemplo, el método filter() se utiliza para crear un nuevo array evenNumbers filtrando el array numbers para incluir únicamente números pares.
Ejemplo 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const adultPersons = persons.filter((person) => {
return person.age >= 18;
});
console.log(adultPersons);
En este ejemplo, el método filter() se utiliza para crear un nuevo array adultPersons filtrando el array persons para incluir únicamente personas de 18 años o más.
Array reduce() de JavaScript
El método reduce() ejecuta una función reductora sobre cada elemento del array y produce un único valor de salida. Recibe un acumulador y el elemento actual como argumentos, y devuelve el acumulador para la siguiente iteración. A continuación, se muestran algunos ejemplos:
Ejemplo 1
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum);
En este ejemplo, el método reduce() se utiliza para calcular la suma de todos los números del array numbers. El valor inicial del acumulador se establece en 0.
Ejemplo 2
const words = ['Hello', 'World', 'JavaScript'];
const sentence = words.reduce((accumulator, currentValue) => {
return accumulator + ' ' + currentValue;
});
console.log(sentence);
En este ejemplo, el método reduce() se utiliza para concatenar todas las palabras del array words en una sola frase. El acumulador se inicializa con una cadena vacía.
Ejemplo 3
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const totalAge = persons.reduce((accumulator, person) => {
return accumulator + person.age;
}, 0);
console.log(totalAge);
En este ejemplo, el método reduce() se utiliza para calcular la edad total de todas las personas del array persons. El acumulador se inicializa en 0.
Array reduceRight() de JavaScript
El método reduceRight() es similar al método reduce(), pero ejecuta la función reductora de derecha a izquierda (desde el último elemento hasta el primero). A continuación, se muestran un par de ejemplos:
Ejemplo 1
const numbers = [1, 2, 3, 4, 5];
const reversedSum = numbers.reduceRight((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(reversedSum);
En este ejemplo, el método reduceRight() se utiliza para calcular la suma de todos los números del array numbers, comenzando por el último elemento y avanzando hacia el primero.
Ejemplo 2
const words = ['Hello', 'World', 'JavaScript'];
const reversedSentence = words.reduceRight((accumulator, currentValue) => {
return accumulator + ' ' + currentValue;
});
console.log(reversedSentence);
En este ejemplo, el método reduceRight() se utiliza para concatenar todas las palabras del array words en una sola frase, comenzando por la última palabra y avanzando hacia la primera.
Array every() de JavaScript
El método every() comprueba si todos los elementos del array superan la prueba implementada por la función proporcionada. Devuelve true si la función devuelve true para todos los elementos; de lo contrario, devuelve false. A continuación, se muestran un par de ejemplos:
Ejemplo 1
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every((number) => {
return number % 2 === 0;
});
console.log(allEven);
En este ejemplo, el método every() se utiliza para comprobar si todos los números del array numbers son pares. Devuelve true, ya que todos los números cumplen la condición.
Ejemplo 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const allAdults = persons.every((person) => {
return person.age >= 18;
});
console.log(allAdults);
En este ejemplo, el método every() se utiliza para comprobar si todas las personas del array persons son adultas (edad mayor o igual a 18). Devuelve true, ya que todas las personas cumplen la condición.
Array some() de JavaScript
El método some() comprueba si al menos un elemento del array supera la prueba implementada por la función proporcionada. Devuelve true si la función devuelve true para al menos un elemento; de lo contrario, devuelve false. A continuación, se muestra un ejemplo:
Ejemplo
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => {
return number % 2 === 0;
});
console.log(hasEvenNumber);
En este ejemplo, el método some() se utiliza para comprobar si hay al menos un número par en el array numbers. Devuelve true, ya que el array contiene números pares.
Métodos avanzados de iteración de arrays
JavaScript proporciona métodos adicionales de iteración de arrays que ofrecen funcionalidades más avanzadas. Estos métodos incluyen:
- flatMap(): Crea un nuevo array aplicando una función a cada elemento y aplanando después el resultado.
- from(): Crea un nuevo array a partir de un objeto similar a un array o iterable.
- keys(): Devuelve un nuevo objeto Array Iterator que contiene las claves de cada índice del array.
- entries(): Devuelve un nuevo objeto Array Iterator que contiene pares clave-valor de cada índice del array.
- with(): Devuelve un nuevo array con un elemento especificado reemplazado por un nuevo elemento. (Introducido en ES2023)
Exploremos estos métodos con más detalle.
Array flatMap() de JavaScript
El método flatMap() primero mapea cada elemento de un array mediante una función de mapeo y, después, aplana el resultado en un nuevo array. Combina la funcionalidad de map() y flat() en un único método. A continuación, se muestra un ejemplo:
Ejemplo
const numbers = [1, 2, 3, 4, 5];
const mappedAndFlattened = numbers.flatMap((number) => {
return [number, number * 2];
});
console.log(mappedAndFlattened);
En este ejemplo, el método flatMap() se utiliza para mapear cada número del array numbers a un array que contiene el número y su doble, y después aplanar los arrays resultantes en un único array.
Compatibilidad con navegadores
El método flatMap() es compatible con los navegadores modernos, incluidos Chrome 69+, Edge 79+, Firefox 62+, Safari 12+ y Opera 56+.
Array from() de JavaScript
El método Array.from() crea un nuevo array a partir de un objeto similar a un array o iterable. Permite convertir en un array objetos que tienen una propiedad length y elementos indexados. A continuación, se muestra un ejemplo:
Ejemplo
Ejemplo de array en JavaScript:
const arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
const array = Array.from(arrayLike);
console.log(array);
En este ejemplo, el método Array.from() se utiliza para convertir un objeto similar a un array en un array real.
Compatibilidad con navegadores
El método Array.from() es compatible con los navegadores modernos, incluidos Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ y Opera 38+. No es compatible con Internet Explorer.
Array keys() de JavaScript
El método keys() devuelve un nuevo objeto Array Iterator que contiene las claves de cada índice del array. Permite iterar sobre los índices del array. A continuación, se muestra un ejemplo:
Ejemplo
const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits.keys();
for (const key of iterator) {
console.log(key);
}
En este ejemplo, el método keys() se utiliza para obtener un iterador que contiene las claves (índices) del array fruits. Después, se utiliza el bucle for...of para iterar sobre las claves e imprimirlas.
Compatibilidad con navegadores
El método keys() es compatible con los navegadores modernos, incluidos Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ y Opera 38+. No es compatible con Internet Explorer.
Array entries() de JavaScript
El método entries() devuelve un nuevo objeto Array Iterator que contiene pares clave-valor para cada índice del array. Cada entrada es un array con la forma [índice, elemento]. A continuación, se muestra un ejemplo:
Ejemplo
Ejemplo de array en JavaScript:
const fruits = ['apple ', 'banana', 'orange']; const iterator = fruits.entries();
for (const [index, element] of iterator) { console.log(${index}: ${element}); }
En este ejemplo, el método entries() se utiliza para obtener un iterador que contiene pares clave-valor para cada índice del array fruits. Después, el bucle for...of se utiliza para desestructurar cada entrada en las variables index y element e imprimirlas.
Método with() de arrays de JavaScript
El método with() es una incorporación reciente introducida en ECMAScript 2023 (ES2023). Permite crear un nuevo array con un elemento especificado reemplazado por un nuevo elemento. Proporciona una forma de actualizar un elemento de un array sin modificar el array original. A continuación, se muestra un ejemplo:
Ejemplo
const numbers = [1, 2, 3, 4, 5];
const updatedNumbers = numbers.with(2, 10);
console.log(numbers);
console.log(updatedNumbers);
En este ejemplo, el método with() se utiliza para crear un nuevo array updatedNumbers en el que el elemento del índice 2 se reemplaza por el valor 10. El array numbers original permanece sin cambios.
Operador spread de arrays de JavaScript (...)
El operador spread (...) permite expandir un array en elementos individuales. Se puede utilizar para concatenar arrays, pasar arrays como argumentos a funciones o crear nuevos arrays con elementos existentes. A continuación, se muestra un ejemplo:
Ejemplo
const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'grape'];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits);
En este ejemplo, el operador spread se utiliza para concatenar los arrays fruits y moreFruits en un nuevo array allFruits.
Compatibilidad con navegadores
El operador spread es compatible con los navegadores modernos, incluidos Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ y Opera 38+. No es compatible con Internet Explorer.
Conclusión
JavaScript proporciona una amplia gama de métodos de iteración de arrays que permiten a los desarrolladores recorrer arrays en JavaScript, manipular elementos y crear nuevos arrays según condiciones específicas. En este artículo, exploramos varios métodos, incluidos los bucles tradicionales como while, do...while, for, for...in y for...of, así como métodos modernos de arrays como forEach(), map(), filter(), reduce(), every(), some() y otros.
Comprender y aprovechar estas técnicas de iteración de arrays permite a los desarrolladores escribir código conciso, eficiente y expresivo al trabajar con arrays en JavaScript. Al dominar estos métodos, puede realizar operaciones complejas sobre arrays con facilidad y crear potentes aplicaciones JavaScript basadas en bucles de arrays.
Escriba código aunque sea principiante con el asistente de IA de Latenode
