Así que comencemos esta sección de revisión de JavaScript.
con el concepto muy importante de Desestructuración.
Y como siempre, empezaré creando una nueva carpeta aquí.
que simplemente llamo Revisión de JavaScript.
Y luego necesitamos obtener nuestros archivos de inicio.
del repositorio de GitHub que ya descargamos
al inicio del curso.
Entonces, seleccionemos script.js aquí desde la carpeta de inicio.
Y luego peguemos eso
en la carpeta del proyecto que acabamos de crear.
Y ahora para abrir esta carpeta,
Simplemente arrastraré y soltaré esta carpeta en el código VS.
Puedo escribir aquí, que luego lo configura como la carpeta del proyecto.
Y alternativamente, si eso no funcionó por alguna razón,
Por supuesto, siempre puedes abrir una carpeta de proyecto.
simplemente haciendo clic aquí en abrir, ¿verdad?
Pero de todos modos, abramos script.js aquí.
Y como vemos ya contiene algunos datos iniciales.
Entonces tenemos esta matriz aquí
que contiene cinco objetos de libro.
Entonces tenemos un objeto para cada libro.
que tiene un título, una fecha, etc.
Entonces, todo lo relevante sobre los libros.
Y luego también creé dos funciones aquí abajo.
Así que este Obtener Libros básicamente simplemente regresará
estos datos aquí, y luego tenemos Obtener libro por identificación
que básicamente simplemente devuelve el libro con
el ID que pasamos aquí.
Muy bien, nuevamente, esta conferencia trata sobre la desestructuración.
Y para empezar, creemos una variable llamada libros.
que simplemente será el resultado de llamar a Obtener libros.
Ahora, para ejecutar realmente este código, ahora
Utilice una extensión especial para eso, que se llama Quokka.
Así que sigue adelante y descarga esta extensión.
lo que nos permitirá ejecutar código JavaScript directamente dentro
del código VS.
Entonces sin que tengamos que conectar este script
con algún archivo HTML, por ejemplo.
Muy útil.
Y luego, para iniciar Quokka en este archivo, podemos venir
a nuestra plataforma de comando, que está aquí abajo, o simplemente
puedes usar este atajo de teclado.
Entonces deberías memorizar esto porque este comando
La paleta es realmente útil todo el tiempo.
Entonces, para iniciar Quokka ahora en este archivo, simplemente escriba Quokka
y escríbalo correctamente y luego comience.
Entonces es este.
Entonces comience en el archivo actual, presione Enter y verá
que inmediatamente abrió este panel aquí abajo.
Entonces en esta pestaña de salida
y también activó esta herramienta aquí en el lado izquierdo.
Y ahora este código ya se está ejecutando.
pero para ver todo lo que podamos, por ejemplo
simplemente escribe ahora esta variable.
Entonces estos libros que ya tenemos
y lo imprimirá inmediatamente
aquí abajo a este tipo de consola.
Aparecerá aquí en el lado izquierdo.
entonces en esta extensión aquí, en esta pestaña.
Y también se muestra aquí dentro de este archivo.
Entonces esto es realmente útil.
especialmente para valores más pequeños.
Entonces cuando tienes un objeto
es más fácil comprobarlo aquí en esta barra lateral.
Entonces aquí podemos ver toda esta matriz.
y todos los objetos que hay allí.
bueno. Y ahora con toda la configuración en su lugar
De hecho, hablemos rápidamente sobre la desestructuración.
Entonces la desestructuración es muy útil todo el tiempo.
siempre que necesitemos básicamente obtener algunos datos de un objeto
o fuera de una matriz.
Entonces, por ejemplo, digamos que necesitábamos el título y el autor.
de un determinado libro, y para demostrarlo,
De hecho, usemos obtener libro aquí con alguna identificación.
Por ejemplo, identificación 2.
También se llama aquí.
Sólo reserva.
bueno.
Y ahora otra vez si quisieras llevarte el título
fuera de este objeto de libro,
entonces digamos que queremos crear una nueva variable
llamado título.
Podríamos hacer book.title, ¿verdad?
Y ahora usando la extensión Quokka, podemos ver
que el título es The Cyberiad o algo así.
Y efectivamente, si vamos aquí al libro con el ID 2
entonces obtenemos exactamente ese título, ¿verdad?
Y por supuesto podemos sacar otros datos de esto.
Por ejemplo, digamos que también queremos que el autor
haríamos libro.autor.
Y luego aquí, veamos eso.
bueno. Y por cierto, también podemos simplemente hacer el registro de puntos de la consola.
que obtendrá un resultado similar.
De nuevo, este autor aquí, pero luego podemos hacer múltiples
al mismo tiempo, lo que puede resultar un poco más útil.
Ahora, leyendo datos del objeto libro.
algo así puede volverse un poco engorroso, especialmente
cuando tenemos muchas propiedades que necesitamos sacar.
Entonces tendríamos que escribir una línea de código para cada
de estas propiedades.
Entonces eso realmente no es ideal.
Y es por eso que tenemos la Desestructuración de Objetos.
Entonces, en la Desestructuración de Objetos, simplemente podemos crear
estas nuevas variables todas a la vez.
Entonces digamos nuevamente título y autor.
Y ahora mismo vs code se queja porque ya estamos
definiéndolos aquí
pero no importa eso por ahora.
Y entonces aquí simplemente especificamos el objeto.
del cual queremos sacar el título y el autor.
Y eso es todo.
Así que comentemos estos dos y luego veremos
que obtenemos exactamente los mismos resultados aquí abajo.
Ahora aquí, lo que es crucial es
que realmente le damos a estas variables nombres aquí
exactamente el mismo nombre que las propiedades del objeto.
Entonces, si tuviéramos títulos aquí, eso no funcionaría.
Entonces verás que aquí no estaría definido, y eso es
porque no hay ninguna propiedad de títulos en el objeto del libro.
¿bueno? Realmente muy útil todo el tiempo.
especialmente cada vez que obtenemos algunos datos de una API
que es básicamente lo que estamos simulando aquí
con esta función de obtención de libro.
Entonces, por supuesto, esta no es una función asincrónica.
pero simula que estamos obteniendo este libro de algún tipo
de API que se abstrae detrás de esta función.
Y entonces, una vez que obtenemos esos datos generalmente como un objeto
Entonces podemos desestructurar todas las propiedades.
de ahí lo que necesitamos.
Y de hecho, saquemos algunas propiedades más.
hagamos páginas, hagamos la fecha de publicación
hagamos los géneros.
Creo que así se llama.
Y ahora tiene la adaptación cinematográfica, ¿verdad?
De nuevo, básicamente bloqueemos el libro aquí.
para que podamos tenerlo aquí en esta barra lateral izquierda.
Y entonces aquí con esto.
podemos ver fácilmente todas las propiedades que están
dentro del objeto libro.
Y estos son los que estoy tomando
ya disponible básicamente fuera del libro
y almacenarlos en sus propias variables.
Y entonces no hay necesidad de encerrarlos a todos aquí ahora, está bien.
Así es como funciona esta desestructuración en pocas palabras.
Para los objetos, en realidad hay algunas cosas más que podemos hacer.
pero no entraré en eso aquí.
Y en cambio, pasemos ahora a la Desestructuración con una carrera,
que es bastante similar
pero en lugar de confiar en los nombres de las propiedades
simplemente depende del orden de los elementos de la matriz.
Entonces, por ejemplo, veamos la matriz de géneros.
Así que lo bloquearemos aquí.
para que podamos ver cómo se ve esta matriz.
Entonces esta es la matriz con la que vamos a trabajar.
y tiene los cinco géneros a los que pertenece el libro.
Y entonces digamos que estos géneros aquí
están básicamente ordenados por importancia.
Y entonces el género principal es este,
este es el secundario
Y estos otros no son tan importantes.
Entonces digamos que queremos crear una variable
llamado género primario.
No estoy seguro si estoy diciendo eso bien
pero eso realmente no importa.
Entonces podríamos hacer géneros y luego eliminar el primer elemento.
Y luego, para el género secundario, podríamos simplemente hacer esto.
Registrémoslo en la consola.
Y aquí de nuevo, estoy usando
ese fragmento que definimos en el apartado anterior.
¿recuerda eso?
Entonces género primario y el secundario.
Y así, efectivamente, tenemos ciencia ficción y humor, pero de nuevo
Esto se puede hacer mejor usando la desestructuración.
Entonces usemos la desestructuración.
Entonces definiendo algunas variables.
Y luego aquí, en lugar de las llaves para el objeto
Usamos estos corchetes, que es como definimos una carrera.
Ahora aquí, género primario y secundario.
Y luego simplemente géneros iguales,
guárdalo.
Y aquí tenemos exactamente el mismo resultado.
Básicamente, la primera variable que definimos aquí
esto de esta manera, en esta desestructuración
sacará el primer elemento de la matriz
y asignarlo a esta variable.
Y luego aquí, por supuesto, el segundo.
Entonces saca el segundo elemento.
de la matriz y lo asigna a esta variable.
Y por supuesto podríamos seguir adelante.
pero aquí solo nos interesa
en el género primario y secundario.
Entonces tomamos estos dos
fuera de esta matriz mediante el uso de desestructuración de matrices.