Iteración de matriz en JavaScript

La iteración de matrices es un concepto fundamental en JavaScript que permite a los desarrolladores recorrer y manipular elementos dentro de una matriz. JavaScript ofrece una variedad de métodos para iterar sobre matrices, desde bucles tradicionales (while, do...while, for, for...in, for...of) hasta métodos de matriz modernos (forEach, map, filter, reduce, reduceRight). Cada método es adecuado para diferentes tareas, 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 manejar matrices, lo que es esencial para crear aplicaciones JavaScript robustas. Comprender estos métodos también garantiza la compatibilidad con los navegadores modernos, lo que los hace prácticos para el desarrollo web contemporáneo.

Puntos clave:  JavaScript ofrece varios métodos para la iteración de matrices, incluidos los bucles tradicionales (while, do...while, for, for...in, for...of) y los métodos de matriz modernos (forEach, map, filter, reduce, reduceRight). Cada método tiene características únicas adecuadas para diferentes 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 matrices, algo esencial para crear aplicaciones JavaScript potentes. La mayoría de los métodos son compatibles con los navegadores modernos, lo que garantiza una amplia compatibilidad.

¿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 matrices 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 una matriz con un bucle While en JavaScript

El bucle while que recorre una matriz de objetos de JavaScript ejecuta un bloque de código siempre que una condición especificada se evalúe como verdadera. Es un bucle versátil que se puede utilizar para iterar sobre matrices mediante la gestión manual de la variable de índice. A continuación, se muestra un ejemplo de uso de un bucle while para iterar sobre una matriz:

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 de la matriz de números. El bucle imprime cada elemento en la consola e incrementa la variable de índice.

Cómo recorrer una matriz 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 verificar la condición. A continuación, se muestra un ejemplo de uso de un bucle de matriz do...while 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 una matriz con un bucle for en JavaScript

El bucle for es una estructura de bucle compacta y de uso común 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 uso de un bucle for para iterar sobre una matriz:

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, verifica 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 una matriz con un bucle for...in en JavaScript

El bucle for...in se utiliza para iterar sobre las propiedades de un objeto. Cuando se utiliza con matrices, itera sobre los índices de la matriz. 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 de la matriz persons e imprime cada índice y su valor correspondiente en la consola.

Cómo recorrer una matriz 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, incluidas las matrices. Accede directamente a los valores de la matriz 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 recorre cada elemento de la matriz de números y lo asigna a la variable número. El bucle imprime cada número en la consola.

Cómo recorrer una matriz con un bucle forEach en JavaScript

El método forEach() es un método de matriz integrado que ejecuta una función proporcionada una vez por cada elemento de la matriz. Ofrece un enfoque más expresivo y funcional para la iteración de matrices. 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 la matriz de frutas. Toma una función de flecha como argumento, que recibe cada fruta como parámetro y la imprime en la consola.

Otros métodos de iteración de matrices

JavaScript ofrece otros métodos de iteración de matrices que ofrecen potentes capacidades para manipular y transformar matrices. Estos métodos incluyen:

• map(): crea una nueva matriz llamando a una función proporcionada en cada elemento de la matriz.
• filter(): crea una nueva matriz con todos los elementos que pasan la prueba implementada por la función proporcionada.
• reduce(): ejecuta una función reductora en cada elemento de la matriz, lo que da como resultado un único valor de salida.
• every(): prueba si todos los elementos de la matriz pasan la prueba implementada por la función proporcionada.
• some(): prueba si al menos un elemento de la matriz pasa la prueba implementada por la función proporcionada.

Exploraremos estos métodos con más detalle en las siguientes secciones.

Matriz de JavaScript forEach()

El método forEach() ejecuta una función proporcionada una vez por cada elemento de la matriz. No devuelve una nueva matriz, pero permite realizar una acción en cada elemento. A continuación, se muestran algunos ejemplos:

Ejemplo

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
  console.log(number);
});

En este ejemplo, se utiliza el método forEach() para imprimir cada número de la matriz de números en la consola.

Ejemplo

const fruits = ['apple', 'banana', 'orange'];
const upperCaseFruits = [];

fruits.forEach((fruit) => {
  upperCaseFruits.push(fruit.toUpperCase());
});

console.log(upperCaseFruits);

En este ejemplo, se utiliza el método forEach() para convertir cada fruta de la matriz de frutas a mayúsculas y colocarla en una nueva matriz upperCaseFruits.

Mapa de matriz de JavaScript ()

El método map() crea una nueva matriz al llamar a una función proporcionada en cada elemento de la matriz. Devuelve una nueva matriz con los resultados de la llamada a la función para cada elemento. A continuación se muestran algunos ejemplos:

