Comencemos esta sección
aprendiendo sobre la desestructuración de arreglos.
Entonces, como dije en el video de introducción,
en esta sección básicamente vamos a seguir aprendiendo
sintaxis básica y características básicas de JavaScript,
pero ahora con un enfoque en JavaScript más moderno.
Y el tema de esta sección
será para simular una aplicación de parto a pie.
Y en concreto un restaurante italiano
¿Cuál es este dato inicial aquí?
que ya tenemos en los archivos de inicio.
Y entonces este se llama Classico Italiano.
Así que ya abrí los archivos de inicio aquí
para este proyecto.
Bueno.
Ahora aprendiendo temas complejos
como los que vamos a abordar en la sección
es realmente mejor hacerlo de forma aislada.
De esta manera puedes entender exactamente
lo que estoy tratando de enseñarte
sin tener que pensar en
otras cinco cosas al mismo tiempo.
Y entonces estoy aislando solo este restaurante
y sin construir una interfaz de usuario
para que podamos centrarnos solo en el lenguaje JavaScript aquí.
Y algunas personas dirán que esto es aburrido
pero créanme, tengo suficiente experiencia en la enseñanza
saber que algunos temas se aprenden mejor de forma aislada.
y para mi lo mas importante
es que realmente aprenderás en este curso.
Ahora, por supuesto,
también hay temas que se pueden aplicar
a un proyecto visual.
Y es por eso que en la siguiente sección,
tenemos un proyecto realmente genial
con una increíble interfaz de usuario
donde vamos a aprender sobre los métodos de matriz,
pero por ahora centrémonos en las estructuras de datos integradas
y operadores avanzados modernos.
Y nuevamente, comenzando con la desestructuración de la matriz.
Así que la desestructuración es una característica de ESX
y es básicamente una forma de descomprimir valores
de una matriz o un objeto en variables separadas.
En otras palabras, desestructurar
es romper una estructura de datos compleja
en una estructura de datos más pequeña como una variable.
Así que para arreglos usamos desestructuración
para recuperar elementos de la matriz
y almacenarlos en variables de una manera muy fácil.
Entonces, comencemos con una matriz muy simple.
Y ahora si quisiéramos recuperar cada uno
en su propia variable sin desestructurar,
lo haríamos así.
Digamos que quisiéramos nombrarlos AB C.
Y entonces escribiríamos el nombre de la matriz,
que olvidé por completo aparecer.
Entonces nuestro cero y luego simplemente duplicar esta línea
que estoy usando el comando o la opción L cuatro.
Y no estoy seguro de si eso es realmente un atajo en el código VS.
Déjame ver aquí.
Y al parecer no lo es, veamos aquí la selección duplicada.
Así que es esta selección duplicada aquí
y puede configurar un acceso directo para eso.
Y entonces solo haré eso.
Entonces B y ese sería el elemento número uno.
y el número dos sería C.
Así es como recuperaríamos estos tres elementos.
Pero ahora con la desestructuración
en realidad podemos declarar las tres variables
al mismo tiempo.
Así que déjame mostrarte cómo tan constante
y luego usamos los corchetes.
Y eso es porque estamos, desestructurando una matriz.
Y ahora podemos declarar tres variables al mismo tiempo.
Y ahora no estoy usando AB y C
porque ya los usamos.
Así que vamos con XY y Z,
y luego simplemente estableceré eso igual a la matriz.
Y eso es.
No, vamos a verlos ahora en la consola.
guárdelo, y luego necesitamos iniciar nuestro servidor en vivo
con un nuevo terminal.
Y de hecho puedo presionar la tecla de tabulación ahora
y luego escribirá automáticamente
el resto del comando,
luego cierra eso.
y como puedes ver
aquí llegamos a dos resultados, dos, tres y cuatro.
Así que los elementos de la matriz.
Así que básicamente escribimos esta sintaxis aquí
y luego esto se convertirá en el primer elemento de la matriz,
este el segundo y este el tercero.
Y entonces esto aquí está desestructurando esta matriz aquí
desde el lado derecho.
Bueno.
Y, por supuesto, esto parece una matriz, pero en realidad no lo es.
Es solo la tarea de desestructuración.
Entonces, cada vez que JavaScript vea esto aquí en el lado izquierdo
del signo igual, sabe que debe desestructurar.
Ahora, cuando hagas esto, no olvides
para declarar también las variables usando const.
Bueno.
Y también quería notar que
a pesar de que hicimos la desestructuración
que suena un poco distractor, ¿verdad?
La matriz original, por supuesto, no se ve afectada.
Bien, entonces no estamos destruyendo aquí la matriz.
solo estamos desestructurando, así que lo estamos desempacando, ¿de acuerdo?
Y ahora trabajemos un poco con los datos
de nuestro restaurante.
Así que aquí vemos que en realidad tenemos un par de arreglos.
Así las categorías, el menú de inicio y el menú principal.
Así que saquemos algunos elementos de las categorías.
entonces digamos
y luego la tarea de desestructuración
Primero y segundo, bien.
Y ahora ves aquí
que no tenemos que tomar todos los elementos
fuera de la matriz.
Entonces esto solo tomará el primero y el segundo.
Así que simplemente seguirá el orden de los elementos aquí.
y básicamente solo tomaremos estos dos.
Y ahora la matriz de la que queremos extraer
y eso es restaurant.categories.
Solo para echar un vistazo ahora
y de hecho tenemos comida italiana y pizzería
que son exactamente los dos primeros elementos de la matriz.
Pero ahora digamos
que solo queríamos llevarnos la primera categoría.
Así que este y un tercero.
Así que digamos que esta es la categoría principal
y este es el secundario por alguna razón.
Bueno, para hacer eso
simplemente dejamos un agujero en el operador de desestructuración.
Así que lo que quiero decir es sólo esto.
Y ahora se omitirá el segundo elemento.
al que iria aqui
y luego este segundo año simplemente se convierte en este tercer elemento.
Y ahora, para que lo veas un segundo ahora es vegetariano
que es el elemento número tres bien.
Y así, no tenemos que crear variables.
para todas las cosas que quizás ni siquiera necesitemos.
Entonces, si solo necesitamos tomar esto y esto,
simplemente omitimos el elemento en el medio, está bien.
Y esto es realmente poderoso.
Y usamos la desestructuración para hacer muchas cosas geniales.
Por ejemplo, digamos que el dueño
del restaurante ahora decidió cambiar el principal
y la categoría secundaria.
Así que ahora mismo la primaria es italiana.
y la secundaria es vegetariana
pero ahora querían cambiarlo.
Así que primero cambiemos el nombre aquí.
a principal y secundaria, solo para hacerlo un poco más obvio.
secundario.
Y si tuviéramos que cambiar estas dos variables,
entonces sin desestructurar,
tendríamos que hacerlo así.
Necesitaríamos crear una variable temporal,
y luego para que asignáramos uno de ellos,
así que digamos principal,
y luego podríamos cambiar a main.
Diríamos que principal es igual a secundario.
y luego secundario es igual a temp
porque ahí es donde almacenamos temporalmente
el valor de main, ¿verdad?
No podíamos simplemente hacer principal igual secundario
y luego secundario es igual a principal
porque para entonces ya habríamos sobreescrito
la variable principal, ¿verdad?
Y es por eso que necesitamos esta variable temporal
en el centro.
Así es como lo haríamos,
pero con la desestructuración podemos hacerlo mucho más fácil.
Y así es como lo hacemos.
Primero, creamos una matriz con ambos
y el primero va a ser el secundario
y luego el segundo será el principal.
Y en realidad, antes de hacer eso
déjame mostrarte que esto funcionó.
Entonces principal y secundaria
y ahora deberíamos verlos cambiados.
Ah, okey.
Aquí, tenemos que cambiar de rumbo, para dejar,
porque estamos reasignando aquí a una const en la línea 24.
Así que intentemos eso ahora.
Y efectivamente, lo que era italiano ahora es vegetariano
y lo que era vegetariano ahora es italiano.
Así que este año funcionó, pero ahora eliminemos esto.
para que podamos hacerlo usando la desestructuración.
Entonces, como decía, para cambiar a dos variables
usando la desestructuración, primero comenzaríamos
creando una nueva matriz con las dos variables invertidas.
Así que primero secundario y luego principal,
y luego podemos simplemente distraerlos.
Así que principal y secundario es igual a la desestructuración
de esta matriz.
Y ahora no estamos usando let o const aquí
porque simplemente estamos reasignando los valores
de las dos variables.
Así como lo hicimos aquí,
pero ahora no necesitamos una variable temporal en el medio.
Así que vamos a comprobar ahora.
Y de hecho el resultado es el mismo, pero esto es mucho más fácil.
Y este es un truco aquí que en realidad uso todo el tiempo.
Así que déjame mostrarte aquí
o en realidad escriba aquí, cambiando variables.
Bueno.
Así que ese es un truco muy bueno.
Y otro truco con la desestructuración
es que podemos tener una función, devolver una matriz
y luego podemos destruir inmediatamente el resultado
en diferentes variables.
Y esto básicamente nos permite devolver múltiples valores.
de una función.
Entonces intentemos eso y escribamos una función para pedir comida.
Así que aquí en nuestro restaurante
ahora agreguemos un método
y voy a llamarlo orden.
Así que esta será una función.
y aceptará dos parámetros.
un índice para el menú de inicio.
Así que este menú y luego un índice para el menú principal.
Y luego la persona ordenará básicamente
dando el índice para comer de los menús.
Así que algo muy simple sólo para ilustrar el punto aquí.
Así que digamos el índice de inicio y el índice principal.
De acuerdo, entonces simplemente regresaremos ahora.
el contenido de las matrices en función de los índices dados.
Así que vuelve y así, como dije,
vamos a devolver una matriz y luego vamos a
this.startermenu está bien.
Y recuerda cómo se establece esta palabra clave aquí
como aprendimos en la última sección.
Y ahora vamos a la posición del índice de inicio.
que pasamos a la función.
Bien, ¿eso tiene sentido?
Luego lo mismo con el menú principal.
en la posición del índice principal que ha pasado.
Está bien.
Así que aquí estamos, por supuesto, sin hacer ninguna desestructuración todavía.
pero ahora es el momento en que lo haremos.
Así que llamemos orden o, de hecho, restaurante.pedir
y usemos dos y cero.
Entonces queremos el elemento número dos del menú de inicio.
Así que el pan de ajo y el número cero del menú principal,
que es pizza.
Así que vamos a recibir una matriz con eso, ¿verdad?
Déjame mostrarte eso.
Y de hecho es pan de ajo y pizza.
Y ahora podemos simplemente distraer eso.
Así que esta es la tarea de desestructuración.
Y entonces digamos arranque y principal
debe ser igual a estos dos resultados.
Así que eso los registró como motor de arranque y principal.
Ah, y ahora esto ya estaba definido antes.
Así que llamemos a este de aquí, el plato principal.
Y ahora sí, tenemos el pan de ajo y la pizza.
Muy bien, así es como básicamente recibimos
dos valores de retorno de una función.
Bien, entonces por supuesto
podríamos haber hecho eso sin desestructurar
y todavía devolver una matriz de la función,
pero esta es una forma muy práctica
de luego crear inmediatamente dos variables
fuera de una llamada de función.
Bueno.
Y ahora que entiendes cómo funciona la desestructuración
demos un paso más allá
porque ¿qué sucede si tenemos una matriz anidada?
Así que digamos anidado
y con anidado, nos referimos a una matriz dentro de otra.
entonces digamos
que sabemos aquí tienen otra matriz, cinco y seis.
Entonces, una matriz dentro de una matriz.
Y no estoy seguro si hicimos eso antes,
pero por supuesto eso es perfectamente aceptable.
Entonces como un pequeño ejercicio
¿Cómo podemos obtener este valor aquí y toda esta matriz?
Bueno, simplemente definimos dos nuevas variables
utilizando la asignación de desestructuración
y llamémoslos I y J
y recuerda que no queremos en el medio,
así que simplemente lo salteamos.
Así que simplemente deja un espacio y luego otra coma.
y luego este va a ser J
es igual a dos la matriz de la que deben tomarse.
Y de hecho obtenemos el número dos.
y luego la matriz cinco y seis.
Genial, pero ¿y si realmente quisiéramos
todos los valores individuales?
Bueno, entonces esencialmente
tiene que hacer la desestructuración dentro de la desestructuración.
Eso suena complicado, pero no lo es.
Así que saquemos estos aquí
y vamos a crear ahora tres variables.
Entonces uno para este uno para los cinco y uno para los seis.
Así que vamos a saltarnos los cuatro de nuevo.
Así que voy a ser yo entonces otra vez todo aquí
y ahora aquí podemos destruir
esta matriz interna inmediatamente.
Entonces usamos la reestructuración aquí nuevamente
en ahora J para el primer elemento y K para el segundo.
Así que cuatro, cinco y seis.
y luego otra vez
la matriz de la que tomar, y luego echemos un vistazo.
Y ahora esto debería darnos dos, cinco y seis.
como variables separadas.
Y sí, así es como funciona la desestructuración anidada.
Básicamente tenemos que hacer la desestructuración
dentro de la desestructuración.
Bueno.
Y ahora para terminar solo hay otra característica
de desestructuración que quiero mostrarles.
Entonces también podemos establecer valores predeterminados
para las variables cuando las estamos extrayendo.
Y eso va a ser muy útil en el caso
que no sabemos la longitud de la matriz,
y esto a veces puede suceder en aplicaciones del mundo real,
como verás más adelante.
Entonces, si tenemos una matriz que es más corta de lo que pensamos,
entonces podríamos intentar desempaquetar la matriz
en puestos que ni siquiera existen.
Así que permítanme decir aquí solo valores predeterminados
y aquí anida la desestructuración.
Así que estoy aprendiendo muchas cosas aquí sobre la desestructuración.
Y ahora digamos que tenemos esta matriz
ocho y nueve,
y luego estamos tratando de distraerlo.
Así que finge
que en realidad no conocemos bien la matriz.
Y entonces podríamos tratar de tomar
tres elementos fuera de la matriz utilizando nuevamente la desestructuración
así que llamémoslos PQ y R.
Y luego intentemos bloquearlos todos PQ y R.
Y ahora aquí nos quedamos indefinidos como el tercero.
Así que esto sería básicamente lo mismo.
como tratando de leer el elemento en la posición número dos
de esta matriz
pero solo tiene elementos en la posición cero y uno.
Y entonces, por lo tanto, nos quedamos indefinidos.
Pero como dije, podemos establecer valores predeterminados.
Entonces eso es simplemente configurarlos todos en uno
y entonces, nuestra R se convertirá en uno.
Excelente.
Y si eliminamos este elemento, Q también se convertirá en uno.
Bueno.
Y como dije, esto a veces puede ser útil.
Por ejemplo, cuando obtenemos datos de una API.
Y entonces probablemente usaremos este
y en realidad todo lo que hicimos en su conferencia
un poco más tarde en el curso.