Ahora, antes de que puedas empezar a construir
cualquier aplicación React significativa,
necesitas ser un verdadero maestro
de los tres métodos de matriz funcional en JavaScript
que son mapear, filtrar y reducir.
Y los llamo métodos de matriz funcional.
porque estos métodos no mutan la matriz original
pero en su lugar devuelve una nueva matriz basada en la original.
Entonces, en esta conferencia, comencemos
echando un vistazo al método del mapa.
Y para empezar, eliminemos todo este código aquí.
porque ya no lo necesitamos ahora
porque a partir de ahora empezaremos a trabajar
con toda la gama de libros.
Así que déjame sacar eso, guardarlo.
y luego aquí tenemos todo este panel
y esta salida de Quokka aquí se limpió un poco.
Así que nuevamente pretendamos que estamos recibiendo nuestros libros.
desde esta API ficticia utilizando la función getBooks.
Entonces digamos getBooks.
Y entonces recuerda
que esto nos dará toda la matriz de libros.
Y ahora estamos listos para usar el método map en esa matriz.
Entonces, ¿qué hace realmente el método del mapa?
Bueno, básicamente, el método map recorrerá una matriz
y devolver una nueva matriz
con la misma longitud con alguna operación aplicada
a cada uno de los elementos de la matriz original.
Así que sólo para ilustrar eso,
digamos que tenemos esta matriz muy simple
y sobre eso, podemos llamar mapa.
Y ahora map espera una función de devolución de llamada,
que es una función que se llamará
para cada uno de estos elementos de la matriz.
Y ahora aquí están estas funciones de flecha de las que hablamos.
acerca de antes se vuelve realmente útil,
porque ahora podemos simplemente usar una función de flecha aquí,
por ejemplo, así.
Y explicaré en un segundo qué hace esto.
Pero por ahora, echemos un vistazo al resultado aquí.
En realidad, guardemos esto en alguna variable.
Y lo que ves aquí es que obtenemos una matriz,
que es básicamente el doble de la matriz anterior.
Entonces, ¿qué pasó aquí?
Nuevamente, pasamos esta función de devolución de llamada,
que es una función que se llama para cada
de los elementos de esta matriz.
Y en esta función de devolución de llamada, el parámetro del elemento
siempre será el elemento actual de la matriz.
Entonces, para este primer elemento aquí, el se convertirá en uno.
Y luego aquí simplemente devolvemos uno por dos, que es dos.
Entonces eso se coloca en la matriz y seguimos adelante.
al siguiente.
Entonces aquí tenemos dos.
Por lo tanto, el elemento se convierte en dos, dos por dos son cuatro.
Y eso luego se coloca en la matriz.
y así, llega hasta el final
hasta el final de la matriz.
Y así de nuevo,
el método del mapa es básicamente crear una nueva matriz
basado en la matriz original con alguna operación aplicada
a cada elemento de la matriz original.
Entonces esto fue solo una demostración aquí.
pero ahora lo que quiero hacer es crear una matriz
que contiene simplemente todos los títulos de todos los libros.
Entonces, en lugar de tener esta enorme variedad,
que contiene todos estos objetos,
Todo lo que quiero es una matriz, que simplemente tenga todos los títulos.
Entonces digamos que títulos es igual a libros.mapa.
Y ahora de nuevo, nuestra función de devolución de llamada.
Y aquí, llamemos libro a cada elemento.
porque bueno, tenemos la matriz de este libro,
lo cual está bien, en realidad no es nada.
Y eso es porque tenemos esta flecha aquí.
Devuelvamos algo aquí para que termine la flecha.
No. Ah, pero sí, de todos modos este no es el conjunto de libros.
Sí, aquí tenemos esta matriz con todos estos objetos.
Y ahora, mientras recorremos esta matriz,
cada uno de los elementos es un objeto de libro, ¿verdad?
Entonces este es el argumento de la función.
Y luego recordar es lo que volvemos.
Entonces, ¿qué queremos devolver?
Bueno, simplemente, libro.título.
Ahora que revisamos qué son los títulos,
vemos que es esta matriz, que solo contiene los títulos.
hermoso. Entonces eso fue bastante simple, ¿verdad?
Por lo tanto, la operación, por supuesto, no tiene por qué ser
como una operación matemática como esta.
Aquí simplemente lo que volvemos
para cada elemento del libro es libro.título.
Y eso luego se coloca en la matriz.
Entonces la nueva matriz de salida,
que luego se almacena en estos títulos.
Bien, veamos otro ejemplo.
Y digamos que básicamente queríamos solo
Obtenga los datos esenciales para cada uno de estos objetos del libro.
Entonces queremos una matriz con objetos todavía, pero ahora solo queremos
como el título y el autor tal vez.
Entonces digamos datos esenciales
debería ser libros.mapa.
Y nuevamente, llamo a cada uno el libro.
Y ahora aquí lo que queremos devolver es un nuevo objeto,
que contiene, nuevamente, el título y el autor.
Ahora, en una función de flecha,
Cada vez que usamos estas llaves como esta,
la función de flecha pensará
que este es un bloque de declaración, ¿no?
Entonces esto no es devolver un objeto.
Entonces, si escribimos como x: 23,
esto no devolvería nada
porque nuevamente, la función de flecha simplemente piensa
que este aquí es el bloque de funciones.
Entonces podemos resolver esto de dos maneras.
Primero, simplemente podemos devolver el objeto.
desde aquí manualmente.
Entonces ahora podemos decir que el título es libro.título
y el autor es libro.autor.
Echemos un vistazo a eso.
Y sí, eso funciona.
Ahora para cada uno de los libros,
solo tenemos el autor y el título y nada más.
Eso funcionó, eso es genial.
Pero sí, aquí tenemos demasiado código.
Así que deshagámonos de este retorno nuevamente.
Y entonces el truco es simplemente envolver esto aquí.
entre paréntesis.
Entonces no necesitamos nada de esto.
Y ahora eso funciona igual.
Y entonces, usando estos paréntesis primero
de las llaves, entonces nuevamente somos automáticamente
devolviendo este objeto desde aquí.
Entonces, al igual que aquí, devolvemos el resultado.
de esta operación
y aquí devolvemos simplemente este valor aquí mismo.
Y por supuesto, también podríamos hacer algunos cálculos aquí.
Por ejemplo, digamos que queremos el número de reseñas.
Ahora aquí podríamos recuperar esta función que hicimos antes.
Copiemos eso.
Y luego llamemos a getTotalReviewCount
para el libro actual.
Y ahora, sí, obtenemos todos los datos que queríamos,
pero nuevamente son solo los datos esenciales,
Básicamente solo una pequeña parte de los datos totales.
que teníamos antes en la matriz de libros.
Estos son sólo algunos casos de uso que se convertirán en
útil para el resto del curso de React.
Y si esto fue quizás demasiado rápido,
Entonces, si no conocías este método de mapa antes
y aún no lo entendiste del todo,
eso es comprensible porque esto era más
de un curso intensivo sobre este método de mapas.
Y si de alguna manera aún no te ha hecho clic,
puedes consultar la documentación en MDN.
O por supuesto, también puedes consultar
mi curso completo de JavaScript
porque ahí te lo explico todo con mucho más detalle.
Pero para esta breve introducción, esto debería ser suficiente.
Y ahora sigamos adelante
al siguiente método importante, que es el método de filtrado.