Ejemplo

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => {
  return number ** 2;
});

console.log(squaredNumbers);

En este ejemplo, se utiliza el método map() para crear una nueva matriz squaredNumbers elevando al cuadrado cada número de la matriz numbers.

Ejemplo

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, se utiliza el método map() para extraer la propiedad de nombre de cada objeto en la matriz persons y crear una nueva matriz names que contiene solo los nombres.

Filtro de matriz de JavaScript()

El método filter() crea una nueva matriz con todos los elementos que pasan la prueba implementada por la función proporcionada. Devuelve una nueva matriz que contiene los elementos que satisfacen la condición. A continuación se muestran un par de ejemplos:

Ejemplo

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers);

En este ejemplo, se utiliza el método filter() para crear una nueva matriz evenNumbers filtrando la matriz de números para incluir solo números pares.

Ejemplo

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, se utiliza el método filter() para crear una nueva matriz adultPersons filtrando la matriz persons para incluir solo personas que tengan 18 años o más.

Matriz de JavaScript reduce()

El método reduce() ejecuta una función reductora en cada elemento de la matriz, lo que genera un único valor de salida. Toma 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

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum);

En este ejemplo, se utiliza el método reduce() para calcular la suma de todos los números de la matriz numbers. El valor inicial del acumulador se establece en 0.

Ejemplo

const words = ['Hello', 'World', 'JavaScript'];
const sentence = words.reduce((accumulator, currentValue) => {
  return accumulator + ' ' + currentValue;
});

console.log(sentence);

En este ejemplo, se utiliza el método reduce() para concatenar todas las palabras de la matriz de palabras en una sola oración. El acumulador se inicializa con una cadena vacía.

Ejemplo

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, se utiliza el método reduce() para calcular la edad total de todas las personas de la matriz persons. El acumulador se inicializa en 0.

Matriz de JavaScript reduceRight()

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 algunos ejemplos:

Ejemplo

