Iteración de matrices en JavaScript

La iteración de matrices es un concepto fundamental de JavaScript que permite a los desarrolladores recorrer y manipular los elementos de una matriz. JavaScript proporciona diversos métodos para iterar sobre matrices, desde los bucles tradicionales (while, do...while, for, for...in, for...of) hasta los métodos modernos de matrices (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 manejar matrices, lo que es esencial para construir 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 modernos de matrices (forEach, map, filter, reduce, reduceRight). Cada método tiene características únicas adecuadas para diferentes casos de uso, desde simples iteraciones hasta transformaciones complejas. Dominar estas técnicas permite a los desarrolladores escribir código eficiente y expresivo para manipular matrices, 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.

¿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 forma eficiente. JavaScript ofrece varios tipos de bucles, como 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 a través de matrices de objetos javascript ejecuta un bloque de código mientras una condición especificada se evalúe como verdadera. Es un bucle versátil que puede utilizarse para iterar sobre matrices gestionando manualmente la variable índice. Aquí tienes un ejemplo de uso de 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 de la matriz de números. El bucle imprime cada elemento en la consola e incrementa la variable í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 ejecuta al menos una vez antes de comprobar la condición. Aquí tienes un ejemplo de uso de un bucle do...while en javascript:

const fruits = ['apple', 'banana', 'orange'];
let i = 0;

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

In this case, the loop prints each fruit to the console and increments the index variable. The loop continues until the condition i < fruits.length evaluates to false.

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

El bucle for es una estructura de bucle compacta y muy utilizada en JavaScript. Combina las expresiones de inicialización, condición e incremento/decremento en una sola línea. Aquí tienes 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]);
}

The for loop initializes the index variable i to 0, checks the condition i < colors.length, and increments i after each iteration. The loop prints each color to the console.

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. Aquí tienes 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 personas. 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 índice. He aquí 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 de la matriz 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 incorporado a las matrices que ejecuta una función proporcionada una vez por cada elemento de la matriz. Ofrece un enfoque más expresivo y funcional de la iteración de matrices. He aquí un ejemplo:

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

fruits.forEach((fruit) => {
  console.log(fruit);
});

En este ejemplo, se llama al método forEach() sobre la matriz de frutas. Toma como argumento una función flecha, que recibe cada fruta como parámetro y la imprime en la consola.

Otros métodos de iteración de matrices

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

• mapear(): Crea una nueva matriz llamando a una función proporcionada en cada elemento de la matriz.
• filtrar(): Crea una nueva matriz con todos los elementos que superan la prueba implementada por la función proporcionada.
• reducir(): Ejecuta una función reductora en cada elemento de la matriz, dando como resultado un único valor de salida.
• every(): Comprueba si todos los elementos de la matriz superan la prueba implementada por la función proporcionada.
• algunos(): Comprueba si al menos un elemento de la matriz supera la prueba implementada por la función proporcionada.

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

Matriz JavaScript forEach()

El método forEach() ejecuta una función proporcionada una vez por cada elemento de la matriz. No devuelve una nueva matriz, sino que te permite realizar una acción en cada elemento. Aquí tienes un par de ejemplos:

Ejemplo 1

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

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

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

Ejemplo 2

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 frutas a mayúsculas e introducirla en una nueva matriz frutasMayúsculas.

Matriz JavaScript map()

El método map() crea una nueva matriz llamando 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. Aquí tienes 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, se utiliza el método map() para crear una nueva matriz númerosalcuadrado elevando al cuadrado cada número de la matriz números.

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, se utiliza el método map() para extraer la propiedad nombre de cada objeto de la matriz personas y crear una nueva matriz nombres que contenga sólo los nombres.

Filtro de matriz JavaScript()

El método filter() crea una nueva matriz con todos los elementos que superan la prueba implementada por la función proporcionada. Devuelve una nueva matriz con los elementos que cumplen la condición. Aquí tienes 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, se utiliza el método filter() para crear una nueva matriz evenNumbers filtrando la matriz numbers para incluir sólo 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, se utiliza el método filter() para crear una nueva matriz adultPersons filtrando la matriz persons para incluir sólo a las personas que tengan 18 años o más.

Matriz JavaScript reduce()

El método reduce() ejecuta una función reductora en cada elemento de la matriz, dando como resultado un único valor de salida. Toma un acumulador y el elemento actual como argumentos y devuelve el acumulador para la siguiente iteración. Aquí tienes 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, se utiliza el método reducir() para calcular la suma de todos los números de la matriz números. El valor inicial del acumulador se fija en 0.

Ejemplo 2

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

JavaScript Array reducirDerecha()

El método reduceDerecha() es similar al método reduce(), pero ejecuta la función reductora de derecha a izquierda (del último elemento al primero). Aquí tienes 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, se utiliza el método reducirDerecha() para calcular la suma de todos los números de la matriz números, empezando 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, se utiliza el método reducirDerecha() para concatenar todas las palabras de la matriz de palabras en una sola frase, empezando por la última palabra y avanzando hacia la primera.

Matriz JavaScript cada()

El método every() comprueba si todos los elementos de la matriz pasan la prueba implementada por la función proporcionada. Devuelve verdadero si la función devuelve verdadero para todos los elementos, y falso en caso contrario. Aquí tienes 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 de la matriz numbers son pares. Devuelve verdadero, 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 de la matriz personas son adultas (edad mayor o igual a 18 años). Devuelve verdadero, ya que todas las personas cumplen la condición.

