Manipulacion de Arrays en JavaScript
👋 Hola, el día de hoy te voy a explicar como manipular arreglos en JavaScript. Veremos varios de los principales conceptos que tu debes conocer para poder manipular arreglos en JavaScript, esto es de mucho beneficio al momento de trabajar con algunas librerías tando del lado del cliente como del servidos. Esta es la primer parte, aquí veremos los siguientes conceptos:
Índice
Y muchos mas.
Espero que te guste y te ayude a aprender mas sobre JavaScript. Recuerda que puedes guardar este post para que lo puedas leer en tu futuro, comencemos 🚀.
ForEach
Vamos a iniciar con el primer método, este es forEach, forEach nos permite recorrer un arreglo y ejecutar una función por cada elemento del arreglo. Recuerda que en JavaScript podemos tener un arreglo con diferentes tipos de datos, como números, booleans, objetos, arrays, etc.
Como por ejemplo este arreglo:
[🐥, 🐄, 🥔, 🌽]
Puedes utilizar estos métodos y también utilizar for
pero estos métodos que nos da JavaScript son mas eficientes y con una mejor sintaxis. Aquí las diferencias:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
numbers.forEach((number) => console.log(number))
// vs
for (let i = 0; i < numbers.length; i++) {
const item = numbers[i]
console.log(item)
}
Como puedes ver estamos haciendo lo mismo para la sintaxis cumbiamba bastante, y se complica mas cuando se deben hacer operaciones mas complejas.
Ahora si pasemos al código, vamos a crear un array de letras, con los elementos que quieras. Primero utilizaremos for
para recorrer este array
const letras = ['a', 'b', 'c', 'd']
for (let i = 0; i < letras.length; i++) {
const item = letras[i]
console.log(item)
}
Como puedes ver tenemos en total 5 líneas de código, esto mismo se puede hacer de una manera mucho mas fácil con los métodos de array. Vamos a tomer letras
y ejecutar .forEach()
ahí tenemos una arrow function, es la función que se ejecuta en cada uno de los elementos, y le decimos que queremos en cada uno de los items:
const letras = ['a', 'b', 'c', 'd']
letras.forEach((item) => console.log(item))
Como puedes ver a diferencia de utilizar for
ahora hemos hecho exactamente lo mismo, pero con una mejor sintaxis y en tan solo 1 linea de código. El forEach
ya nos entrega cada elemento.
Ahora esto quizá lo entiendas mejor llevándolo a la practica es por eso que ahora crearemos un archivo index.html
y crearemos una pequeña pagina en la cual pondremos un script y un div:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Metodos de Arrays</title>
</head>
<body>
<div id="app"></div>
<script></script>
</body>
</html>
Dentro de nuestro script, vamos a poner unos productos, el fin de esto es renderizarlos utilizando forEach
, ahora crearemos los productos:
const productos = [
{
nombre: 'Camisa',
precio: 50,
},
{
nombre: 'Pantalon',
precio: 100,
},
{
nombre: 'Zapatos',
precio: 150,
},
]
Ahora que tenemos los productos, primero debemos seleccionar el div en donde queremos renderizar nuestros productos:
const app = document.getElementById('app')
Recuerda que todo este código lo debes introducir en tu etiqueta script, se tiene que ver algo así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Metodos de Arrays</title>
</head>
<body>
<div id="app"></div>
<script>
const productos = [
{
nombre: 'Camisa',
precio: 50,
},
{
nombre: 'Pantalon',
precio: 100,
},
{
nombre: 'Zapatos',
precio: 150,
},
]
const app = document.getElementById('app')
</script>
</body>
</html>
Yo lo estoy poniendo por partes para que sea mas fácil de entender, continuemos.
Ahora vamos a hacer el uso de forEach
para recorrer nuestros productos, y luego ejecutar la lógica para introducir los elementos dentro del div:
productos.forEach((producto) => {
app.innerHTML += `
<div>
<h2>${producto.nombre}</h2>
<p>$${producto.precio}</p>
</div>
`
})
Pero de esta manera igual estamos recorriendo objetos, como puedes ver, estamos renderizando el nombre y el precio para que el usuario lo pueda ver. Si ejecutamos nuestro html
veremos lo siguiente:
Ya lograste iterar y dar un resultado, utilizando métodos de array.
Ahora como reto para ti es:
- Crear un arreglo de productos, los cuales deben tener: nombre, precio, debe indicar si es un producto nuevo o no y si el producto lo han pedido (indicado con un input checkbox).
Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.
Map
Ahora aprenderemos map
el elemento mas útil para hacer transformaciones, varios lenguajes de programación lo utilizan y también algunos frameworks. El map lo que hace es transformar, el array original en un nuevo array, pero con los elementos transformados.
[🥚, 🐄, 🐥, 🥖]
//Map
[🍟, 🍔, 🍗, 🥪]
Al utilizar map, siempre tenemos el mismo numero de elementos que el array original, si el original contenía 4 elementos el nuevo array también contendrá 4 elementos.
Vamos al código, vamos a crear un array de números, y lo que queremos es que nos devuelva un array con los números multiplicados por 2 pero que este se guarde en otra constante:
const numeros = [1, 2, 3, 4, 5]
const numeroMultiplicados = numeros.map((numero) => numero * 2)
Si hacemos un console.log()
de numeros
y otro de numerosMultiplicados
veremos que numeros
sigue siendo el mismo pero que dentro de numerosMultiplicados
tenemos un nuevo array con los numeros multiplicados. Ya que map
genera un nuevo array con la transformación.
Ahora veremos un ejemplo dentro de html
haciendo lo del ejercicio anterior pero ahora utilizando map:
const app = document.getElementById('app')
const producto = productos.map((producto) => {
return `
<div>
<h2>${producto.nombre}</h2>
<p>$${producto.precio}</p>
</div>
`
})
app.innerHTML = producto.join('')
Map Reloadaed
En pocas palabras map
es un método que transforma, pero ahora veremos un poco mas profundo map.
Ahora vamos a utilizar map
, en un archivo de .js
y tendremos un array de productos, con un nombre, precio y si esta disponible:
const productos = [
{
nombre: 'Camisa',
precio: 50,
disponible: true,
},
{
nombre: 'Pantalon',
precio: 100,
disponible: true,
},
{
nombre: 'Zapatos',
precio: 150,
disponible: false,
},
{
nombre: 'Bicicleta',
precio: 200,
disponible: true,
},
]
Ahora map puede funcionar para transformar, podemos tomar todos los objetos de un array para transformarlos en lo que quiera.
Vamos a suponer que de este array solo quiero saber el precio, entonces si hacemos un map:
productos.map((producto) => producto.precio)
Ya no tenemos un array de objetos, ahora tenemos un array de números, y puedes hacer un console.log()
para verlo:
console.log('Productos: ', productos)
precios = productos.map(producto => producto.precio)
console.log('Precios: ',precios)
Veremos algo como esto:
Productos: [
{ nombre: 'Camisa', precio: 50, disponible: true },
{ nombre: 'Pantalon', precio: 100, disponible: true },
{ nombre: 'Zapatos', precio: 150, disponible: false },
{ nombre: 'Bicicleta', precio: 200, disponible: true }
]
Precios: [ 50, 100, 150, 200 ]
Como vemos sigue cumpliendo con lo visto, nos devolvió un array con 4 elementos, porque en el array de productos tenemos 4 objetos.
Esto nos puede para limpiar datos o para filtrar datos, sirve para seleccionar datos de un array.
Ahora que pasa si lo que queremos es agregar un elemento el objeto, tenemos nombre, precio y disponible pero queremos agregar una propiedad que nos muestre el IVA del precio tomando en cuenta que el IVA es del 16% este 16% se debe agregar al precio original.
Pero no queremos transformar el array original, solo agregar un atributo sin modificar le array original. Esto si lo hacemos de la siguiente manera:
const precioIva = productos.map((producto) => {
producto.iva = producto.precio * 0.16 + producto.precio
return producto
})
console.log('Precios con IVA: ', precioIva)
Vamos a ver el si se agrego el atributo a los objetos, pero igual queremos ver que el array original no se modifico:
console.log('Original: ', productos)
console.log('Precios con IVA: ', precioIva)
Si vemos esto en la consola nos aparece lo siguiente:
Original: [
{ nombre: 'Camisa', precio: 50, disponible: true, iva: 58 },
{ nombre: 'Pantalon', precio: 100, disponible: true, iva: 116 },
{ nombre: 'Zapatos', precio: 150, disponible: false, iva: 174 },
{ nombre: 'Bicicleta', precio: 200, disponible: true, iva: 232 }
]
Precios con IVA: [
{ nombre: 'Camisa', precio: 50, disponible: true, iva: 58 },
{ nombre: 'Pantalon', precio: 100, disponible: true, iva: 116 },
{ nombre: 'Zapatos', precio: 150, disponible: false, iva: 174 },
{ nombre: 'Bicicleta', precio: 200, disponible: true, iva: 232 }
]
Como vemos el original se ha cambiado, y se supone que map no es mutable, lo que sucede es que estamos creando una copia pero esta esta copiando una referencia de memoria y aquí cometemos ese error, debemos tener mucho cuidado con esto. Esto es muy común que pase con objetos
ya que estos tienen referencia en memoria.
Para que esto no suceda en ves de retornar y hacer la modificación en el objeto vamos a asegurarnos de generar un nuevo objeto, vamos a utilizar el spred operator
que nos entrega ECMAScript 6
, esto se copia sin la referencia de memoria, y luego agregamos el valor que queremos agregar:
const precioIva = productos.map((producto) => {
iva = producto.precio * 0.16 + producto.precio
return {
...producto,
iva
}
})
Ahora si vemos el console.log nos aparecerá esto:
Original: [
{ nombre: 'Camisa', precio: 50, disponible: true },
{ nombre: 'Pantalon', precio: 100, disponible: true },
{ nombre: 'Zapatos', precio: 150, disponible: false },
{ nombre: 'Bicicleta', precio: 200, disponible: true }
]
Precios con IVA: [
{ nombre: 'Camisa', precio: 50, disponible: true, iva: 58 },
{ nombre: 'Pantalon', precio: 100, disponible: true, iva: 116 },
{ nombre: 'Zapatos', precio: 150, disponible: false, iva: 174 },
{ nombre: 'Bicicleta', precio: 200, disponible: true, iva: 232 }
]
Como podemos ver esta ves no se modifico el arreglo original, esta es la forma en que debes trabajar con objetos y map a la ves, sin copiar la referencia de memoria.
Ahora como reto para ti es:
Crear un array con objetos cada objeto debe tener las siguientes propiedades: nombre, apellido, correo y sueldo. Tu tarea es agregar una nueva propiedad que nos muestre el sueldo en dólares, sin que se modifique el array original.
Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.
Filter
Ahora veremos otro concepto, que es el de filter, este es una función que nos permite filtrar datos de un array, y nos devuelve un array con los datos que cumplen con la condición van a ser parte del nuevo array, por lo tanto filter es inmutable. Puede que el array ya lo halla transformado map, pero que ahora nosotros vamos a quererlo filtrar con base a una condición. por ejemplo:
[🍕,🍔,🍟,🌭,🍿,🥞,🧇,🍳,🥚,🥯,🍖,🍗,🥩,🍚]
// Filtrando la comida de la lista por comida vegana
[🍟,🍿,🍚]
Este ejemplo nos muestra la comida que cumple con la condición de ser vegana y nos va a devolver un nuevo array, filter es un método que puede retornar hasta 0 elementos si es que ningún elemento cumple con la condición, pero nunca va a retornar mas elementos que el array original, a diferencia con map que retorna la misma longitud del array original.
Vamos a a ver esto en código para que quede mas claro, con un ejemplo con un array de números:
const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50]
Ahora que pasa si queremos filtrar los números que son pares, para esto debemos utilizar el método filter, y la condición que queremos cumplir es que el numero sea par, para ver que un numero par su modulo %
debe ser igual a 0, por lo tanto debemos hacer lo siguiente:
const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50]
const pares = numeros.filter(numero => numero % 2 === 0)
console.log('Numeros Pares: ', pares)
Si vemos el resultado en la consola, podremos ver lo siguiente:
Numeros Pares: [
2, 4, 6, 8, 10, 12, 14, 16,
18, 20, 22, 24, 26, 28, 30, 32,
34, 36, 38, 40, 42, 44, 46, 48,
50
]
Ahora vamos a otro ejemplo, ahora crearemos un array con nombres de personas, y queremos filtrar los nombres que empiezan con la letra A
, para esto debemos hacer lo siguiente:
const nombres = ['Luis', 'Alan', 'Gerardo', 'Angel', 'Luisa', 'Sofia', 'Renata', 'Camila', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', ]
De este arreglo solo vamos a querer los nombres que comiencen con la letra 'A', así que utilizaremos un filter para filtrar los nombres que comiencen con la letra 'A' y lo guardaremos en una nueva constante:
const nombresA = nombres.filter(nombre => nombre.charAt(0) === 'A')
console.log('Nombres que empiezan con A: ', nombresA)
Si vemos esto en nuestra consola veremos lo siguiente:
Nombres que empiezan con A: [
'Alan', 'Angel', 'Ana',
'Ana', 'Ana', 'Ana',
'Ana', 'Ana', 'Ana',
'Ana', 'Ana', 'Ana',
'Ana', 'Ana'
]
Y este no modifica el array original, si hacemos un console.log()
de los nombres originales y los filtrados veremos lo siguiente:
Original [
'Luis', 'Alan', 'Gerardo', 'Angel', 'Luisa', 'Sofia',
'Renata', 'Camila', 'Juan', 'Javier', 'Daniel', 'Jorge',
'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian',
'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela',
'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier',
'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana',
'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge',
'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian',
'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela',
'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier',
'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana',
'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge',
'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian',
'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela',
'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier',
'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana',
'Maria', 'Sebastian', 'Juan', 'Javier',
... 30 more items
]
Nombres que empiezan con A: [
'Alan', 'Angel', 'Ana',
'Ana', 'Ana', 'Ana',
'Ana', 'Ana', 'Ana',
'Ana', 'Ana', 'Ana',
'Ana', 'Ana'
]
Esto quiere decir que nuestro array original no se modifico.
En filter, podemos poner condiciones mas complejas, para esto vamos a utilizar el array de productos que utilizamos en map:
const productos = [
{
nombre: 'Camisa',
precio: 50,
disponible: true,
},
{
nombre: 'Pantalon',
precio: 100,
disponible: true,
},
{
nombre: 'Zapatos',
precio: 150,
disponible: false,
},
{
nombre: 'Bicicleta',
precio: 200,
disponible: true,
},
{
nombre: 'Mochila',
precio: 250,
disponible: false,
},
{
nombre: 'Celular',
precio: 300,
disponible: true,
},
{
nombre: 'Tablet',
precio: 350,
disponible: false,
}
]
Y ahora queremos hacer un filtro, de todos los productos que están disponibles, en este caso tenemos 4, debemos hacer lo siguiente:
const disponible = productos.filter(producto => producto.disponible)
Solo ponemos producto.disponible
porque esa propiedad ya es un boleano, si es true
entonces el producto esta disponible, si es false
entonces no esta disponible.
Si vemos esto en la consola nos aparece lo siguiente:
Productos disponibles: [
{ nombre: 'Camisa', precio: 50, disponible: true },
{ nombre: 'Pantalon', precio: 100, disponible: true },
{ nombre: 'Bicicleta', precio: 200, disponible: true },
{ nombre: 'Celular', precio: 300, disponible: true }
]
Ahora haremos algo mas complejo, queremos ver los productos que estén disponibles, pero que aparte tengan un precio mayor a 250, esto lo podemos hacer de la siguiente forma:
const disponible = productos.filter(producto => producto.disponible && producto.precio > 250)
Si vemos esto en la consola veremos lo siguiente:
Productos disponibles y mayor a $250: [ { nombre: 'Celular', precio: 300, disponible: true } ]
En este caso solo tenemos 1 elemento que cumple con eso.
Y podemos hacer cosas aun mas complejas, pero siempre nos devuelve un array que cumpla con los elementos de la condición.
Ahora haremos algo mas complejo, vamos a hacer un buscador, para que nosotros introduzcamos una palabra o un nombre y este nos devuelva un array con los productos que tengan esa palabra o nombre, esto lo haremos de la siguiente forma:
const buscar = query => {
return productos.filter(producto => {
return producto.nombre.includes(query)
})
}
console.log('Buscador: ',buscar('C'))
En este caso estamos buscando los productos que contienen la letra C, y nos devuelve un array con los productos que cumplen con eso. En nuestra consola veremos algo como esto:
Buscador: [
{ nombre: 'Camisa', precio: 50, disponible: true },
{ nombre: 'Celular', precio: 300, disponible: true }
]
Pero como puedes ver nos devuelve los que contiene la letra 'C' mayúscula, y no todos los que contiene la letra 'c'. Para esto debemos mejorar nuestro buscador de la siguiente forma:
const buscar = query => {
return productos.filter(producto => {
return producto.nombre.toLowerCase().includes(query.toLowerCase())
})
}
console.log('Buscador: ',buscar('c'))
Si ahora vemos esto en la consola nos aparece lo siguiente:
Buscador: [
{ nombre: 'Camisa', precio: 50, disponible: true },
{ nombre: 'Bicicleta', precio: 200, disponible: true },
{ nombre: 'Mochila', precio: 250, disponible: false },
{ nombre: 'Celular', precio: 300, disponible: true }
]
Lo que hicimos es que todos los nombres los pasamos a letras minúsculas, y luego le decimos que debe incluir la letra que le pasamos, pero esta letra igual la pasamos a minúscula, para que todos los nombres estén en minúscula y pueda coincidir con la búsqueda. De esta forma no afecta como introduzcamos la letra a buscar.
Así que para terminar recuerda que filter sirve para filtrar la información por medio de una condición.
Ahora como reto para ti es:
- Crear un arreglo de productos que tenga las siguientes propiedades
vendedor
,producto
,precio
,vendido
. Debes crear un buscador que busque el vendedor que ha vendido el producto que le pasemos por parámetro, y debes hacer una validación del buscador, si un producto no ha sido vendido o si ese producto no existe.
Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.
Reduce
Ahora veremos reduce, es un método que contienen los arreglos en JavaScript, y nos permite ejecutar funciones reducer una función de reducer, recibe 2 argumentos:
- El primero es un valor que esta siendo acumulado.
- El segundo es el valor que se esta iterando del arreglo.
La función debe devolver el nuevo elemento que ese va a estar acumulando. Nos permite no solo reducciones si no mas operaciones bastantes útiles. Veremos algunos ejemplos:
const reducer = (acumulador, valorActual) => nuevoAcumulador
El nuevoAcumulador
en la siguiente iteración tomo el argumento de acumulador, y así hasta que lleguemos al final del arreglo.
const reducido = [].reduce((acc, el) => acc + el, 0)
Como vemos estamos ejecutando la función en un arreglo vacío, este recibe 2 argumentos, el primero es el reducer (acc, el) => acc + el
, y el segundo es el valor inicial que va a tener el acumulador cuando comience la iteración, en este caso es 0
. Este reducer devuelve la suma del acumulador y el elemento que esta iterando.
Ahora vamos a darle unos valores al arreglo y ver lo que nos devuelve en la consola:
const reducido = [1, 2].reduce((acc, el) => acc + el, 0)
console.log(reducido)
En la consola nos devuelve el valor de:
3
Para ver esto de una mejor forma podemos hacerlo de la siguiente forma:
const reducido = [1, 2].reduce((acc, el) => {
console.log(`Acumulador: ${acc}, Elemento: ${el}, Suma: ${acc + el}`);
return acc + el;
}, 0)
console.log('Resultado: ', reducido)
Y en la consola veríamos lo siguiente:
Acumulador: 0, Elemento: 1, Suma: 1
Acumulador: 1, Elemento: 2, Suma: 3
Resultado: 3
Ahora veremos este ejemplo con mas números:
const numero = [1, 2, 3, 4, 5]
const resultado = numero.reduce((acc,el) => {
console.log(`Acumulador: ${acc}, Elemento: ${el}, Suma: ${acc + el}`)
return acc + el
}, 0)
console.log('Resultado: ', resultado)
Y en nuestra consola veremos lo siguiente:
Acumulador: 0, Elemento: 1, Suma: 1
Acumulador: 1, Elemento: 2, Suma: 3
Acumulador: 3, Elemento: 3, Suma: 6
Acumulador: 6, Elemento: 4, Suma: 10
Acumulador: 10, Elemento: 5, Suma: 15
Resultado: 15
Esto nos puede servir para hacer la suma de todos los elementos de un arreglo.
Indexar objetos
Ahora, iremos al código, veremos un ejemplo con un arreglo de autos, tendremos, el nombre, el año y el color:
const autos = [
{ nombre: 'Mustang', año: 2015, color: 'Azul' },
{ nombre: 'Camaro', año: 2018, color: 'Naranja' },
{ nombre: 'Challenger', año: 2017, color: 'Negro' },
{ nombre: 'Ferrari', año: 2019, color: 'Rojo' },
{ nombre: 'Lamborghini', año: 2015, color: 'Amarillo' },
]
Cuando tenemos un arreglo gigante de: 10k elementos, 100k elementos, 1millon de elementos, y queremos ir a buscar un elemento en particular del arreglo, podemos utilizar find
, si lo llamamos una ves no tendremos ningún problema pero si lo llamamos varias veces, podemos destruir el performance de nuestra aplicación.
Lo que vamos a hacer es tomar este arreglo de autos y lo vamos a indexar:
const indexed = autos.reduce((acc, el) => ({
...acc,
[el.nombre]: el,
}),{})
console.log(indexed)
Si vemos en la consola nos aparecerá lo siguiente:
{
Mustang: { nombre: 'Mustang', 'año': 2015, color: 'Azul' },
Camaro: { nombre: 'Camaro', 'año': 2018, color: 'Naranja' },
Challenger: { nombre: 'Challenger', 'año': 2017, color: 'Negro' },
Ferrari: { nombre: 'Ferrari', 'año': 2019, color: 'Rojo' },
Lamborghini: { nombre: 'Lamborghini', 'año': 2015, color: 'Amarillo' }
}
Como podemos ver, ahora tenemos un objeto, que esta indexado por los nombres de los autos, así que si después quiero ir a buscar uno de los elementos, puedo utilizar el nombre del auto:
console.log(indexed['Challenger'])
// Output:
{ nombre: 'Challenger', 'año': 2017, color: 'Negro' }
De esta manera podemos indexar los objetos que se encuentran dentro de nuestro arreglo utilizando el método de reduce.
Anidados
Ahora vamos a tomar un arreglo que contiene elementos anidados, esto ocurre cuando queremos hacer mezclas o algún endpoint nos devuelve un arreglo que contiene mas arreglos, ahora lo que queremos hacer es dejar el arreglo que sea plano, sin anidación, esto quiere decir:
anidado = [1, [2, 3, 4], 5, [6, 7, 8]]
noAnidado = [1, 2, 3, 4, 5, 6, 7, 8]
Para transformarlo lo vamos a hacer de la siguiente manera:
const plano = anidado.reduce((acc, el) => acc.concat(el), [])
console.log('Anidados', anidado)
console.log('Plano', plano)
Lo que estamos haciendo es concatenando el acumulador con el elemento, y este comenzara en un arreglo vacío. Si vemos esto en la consola tendremos el siguiente resultado:
Anidados [ 1, [ 2, 3, 4 ], 5, [ 6, 7, 8 ] ]
Plano [
1, 2, 3, 4,
5, 6, 7, 8
]
Para ver que esta sucediendo podemos hacer un console.log de los elementos de la siguiente forma:
const plano = anidado.reduce((acc, el) => {
console.table(`acc: ${acc}, el: ${el}, acc.concat(el): ${acc.concat(el)}`)
return acc.concat(el)
}, [])
console.log('Resultado: ', plano)
Y en la consola veremos lo siguiente:
acc: , el: 1, acc.concat(el): 1
acc: 1, el: 2,3,4, acc.concat(el): 1,2,3,4
acc: 1,2,3,4, el: 5, acc.concat(el): 1,2,3,4,5
acc: 1,2,3,4,5, el: 6,7,8, acc.concat(el): 1,2,3,4,5,6,7,8
Resultado: [
1, 2, 3, 4,
5, 6, 7, 8
]
Por lo tanto el método de reduce recibe una función llamada reducer
la cual recibe como primer argumento el acumulador, y el segundo es el elemento que se esta iterando, y esta función devuelve el nuevo acumulador que se llama como argumento la siguiente forma, el método de reduce recibe como segundo argumento el cual es el valor inicial que tiene el acumulador:
- reducer =
(acc, el) => nuevoAcc
reduce(reducer, valorInicial)
Ahora como reto para ti es:
- Crear un arreglo de videojuegos, y indexarlo por el nombre de los videojuegos, debe tener las propiedades de: nombre, precio, genero. Ejemplo:
const games = [
{ nombre: 'Mario', precio: '$100', genero: 'Accion' },
{ nombre: 'Zelda', precio: '$200', genero: 'Accion' },
{ nombre: 'GTA', precio: '$300', genero: 'Accion' },
{ nombre: 'Fifa', precio: '$400', genero: 'Deporte' },
{ nombre: 'PES', precio: '$500', genero: 'Deporte' },
{ nombre: 'NFS', precio: '$600', genero: 'Deporte' },
]
- Tu segunda tarea es agregar una plataforma en una arreglo a cada videojuego, debes solo devolver el nombre del videojuego y la plataforma en un arreglo plano, ejemplo:
const games = [
{
nombre: 'Mario',
precio: '$100',
genero: 'Accion',
plataforma: [['Nintendo', 'Nintendo Switch', 'Nintendo 3Ds'], ['Wii', 'Wii U']],
},
{
nombre: 'Zelda',
precio: '$200',
genero: 'Accion',
plataforma: [['Nintendo', 'Nintendo Switch', 'Nintendo 3Ds'], ['Wii', 'Wii U']],
},
{
nombre: 'GTA',
precio: '$300',
genero: 'Accion',
plataforma: [['XBOX360', 'XBOX-ONE'], ['PS3', 'PS4', 'PS5'], 'PC'],
},
{
nombre: 'Fifa',
precio: '$400',
genero: 'Deporte',
plataforma: [['XBOX360', 'XBOX-ONE'], ['PS3', 'PS4', 'PS5'], 'PC'],
},
]
Top comments (4)
Mi solucion al ejercicio de filter:
Aquí mi solución del ejercicio 2 de Reducer
Muchas gracias por tu aporte!!
Buenisimo - muchas gracias