const numbers = [1, 2, 3, 4, 5];
const reversedSum = numbers.reduceRight((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(reversedSum);

En este ejemplo, se utiliza el método reduceRight() para calcular la suma de todos los números en la matriz de números, comenzando desde el último elemento y avanzando hacia el primer elemento.

Ejemplo

const words = ['Hello', 'World', 'JavaScript'];
const reversedSentence = words.reduceRight((accumulator, currentValue) => {
  return accumulator + ' ' + currentValue;
});

console.log(reversedSentence);

En este ejemplo, se utiliza el método reduceRight() para concatenar todas las palabras de la matriz de palabras en una sola oración, comenzando por la última palabra y avanzando hacia la primera.

Matriz de JavaScript every()

El método every() prueba si todos los elementos de la matriz pasan la prueba implementada por la función proporcionada. Devuelve true si la función devuelve true para todos los elementos y false en caso contrario. A continuación se muestran un par de ejemplos:

Ejemplo

const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every((number) => {
  return number % 2 === 0;
});

console.log(allEven);

En este ejemplo, se utiliza el método every() para comprobar si todos los números de la matriz numbers son pares. Devuelve true porque todos los números cumplen la condición.

Ejemplo

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, se utiliza el método every() para comprobar si todas las personas de la matriz persons son adultas (edad mayor o igual a 18). Devuelve true ya que todas las personas cumplen la condición.

Matriz de JavaScript some()

El método some() prueba si al menos un elemento de la matriz pasa la prueba implementada por la función proporcionada. Devuelve verdadero si la función devuelve verdadero para al menos un elemento y falso en caso contrario. 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, se utiliza el método some() para comprobar si hay al menos un número par en la matriz de números. Devuelve verdadero porque la matriz contiene números pares.

Métodos avanzados de iteración de matrices

JavaScript proporciona métodos de iteración de matriz adicionales que ofrecen funciones más avanzadas. Estos métodos incluyen:

• flatMap(): crea una nueva matriz aplicando una función a cada elemento y luego aplanando el resultado.
• from(): crea una nueva matriz a partir de un objeto iterable o similar a una matriz.
• keys(): Devuelve un nuevo objeto Array Iterator que contiene las claves para cada índice de la matriz.
• entries(): Devuelve un nuevo objeto Array Iterator que contiene pares clave-valor para cada índice de la matriz.
• with(): devuelve una nueva matriz con un elemento especificado reemplazado por un nuevo elemento. (Introducido en ES2023)

Exploremos estos métodos con más detalle.

Matriz de JavaScript flatMap()

El método flatMap() primero asigna cada elemento de una matriz mediante una función de asignación y luego aplana el resultado en una nueva matriz. Combina la funcionalidad de map() y flat() en un solo 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, se utiliza el método flatMap() para asignar cada número de la matriz de números a una matriz que contiene el número y su doble, y luego aplanar las matrices resultantes en una sola matriz.

Soporte del navegador

El método flatMap() es compatible con navegadores modernos, incluidos Chrome 69+, Edge 79+, Firefox 62+, Safari 12+ y Opera 56+.

Matriz de JavaScript from()

El método Array.from() crea una nueva matriz a partir de un objeto iterable o similar a una matriz. Permite convertir objetos que tienen una propiedad de longitud y elementos indexados en una matriz. A continuación, se muestra un ejemplo:

Ejemplo

Ejemplo de matriz en JavaScript:

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

const array = Array.from(arrayLike);
console.log(array);

En este ejemplo, se utiliza el método Array.from() para convertir un objeto similar a una matriz en una matriz real.

Soporte del navegador

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.

Claves de matriz de JavaScript ()

El método keys() devuelve un nuevo objeto Array Iterator que contiene las claves de cada índice de la matriz. Permite iterar sobre los índices de la matriz. 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, se utiliza el método keys() para obtener un iterador que contiene las claves (índices) de la matriz fruits. Luego, se utiliza el bucle for...of para iterar sobre las claves e imprimirlas.

Soporte del navegador

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.

Entradas de matriz de JavaScript()

El método entries() devuelve un nuevo objeto Array Iterator que contiene pares clave-valor para cada índice de la matriz. Cada entrada es una matriz en formato [índice, elemento]. A continuación, se muestra un ejemplo:

Ejemplo

Ejemplo de matriz en JavaScript:

const fruits = ['apple ', 'banana', 'orange']; const iterator = fruits.entries();
for (const [index, element] of iterator) { console.log(${index}: ${element}); }

En este ejemplo, se utiliza el método `entries()` para obtener un iterador que contiene pares clave-valor para cada índice de la matriz `fruits`. Luego, se utiliza el bucle `for...of` para desestructurar cada entrada en las variables `index` y `element` e imprimirlas.

Matriz de JavaScript con el método ()

El método `with()` es una nueva incorporación introducida en ECMAScript 2023 (ES2023). Permite crear una nueva matriz con un elemento especificado reemplazado por un elemento nuevo. Proporciona una forma de actualizar un elemento en una matriz sin modificar la matriz 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, se utiliza el método with() para crear una nueva matriz updatedNumbers donde el elemento en el índice 2 se reemplaza con el valor 10. La matriz de números original permanece sin cambios.

Matriz de propagación de JavaScript (...)

El operador de expansión (...) permite expandir una matriz en elementos individuales. Se puede utilizar para concatenar matrices, pasar matrices como argumentos a funciones o crear nuevas matrices 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, se utiliza el operador de propagación para concatenar las matrices fruits y moreFruits en una nueva matriz allFruits.

Soporte del navegador

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.

Resumen

JavaScript ofrece una amplia gama de métodos de iteración de matrices que permiten a los desarrolladores realizar bucles en matrices, manipular elementos y crear nuevas matrices en función de condiciones específicas. En este artículo, exploramos varios métodos, incluidos bucles tradicionales como while, do...while, for, for...in y for...of, así como métodos de matriz modernos como forEach(), map(), filter(), reduce(), every(), some() y más.

Comprender y aprovechar estas técnicas de iteración de matrices permite a los desarrolladores escribir código conciso, eficiente y expresivo al trabajar con matrices para each en JavaScript. Al dominar estos métodos, puede realizar operaciones complejas en matrices con facilidad y crear potentes aplicaciones de bucle de matrices en JavaScript.

Preguntas Frecuentes

¿Cuál es la diferencia entre los bucles for...of y for...in?

El bucle for...of se utiliza para iterar sobre los valores de un objeto iterable, como una matriz, mientras que el bucle for...in se utiliza para iterar sobre las propiedades enumerables de un objeto, incluidos los índices de una matriz.

¿Cuándo debería utilizar map() en lugar de forEach()?

Utilice map() cuando desee crear una nueva matriz transformando cada elemento de una matriz existente. Utilice forEach() cuando desee realizar una acción en cada elemento de una matriz sin crear una nueva matriz.

¿Cómo puedo iterar sobre una matriz en orden inverso?

Puede utilizar el método reverse() para invertir el orden de los elementos en una matriz y luego iterar sobre la matriz invertida utilizando cualquiera de los métodos de iteración analizados en este artículo.

¿Cómo puedo salir de un bucle de forma prematura?

Puede utilizar la sentencia break para salir de una matriz de bucle en JavaScript de forma prematura. Cuando se encuentra dentro de un bucle, break finaliza inmediatamente el bucle y transfiere el control a la siguiente sentencia después del bucle.