Matriz JavaScript some()

El método some() comprueba si al menos un elemento de la matriz supera la prueba implementada por la función proporcionada. Devuelve verdadero si la función devuelve verdadero al menos un elemento, y falso en caso contrario. Aquí tienes 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 la matriz de números. Devuelve verdadero, ya que la matriz contiene números pares.

Métodos avanzados de iteración de matrices

JavaScript proporciona métodos adicionales de iteración de matrices que ofrecen una funcionalidad más avanzada. Estos métodos incluyen:

• mapaplano(): Crea una nueva matriz aplicando una función a cada elemento y aplanando el resultado.
• desde(): Crea un nuevo array a partir de un objeto tipo array o iterable.
• claves(): Devuelve un nuevo objeto Iterador de Matriz que contiene las claves de cada índice de la matriz.
• entradas(): Devuelve un nuevo objeto Iterador de Matriz que contiene pares clave-valor para cada índice de la matriz.
• con(): Devuelve una nueva matriz con un elemento especificado sustituido por un nuevo elemento. (Introducido en ES2023)

Exploremos estos métodos con más detalle.

Matriz JavaScript flatMap()

El método flatMap() primero mapea cada elemento de una matriz utilizando una función de mapeo, y luego aplana el resultado en una nueva matriz. Combina la funcionalidad de map() y flat() en un solo método. Aquí tienes 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 numbers a una matriz que contenga el número y su doble, y luego aplanar las matrices resultantes en una única matriz.

Soporte para navegadores

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

Matriz JavaScript from()

El método Array.from() crea un nuevo array a partir de un objeto tipo array o iterable. Te permite convertir objetos que tienen una propiedad de longitud y elementos indexados en un array. Aquí tienes un ejemplo:

Ejemplo

array en javascript ejemplo:

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 un array en un array real.

Soporte para 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 de JavaScript keys()

El método keys() devuelve un nuevo objeto Iterador de Matrices que contiene las claves de cada índice de la matriz. Te permite iterar sobre los índices de la matriz. Aquí tienes 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. A continuación, se utiliza el bucle for...of para iterar sobre las claves e imprimirlas.

Soporte para 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.

JavaScript Matriz entradas()

El método entries() devuelve un nuevo objeto Iterador de matrices que contiene pares clave-valor para cada índice de la matriz. Cada entrada es una matriz con la forma [índice, elemento]. Aquí tienes un ejemplo:

Ejemplo

array en javascript ejemplo:

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 contenga pares clave-valor para cada índice de la matriz `fruits`. A continuación, se utiliza el bucle `para...de` para desestructurar cada entrada en las variables `índice` y `elemento` e imprimirlas.

Método JavaScript Array with()

El método `with()` es una nueva adición introducida en ECMAScript 2023 (ES2023). Te permite crear una nueva matriz sustituyendo un elemento especificado por otro nuevo. Proporciona una forma de actualizar un elemento de una matriz sin mutar la matriz original. He aquí un ejemplo:

Ejemplo

const números = [1, 2, 3, 4, 5];
const númerosactualizados = números.con(2, 10);

console.log(números);
console.log(númerosactualizados);

‍
En este ejemplo, se utiliza el método with() para crear una nueva matriz NúmerosActualizados en la que el elemento del índice 2 se sustituye por el valor 10. La matriz original Números permanece inalterada.

Separación de matrices en JavaScript (...)

El operador de expansión (...) te permite expandir una matriz en elementos individuales. Puede utilizarse para concatenar matrices, pasar matrices como argumentos a funciones o crear nuevas matrices con elementos existentes. Aquí tienes un ejemplo:

Ejemplo

const frutas = ['manzana', 'plátano'];
const másFrutas = ['naranja', 'uva'];
const todasLasFrutas = [...frutas, ...másFrutas];

console.log(todasLasFrutas);

En este ejemplo, se utiliza el operador propagación para concatenar las matrices frutas y másFrutas en una nueva matriz todoFrutas.

Soporte para navegadores

El operador de propagación 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 matrices que permiten a los desarrolladores realizar bucles javascript a través de matrices, manipular elementos y crear nuevas matrices basándose en condiciones específicas. En este artículo hemos explorado varios métodos, incluidos los bucles tradicionales como while, do...while, for, for...in y for...of, así como métodos modernos de matrices como forEach(), map(), filter(), reduce(), every(), some(), etc.

Comprender y aprovechar estas técnicas de iteración de arrays permite a los desarrolladores escribir código conciso, eficiente y expresivo cuando trabajan con arrays para cada en javascript. Si dominas estos métodos, podrás realizar operaciones complejas en matrices con facilidad y crear potentes aplicaciones de bucles de matrices en javascript.

PREGUNTAS FRECUENTES

¿Cuál es la diferencia entre los bucles for...de 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 debo utilizar map() en lugar de forEach()?

Utiliza map() cuando quieras crear una nueva matriz transformando cada elemento de una matriz existente. Utiliza forEach() cuando quieras 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?

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

¿Cómo puedo salir prematuramente de un bucle?

Puedes utilizar la sentencia break para salir prematuramente de un bucle en javascript. Cuando se encuentra dentro de un bucle, break termina inmediatamente el bucle y transfiere el control a la siguiente sentencia después del bucle.