Hablemos ahora del increíble operador de propagación.
Entonces podemos usar el operador de propagación
para expandir básicamente una matriz en todos sus elementos.
Básicamente, desempaquetando todos los elementos de la matriz a la vez.
Así que digamos que tenemos una matriz,
así que siete, ocho, nueve.
Y ahora queremos crear una nueva matriz basada en esta matriz
pero con algunos elementos nuevos al principio.
Entonces, ¿cómo haríamos eso?
Bueno, con lo que ya sabemos,
tendríamos que recorrer esta matriz,
o peor aún, hacerlo manualmente.
Por ejemplo, así.
Llamémoslo el Bad New Array.
Así que si quisiéramos sumar uno y dos
al comienzo de esta matriz,
tendríamos que escribir uno, dos,
y luego cada uno de estos elementos.
Así que eso sería arr. 0,
arreglo 1,
y arreglo 2.
Bien, echemos un vistazo.
Y ahora necesitamos obtener una nueva matriz
con los tres elementos originales
y luego un uno, dos al comienzo de esa matriz.
De acuerdo, y esto es bastante
una operación común que tenemos que hacer
y ahora podemos, desde ES6,
hazlo de una manera mucho mejor
utilizando el operador de propagación.
Así que con el operador de propagación,
va a funcionar así.
Así que vamos a crear una nueva matriz.
Así que esto es lo bueno, digamos New Array.
Y luego, de nuevo, usamos uno, dos,
y luego usamos el operador de propagación,
que es punto punto punto,
para expandir básicamente esta matriz
en todos sus elementos individuales.
Así que vamos a ver el resultado,
y luego te lo explico un poco mejor.
Así que nueva matriz, y verás que obtenemos
exactamente el mismo resultado aquí.
Entonces, ¿qué hace el operador de propagación?
es básicamente tomar todos los valores
fuera de este arr. formación,
y luego escribirlos individualmente
como si escribiésemos siete, ocho, nueve aquí manualmente.
Muy bien, si lo escribimos sin estos tres puntos,
entonces tendríamos esta matriz,
así que este arr. matriz dentro de esta.
Así que así.
Así que uno, dos y luego una serie de siete, ocho, nueve.
Y eso es porque aquí, estamos incluyendo
toda esta matriz.
Pero con el operador de propagación, de nuevo,
es como sacar todos los elementos de la matriz
y escribirlos aquí manualmente.
Entonces, cuando hacemos esto,
entonces obtenemos siete, ocho, nueve,
individualmente aquí, representados en esta nueva matriz.
Entonces, lo que esto significa es que podemos usar el operador de propagación
cada vez que de otro modo escribiríamos
múltiples valores separados por comas.
Y esa situación pasa
cada vez que escribimos un literal de matriz
como lo hicimos aquí arriba.
Así que esa es la primera situación en la que
es muy útil para expandir una matriz.
Y la segunda situación es
cuando pasamos argumentos a funciones.
Entonces, por ejemplo, digamos
que queríamos registrar los elementos individuales
de esta nueva matriz aquí.
Entonces, si simplemente registramos la matriz,
entonces, por supuesto, se verá así.
Es solo un valor con solo la matriz,
es solo un gran valor.
Pero si usamos el operador de propagación
para expandir la nueva matriz,
entonces a ver que pasa entonces.
Entonces ahora registró los elementos individuales de la matriz.
Así que esto sería lo mismo que escribir
uno, dos, siete, ocho, nueve individualmente.
Una vez más, siempre que necesitemos los elementos
de una matriz individualmente,
entonces podemos usar el operador de propagación.
Y eso es útil cuando escribimos una matriz
y cuando necesitamos pasar múltiples elementos
en una función como la que hicimos aquí.
Muy bien, veamos un ejemplo un poco más útil.
Entonces, en este ejemplo, crearemos una matriz
con un alimento más en la matriz del menú principal.
Entonces ese menú principal está aquí en el menú principal del punto del restaurante,
y básicamente queremos crear un nuevo menú aquí.
Así que const, nuevo menú, y luego digamos
que queremos la matriz original
más un elemento nuevo.
Entonces podemos hacer eso simplemente expandiendo la matriz,
así que ese es el menú principal del restaurante dot,
y luego podemos agregar otras cosas.
Así que digamos gnocci,
al menos así creo que se escribe
o pronunciado en italiano.
Y echemos un vistazo a nuestro nuevo menú,
y en efecto, tiene los tres elementos originales,
más los ñoquis.
Y tenga en cuenta que aquí, de hecho, estamos
creando una matriz completamente nueva, ¿de acuerdo?
Por supuesto, no estamos manipulando
la matriz del menú principal del punto del restaurante.
Así que estamos construyendo una nueva matriz desde cero,
y se puede ver que aquí por los corchetes.
Así que esta sintaxis de corchetes aquí es simplemente la forma
en el que siempre hemos estado escribiendo nuevas matrices.
Y aquí, nuevamente, estamos escribiendo una nueva matriz
pero simplemente basado en la expansión de esta matriz,
y luego agregarle otro elemento.
Bueno.
Ahora puede que hayas notado que el operador de propagación
es en realidad un poco similar a la desestructuración,
porque también nos ayuda a sacar elementos de los arreglos.
Ahora, la gran diferencia es que el operador de propagación
toma todos los elementos de la matriz
y tampoco crea nuevas variables.
Y como consecuencia, solo podemos usarlo
en lugares donde de otro modo lo haríamos
escriba los valores separados por comas.
Y, en caso de que estés tomando notas,
probablemente lo que acabo de decir sería muy útil
tener como nota.
A continuación, aprendamos sobre dos casos de uso importantes
del operador de propagación,
que es crear copias superficiales de matrices,
y para fusionar dos matrices juntas.
Así que digamos copiar matriz,
así que simplemente creemos una copia del menú principal.
Así que copie el menú principal, y escribamos una nueva matriz,
y en esa nueva matriz, pondremos todos los elementos
que se encuentran actualmente en el menú principal.
Así que en el menú principal del restaurante dot, y eso es todo.
Así que aquí acabamos de crear una copia superficial de esta matriz.
Eso es un poco similar a la asignación de puntos de objetos
que usamos en la sección anterior, ¿de acuerdo?
Pero aquí, esta sintaxis es mucho más fácil de usar.
Ahora, para unir dos matrices,
así que une dos matrices o más, por supuesto,
podemos usar la misma técnica.
Y quizás, llegados a este punto, ya puedas adivinar
cómo funcionaría eso, y así
puedes hacer esto, en realidad, como un desafío.
Así que pausa el video ahora mismo,
y crea este menú variable que será una matriz
que contiene todo el menú.
Así que tanto el menú principal como el menú de inicio.
Así que tómate un minuto y pruébalo por tu cuenta aquí.
Muy bien, así que espero que hayas logrado hacer eso.
Y entonces el secreto aquí, de nuevo,
es utilizar el operador de propagación.
Así que restaurante, y comencemos con el menú de entrada.
Así que ese será nuestro primer par de elementos.
en esta nueva matriz, y luego, por supuesto,
podemos usar el operador de propagación de nuevo,
y luego esta vez expandir el menú principal.
Menú principal de puntos.
Y ahora terminamos con una matriz
que contiene todos los alimentos que son a la vez
en el motor de arranque y el menú principal.
Y de nuevo, porque aquí, con este operador de propagación,
sacamos todos los elementos del menú de inicio
y básicamente los escribió aquí en esta nueva matriz,
y luego lo mismo con el menú principal.
Muy bien, les dije que el operador de propagación
funciona en matrices, pero eso no es del todo cierto,
porque en realidad, el operador de propagación
funciona en todos los llamados iterables.
Ahora, ¿qué es un iterable?
Bueno, hay diferentes iterables en JavaScript.
Y hablaremos de todos ellos.
al final del curso,
pero por ahora, solo sepa que los iterables
son cosas como todas las matrices, cadenas, mapas o conjuntos,
pero no objetos.
Básicamente, la mayoría de las estructuras de datos integradas
en JavaScript ahora son iterables, pero excepto objetos.
Así que déjame escribir eso aquí para ti.
Los iterables son matrices, cadenas, mapas y conjuntos,
pero no objetos.
Ahora de todos modos, dado que las cadenas también son iterables,
eso significa que podemos usar el operador de propagación
en una cuerda, también.
Así que déjame mostrarte eso rápidamente.
Así que vamos a crear una cadena rápida aquí, Jonas,
y luego quiero crear una matriz
que contiene todas las letras individuales,
además de algunos otros elementos.
Entonces, llamemos a esto letras,
y luego creamos una nueva matriz
y expanda la cadena aquí también.
Entonces aquí quiero una cadena vacía,
entonces aquí quiero una S,
y luego registrémoslo a través de la consola,
y ahora tendrá un poco más de sentido.
Muy bien, y de hecho, aquí tenemos esta matriz,
donde cada letra de la cadena original
ahora es un elemento individual.
Así como nos expandimos, desempaquetamos una matriz,
ahora hicimos lo mismo con una cuerda.
Ahora solo ten en cuenta
que todavía solo podemos usar el operador de propagación
al construir una matriz,
o cuando pasamos valores a una función.
Entonces, por ejemplo, también podemos hacer esto.
Así que expanda la cadena aquí,
y entonces es lo mismo que escribir esto.
Así que J, O, y así sucesivamente, ¿verdad?
Entonces, de hecho, aquí ahora tenemos todos los elementos individuales.
Muy bien, por ejemplo, lo que no podemos hacer
es usar esto para construir una cadena usando un literal de plantilla.
Así que aquí, esto no va a funcionar.
Y eso es porque este no es un lugar
que espera múltiples valores separados por una coma.
Así que ves un token inesperado, ¿de acuerdo?
De nuevo, varios valores separados por una coma
generalmente solo se esperan
cuando pasamos argumentos a una función,
o cuando construimos una nueva matriz.
Así que toma nota de eso,
porque eso es importante de entender
sobre el operador de propagación.
Bien, pero ahora suficiente con la construcción de matrices.
Ahora escribamos nuestra propia función
que acepta múltiples argumentos
y luego usar el operador de propagación
para pasar realmente esos argumentos.
Y ese va a ser un ejemplo muy real allí mismo.
Así que agreguemos aquí otro método ahora,
y entonces, digamos que queremos un método
para pedir solo pasta, ¿de acuerdo?
Y la pasta siempre necesita tener
exactamente tres ingredientes.
Así que digamos pedir pasta, y será una función,
y ahora aquí, necesitamos tres ingredientes.
Así que llamémoslos ing. 1, Ing. 2, e Ing. 3.
Y luego simplemente regístrelos en la consola, alguna cadena,
aqui esta tu rica pasta
con ing. 1,
En g. 2,
e ing. 3.
Así que aquí arriba, tenemos un error,
así que este debería ser el número tres.
Y luego, llamemos ahora a esta función.
Así que pide pasta.
Ahora lo que quiero hacer aquí
es realmente obtener estos ingredientes
desde una ventana de solicitud.
Así que recuerda la función de aviso que podemos usar,
y entonces vamos a crear una matriz llamada ingredientes.
Y cada elemento aquí será definido
por una ventana de solicitud.
Así que esto de aquí ahora no tiene nada que ver con
el operador de propagación,
es solo una forma de que podamos realmente
ingresar los datos nosotros mismos.
Así que digamos,
y aquí tenemos que escapar de esto,
Así que vamos a hacer pasta.
Ingrediente uno.
Y creo que no te mostré este escape aquí antes.
Así que aquí, cuando simplemente escribimos esta comilla simple aquí,
escribir vamos,
JavaScript piensa que estamos terminando esta cadena aquí.
Bien, entonces podríamos usar las comillas dobles aquí
o podemos escapar usando la barra invertida, ¿de acuerdo?
Ahora cuando guardamos esto, creo que más bonito
en realidad se deshará de esto aquí,
pero aún es importante saber que existe el escape.
Básicamente, esto enmascara esta comilla simple aquí,
para que no termine la cadena en este punto.
Así que guardémoslo.
Y así ves que ahora, la extensión Prettier
en realidad reemplazó la comilla simple con la comilla doble.
Y aquí ya vemos nuestro aviso,
pero vamos a crear dos más.
Así que digamos el ingrediente dos ahora,
y luego otro.
De nuevo, aquí estamos, simplemente construyendo una matriz
de los tres ingredientes.
Bien, y luego podemos registrarlo en la consola,
solo para ver A,
B y C.
Y así, de hecho, ahora obtenemos estos ingredientes de matriz
con A, B y C, que son las tres cuerdas
que acabamos de escribir allí.
Y ahora, ¿cómo deberíamos llamar
la funcion de pedir pasta?
Así que el restaurante no pide pasta.
Y a la manera antigua, ahora escribiríamos
ingredientes cero, ingredientes uno e ingredientes dos.
Pero, desde que aprendimos sobre el operador de propagación
en esta conferencia, ahora podemos hacerlo mucho mejor.
Y así, en cambio, hacemos esto.
Pasta de orden de punto de restaurante.
Y ahora, todo lo que tenemos que hacer es expandir
los elementos de la matriz de ingredientes,
y eso básicamente
escribir los tres elementos de la matriz
aquí separados por comas.
Entonces esto y esto deberían producir exactamente el mismo resultado,
y ahora vamos a probarlo con algunos datos reales.
Así que a ver, champiñones, espárragos y queso.
Y así, en estos, tenemos ahora dos veces,
aqui esta tu rica pasta
con champiñones, espárragos y queso.
¿Y cuál crees que es la mejor solución?
¿Este, o este?
Y especialmente considerando que una matriz
podría, por supuesto, ser mucho más largo
que solo tres elementos.
Así que de hecho, siempre ve con esto
sintaxis ES6 más moderna aquí.
Es una adición increíble al lenguaje.
Y ahora, solo para terminar esta conferencia aquí,
desde ES 2018, el operador de propagación
en realidad también funciona en objetos,
aunque los objetos no son iterables.
Así que vamos a escribir eso aquí.
Y aquí vamos a escribir un ejemplo del mundo real.
Y ahora vamos a experimentar con esto.
El primer ejemplo aquí fue crear
una nueva matriz basada en una matriz inicial, ¿verdad?
Y ahora vamos a crear también un nuevo objeto de restaurante.
con todos los datos del original
más algunos datos adicionales.
Y esta es realmente una manera increíble de hacer esto,
porque es mucho más fácil que con el viejo JavaScript.
Así que llamemos a este nuevo restaurante.
Y luego podemos simplemente difundir el viejo restaurante
y esto básicamente copiará todas las propiedades
del restaurante en este nuevo objeto.
Y luego podemos agregar lo que queramos.
Fundador, por ejemplo, digamos Giuseppe,
O Giuseppe, realmente no sé cómo decirlo.
Y, por supuesto, aquí el orden no importa como siempre.
Así que esta tirada aquí ni siquiera tiene que ser la primera.
Así que digamos que también queremos el año de fundación,
digamos 1998,
¿bueno?
Y así, con esto, creamos un objeto completamente nuevo.
Ahora tenemos que deshacernos de estos tres avisos allí,
porque de lo contrario, nos va a volver locos.
Pero vamos a sacar esto,
y simplemente registre aquí el nuevo restaurante en la consola.
Y de hecho, obtenemos nuestro objeto original básicamente,
más el fundador, y más fundado en.
Excelente.
Y finalmente, ya que pudimos hacer
copias superficiales de matrices, utilizando el operador de propagación,
podemos hacer lo mismo con los objetos.
Entonces, en lugar de usar la asignación de punto de objeto,
como lo hicimos en la lección anterior.
Así que hagamos eso.
Copia de restaurante.
Entonces, todo lo que tenemos que hacer es un objeto vacío.
y luego ahí expandir todos los elementos
del objeto original, por lo que el restaurante, en este caso.
Y ahora, si intentamos cambiar algo en la copia,
copiar el nombre del punto,
llamémoslo ahora Ristorante Roma,
y si eres italiano,
no te va a gustar cómo suena eso.
Pero de todos modos, ahora, mientras echamos un vistazo a ambos,
entonces el nombre de la copia y el original,
ahora verás que son diferentes.
Así que la copia tiene el nombre de Ristorante Roma,
y el viejo tiene Classico Italiano,
lo que significa que, en efecto,
hicimos una copia del restaurante original.
Porque de lo contrario, como aprendimos
al final de la sección anterior,
cambiar un objeto también cambiaría el otro.
¿Bien? Fresco.
Así que otra larga conferencia aquí,
pero estamos haciendo un gran progreso.
Y por supuesto, usaremos todo esto
en proyectos reales más adelante.
Pero nuevamente, elegí enseñarte estos conceptos.
de forma separada y no dentro de un gran proyecto,
porque esto me permite mostrarte
muchos más ejemplos diferentes
y también hace que el material sea más referenciable
para ti en el futuro.
Y eso va a ser útil
cuando intentas encontrar lo que buscas
después de tomar este curso.