DEV Community

Cover image for Manipulaci贸n de Arrays en JavaScript 馃槑Part 1
Roger
Roger

Posted on

Manipulaci贸n de Arrays en JavaScript 馃槑Part 1

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:

[馃惀, 馃悇, 馃, 馃尳]
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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,
  },
]
Enter fullscreen mode Exit fullscreen mode

Ahora que tenemos los productos, primero debemos seleccionar el div en donde queremos renderizar nuestros productos:

const app = document.getElementById('app')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
    `
})
Enter fullscreen mode Exit fullscreen mode

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:

Resultado

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.

Ir A Indice 馃憜

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

[馃崯, 馃崝, 馃崡, 馃オ]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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('')
Enter fullscreen mode Exit fullscreen mode

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,
    },
]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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 ]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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 }
]
Enter fullscreen mode Exit fullscreen mode

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 
  }
})
Enter fullscreen mode Exit fullscreen mode

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 }
]
Enter fullscreen mode Exit fullscreen mode

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.

Ir A Indice 馃憜

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
[馃崯,馃嵖,馃崥]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
]
Enter fullscreen mode Exit fullscreen mode

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', ]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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'
]
Enter fullscreen mode Exit fullscreen mode

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'
]
Enter fullscreen mode Exit fullscreen mode

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,
  }
]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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 }
]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Si vemos esto en la consola veremos lo siguiente:

Productos disponibles y mayor a $250:  [ { nombre: 'Celular', precio: 300, disponible: true } ]
Enter fullscreen mode Exit fullscreen mode

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'))

Enter fullscreen mode Exit fullscreen mode

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 }
]
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

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 }
]
Enter fullscreen mode Exit fullscreen mode

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.

Ir A Indice 馃憜

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:

  1. El primero es un valor que esta siendo acumulado.
  2. 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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

En la consola nos devuelve el valor de:

3
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Y en la consola ver铆amos lo siguiente:

Acumulador: 0, Elemento: 1, Suma: 1
Acumulador: 1, Elemento: 2, Suma: 3
Resultado:  3
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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' },
]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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' }
}
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
]
Enter fullscreen mode Exit fullscreen mode

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:

  1. reducer = (acc, el) => nuevoAcc
  2. 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' },
]
Enter fullscreen mode Exit fullscreen mode
  • 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'],
  },
]
Enter fullscreen mode Exit fullscreen mode

Muchas Suerte 馃帀, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 馃憜

Aqu铆 termina la Parte 1, en las siguientes partes veremos las dem谩s formas de manipular los arreglos de JavaScript.

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ah铆 encontraras una gran variedad de tips y tutoriales.馃憠Tips y Tutoriales..

Top comments (4)

Collapse
 
rogerdimonte profile image
Roger

Mi solucion al ejercicio de filter:

const productos = [
  {
    vendedor: "Juan",
    producto: "Televisor",
    precio: 500,
    vendido: true
  },
  {
    vendedor: "Ana",
    producto: "Radio",
    precio: 100,
    vendido: true
  },
  {
    vendedor: "Pedro",
    producto: "Televisor",
    precio: 600,
    vendido: false
  },
  {
    vendedor: "Ramon",
    producto: "PC",
    precio: 1000,
    vendido: true
  },
  {
    vendedor: "Pedro",
    producto: "Telefono",
    precio: 800,
    vendido: false
  },
]

const producto = (query) => {
  let [vendedor] = productos.filter(producto => producto.vendido && producto.producto === query ? producto.vendedor : null)
  if (vendedor.length === 0) {
    return "Producto no encontrado o no vendido"
  }
  return vendedor.vendedor + " vendio el producto " + vendedor.producto
}

console.log(producto("PC"))
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rogerdimonte profile image
Roger

Aqu铆 mi soluci贸n del ejercicio 2 de Reducer

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'],
  },
]

const list = games.map(game => {
  plataforma = game.plataforma.reduce((acc, plat) => {
    return acc.concat(plat)
  }, [])
  return { 
    nombre: game.nombre,
    plataforma
  }
})
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rogerdimonte profile image
Roger

Muchas gracias por tu aporte!!

Collapse
 
josepedrolorenzini profile image
Jose_Lorenzini

Buenisimo - muchas gracias