SECCIÓN DE ARRAYS METHODS
Los array Methods hacen todo el trabajo pesado por ustedes, veamos algunos
métodos para arreglos:
.some
Digamos que queremos revisar si un valor existe en este arreglo de meses, por
ejemplo, si tiene el valor de enero o abril, hagamos lo siguiente:
Lo podemos hacer con un forEach, usando la sintaxis pero recordemos que para eso
le tendríamos que pasar cada índice de esta manera:
Pero si queremos ver que un mes existe usando forEach agregamos un if:
Pero eso está bien para una entrevista, pero en el mundo real con un arrayMethod
cómo lo haríamos?, usamos el siguiente por facilidad ya que son ejemplos que nos
pasarán en la vida real y lo resolveremos con métodos uno de ellos sería .includes:
Ahora .includes funciona sólo para el tipo de arreglo que tienen sólo un índice pero si
quisiéramos recorrer un arreglo que tiene objetos, .includes nos va a funcionar?
Aquí usaremos otro que se llama .some que su sintaxis es similar a un arrowFunction:
Ahora .some también podría servirnos para arreglos simples:
Archivo 2 .findindex
Nos permitirá saber en qué índice de nuestro arreglo se encuentra un elemento,
volveremos a copiar ambos arreglos, de hecho son los 2 escenarios que se les
pueden presentar con arreglos, UN ARREGLO DE ÍNIDICES Y UN ARREGLO DE
OBJETOS:
De nueva cuenta si se quiere saber en qué índice se encuentra un elemento usando
forEach hacemos lo siguiente:
Y si quiero saber en qué mes se encuentra Abril se hace de manera manual:
Pero usando findIndex es así:
Pero a diferencia de forEach que no me muestra nada si un elemento no existe, aquí
me muestra un -1 y eso quiere decir que no lo pudo encontrar.
Ahora intente comprobar alguno de los valores del arreglo de objetos (recuerde usar
la sintaxis de punto):
Ejercicio en clase:
Findindex sólo encuentra el primero.
Archivo #3 .REDUCE
Si ustedes buscan qué es .recude van a encontrar que es una función reductora y
pareciera clara la definición, pero básicamente es tomar una gran cantidad de datos y
unirlos y entregarles un resultado, supongamos que tenemos un carrito de compras:
Y tenemos que decirle al usuario cuánto tiene que pagar, con un forEach sería:
Otra forma sería hacerlo con un reduce aunque la sintaxis es diferente:
Donde reduce tiene 2 valores:
1) Total = viene siendo el valor anterior, es decir, cuando va en el primer valor
inicia en cero pero ya que suma 500 en la siguiente iteración tenemos que ir
acumulando sobre ese valor, por lo tanto el primero sería el valor previo que es
total y el siguiente sería el valor actual en este caso:
2) Producto = valor actual
Por eso pueden notar que es diferente a los demás. Y como el total inicia en cero MÁS
[Link], noten cómo solamente es MÁS y eso pasa como se va acumulando
en esa función no es necesario utilizar el +=. Ahora también podemos agregarle una
coma y el valor donde queremos que inicie en este caso CERO, pero puede ser otro
número. Reduce tiene más código pero es una solución un poco más moderna.
Archivo #4 - FILTER
Crea un nuevo arreglo basado en el parámetro que es evaluado, cómo así pues,
digamos que filter es más versátil que .findIndex porque permite hacer muchas
operaciones sobre mis arreglos, digamos que en este caso queremos traernos todos
los productos que cuesten más que 400 en nuestro carrito.
Y qué pasa si quiero ahora extraer todos los productos cuyo precio sea menor a 600?
Pues hacemos algo similar a lo de arriba:
Y utilizando estos métodos arraymethods se hacen esos buscadores como los de
AIRB&B donde pueden buscar por cuartos, por baños por piscina… etc… tendremos
un ejemplo práctico más adelante. Este utilizarán más junto con reduce.
Supongamos ahora que quiero traerme todos excepto los audífonos, una buena
forma de utilizar este filter por ejemplo para quitarlo de este carrito de compras,
supongamos que alguien ya en el DOM o en la página presiona en eliminar audífonos
y queremos sacarlo del arreglo entonces hacemos lo siguiente:
Ahora si quieren nada más esos audífonos pues le ponemos lo siguiente:
En esta carrera y este lenguaje usaremos mucho este .filter.
Archivo #5 - .FIND
Crea un nuevo arreglo basado en la condición que se está revisando. Veamos lo
siguiente:
Y con find
Muy importante conocer que .find sólo me retorna el PRIMER elemento que cumpla la
condición, es decir, aquí tenemos 2 que tienen el mismo precio y si quieren evaluar el
precio de esta forma:
Archivo #6 - .EVERY
Every pareciera un poco extraño ya que todos los elementos de un arreglo deben de
cumplir esa condición para que nos retorne un TRUE:
Si 1000 se cumple en todos los objetos nos va a retornar TRUE pero tiene que ser en
TODOS, entonces TODOS lo elementos con every deben de cumplir la condición.
Con .some al menos uno que cumpla la condición pero con .every todos deben
cumplirla, digamos que .every haría la función del AND y .some del OR.
Archivo #7 - .concat
Ahora veremos cómo unir dos arreglos, veamos los siguientes ejemplos:
Eso nos une los 2 arreglos, pero si agregamos un arreglo más cómo lo
concatenaríamos?, de esta forma:
Hay otra forma con el spreadOperator:
Si le agregamos lo siguiente:
Qué pasa si le agrego los 3 puntos?... como que clona y lo separa letra por letra.
También importa el orden cómo concatenemos
Archivo #8 – SpreadOperator
Muy importante saber que esta forma de concatenar no modifica el arreglo original,
hay algo que se llama programación funcional que veremos más adelante y en ella se
trata de evitar modificar el arreglo o datos originales y eso es una buena forma de
hacerlo, me refiero por ejemplo a hacer lo siguiente:
El arreglo no se modifica
Pero cuál sí lo modifica
Ahora hagámoslo con un arreglo de objetos:
Recuerden no poner los 3 puntos en el otro arreglo de objetos ya que marcaría error.