Ahora sigamos, aprendamos rápidamente.
sobre el resto y el operador de spread.
Y volvamos aquí a esta línea de código.
donde hicimos la desestructuración en la conferencia anterior.
Entonces, eliminamos este género principal.
y el género secundario fuera de este conjunto.
Y ahora digamos
que también queríamos incluir todos los demás géneros,
entonces los que no son los primeros
y el segundo en otra matriz,
básicamente en una matriz que contiene todos los demás géneros.
Y para eso podemos usar el operador rest.
Entonces aquí podemos simplemente escribir, punto, punto, punto.
y luego darle el nombre que queramos.
Entonces digamos otros géneros.
Y entonces esto creará automáticamente una matriz.
que contiene todos los valores que no tenemos
previamente desestructurado.
Así que registremos eso aquí.
Y efectivamente, aquí está.
Entonces sacamos la ciencia ficción y el humor.
que recuerdan es el primero y el segundo,
y luego obtuvimos una matriz con el tercero, el cuarto
y el último.
Exactamente lo que queríamos.
Y, por supuesto, si aquí no tuviéramos este, entonces
Estos otros géneros también contendrían el género secundario.
Entonces aquí solo estaría el género primario.
Así sería este,
y luego los otros géneros serían todos los demás.
Ahora bien, esto no es lo que queremos, así que volvamos a colocarlo.
Y ahora sólo una cosa importante sobre esto es
que solo podemos colocar esto aquí
al final de la operación de desestructuración.
Entonces colocar esto así aquí no tendría mucho sentido.
Entonces esto inmediatamente nos da aquí un error que dice
que el elemento resto debe ser el último
en el patrón desestructurante.
Bien, entonces volvamos otra vez.
y eso es todo para el operador resto.
Ahora, ¿qué es un poco confuso?
sobre esto es que la misma sintaxis,
entonces los tres puntos también se usan para el operador de extensión,
que es un poco más común que el operador resto.
Entonces, el operador de extensión lo usamos todo el tiempo.
Es realmente importante y muy común.
Y, al igual que la desestructuración,
También podemos usarlo tanto en matrices como en objetos.
Y comencemos a mirar primero las matrices.
Entonces digamos que queremos crear una nueva matriz.
con todos los géneros, pero añade uno nuevo al final.
Entonces, ¿cómo podríamos hacer eso?
Digamos nuevos géneros.
Entonces, queremos una nueva matriz, como dijimos, cierto,
que contiene todos los géneros actuales
y luego otro al final.
Entonces podríamos intentar simplemente agregar géneros aquí.
y luego digamos fantasía épica.
Así que veamos qué nos traería eso.
Pero inmediatamente vemos que esto no es exactamente
lo que queríamos porque ahora tenemos una matriz que contiene,
Por supuesto, la fantasía épica, pero también otra variedad.
Entonces simplemente tenemos toda la gama de géneros.
y luego el género que queríamos agregar.
Pero esto no es lo que queremos.
Queremos una matriz que contenga todos
de estos valores aquí individualmente.
Entonces todos estos seis géneros
uno por uno y no una matriz, que contiene cinco géneros
y luego simplemente el otro género al final.
Entonces lo que podemos hacer es utilizar el operador de extensión.
Entonces, el operador de extensión, como dije, tiene la misma sintaxis.
Entonces podemos simplemente escribir esto aquí,
y lo que esto hará es básicamente tomar todos los valores
fuera de la matriz y colóquelos aquí uno por uno.
Entonces puedes imaginar, como si esto se convirtiera
simplemente escribir estos géneros aquí uno por uno.
Así que sáquelos del conjunto y colóquelos aquí.
Y dado que estamos construyendo una nueva matriz aquí
Luego obtendremos esta nueva matriz.
que contiene todos estos valores individuales,
y, al final, fantasía épica ya, ¿no?
Así que esto es realmente útil.
y, por supuesto, también podríamos colocarlo al final.
Y entonces la fantasía épica simplemente sería
al comienzo de la nueva matriz.
Entonces así, genial.
Así es como funciona el operador de extensión con matrices.
Pero ahora sigamos adelante
a objetos donde el operador de dispersión es aún más importante
porque nos permite agregar nuevas propiedades
y también para actualizar los existentes.
Entonces, creemos una variable llamada LibroActualizado.
Y digamos que ahora queríamos crear un nuevo objeto.
basado en el libro actual, pero que tiene una nueva propiedad.
Y esa nueva propiedad, por ejemplo, puede ser la película.
fecha de publicación.
Entonces ya tenemos una propiedad de fecha de publicación aquí.
y también tenemos una adaptación cinematográfica.
Y ahora también podemos crear una propiedad que diga
cuando la película fue realmente publicada.
Ahora bien, este libro aquí en realidad no tiene una película,
pero ese no es realmente el punto aquí.
Eso realmente no importa.
Recién estamos aprendiendo cómo hacer esto.
Entonces, intentemos crear este objeto de libro actualizado,
tal como lo hicimos antes usando el objeto libro actual
y luego agregando una propiedad aquí que dice
fecha de publicación de la película.
No simplemente usé esta fecha.
Ahora bien, esta fecha es en realidad la publicación.
de la película del primer libro de 'El Señor de los Anillos',
que creo que es el libro número uno.
Y entonces, simplemente para hacer esto bien,
Consigamos el libro número uno aquí.
Entonces verás inmediatamente todo lo que se actualiza aquí.
Entonces todos estos registros que tenemos
Todos estos géneros aquí, por supuesto, pero lo que nos interesa
Aquí está el libro actualizado, ¿verdad?
Y nuevamente, para inspeccionar esto, abramos aquí esta barra lateral.
Y al igual que antes, esto realmente no es lo que queríamos.
Entonces, dentro de este libro, ahora tenemos otra propiedad de libro.
que contiene el libro en sí
más esta propiedad de fecha de publicación de la nueva película.
Entonces esto no es lo que queremos.
En cambio, queremos un objeto grande que contenga todos
de esta y esta nueva propiedad.
Y entonces la solución, como antes, es
para simplemente difundir todas las propiedades de este libro
objeto en el nuevo objeto,
e inmediatamente ves como se actualiza aquí,
y ahora todo está simplemente dentro del objeto libro actualizado.
excelente. Así es como agregamos nuevas propiedades.
a un objeto usando el operador de extensión.
Pero, como dije al principio,
También podemos usarlo básicamente para actualizar propiedades,
simplemente anulándolos.
Entonces vemos que tenemos esta propiedad de páginas.
pero imaginemos que por alguna razón está mal.
Y entonces podemos simplemente sobrescribirlo aquí.
Entonces digamos que el número de páginas es en realidad 1210.
Entonces, si inspeccionamos eso nuevamente,
entonces ves que ahora en realidad es 1210.
Y la razón por la que funciona es
porque, como mencioné al principio,
esta sintaxis aquí básicamente toma todos los elementos,
entonces todas las propiedades del objeto, en este nuevo objeto.
Y luego, por supuesto, contendrá la propiedad de las páginas originales.
Y entonces tenemos dos propiedades de páginas.
y entonces el segundo,
entonces este último anulará el primero.
Entonces, si colocamos este primero, que es perfectamente válido,
entonces veras que vuelve
a 1216 porque entonces la propiedad de las páginas viene
De aqui mismo es Celeste
y por lo tanto anulará este.
Entonces, cuando queramos hacer esto,
el objeto original extendido debe estar primero.
Así que simplemente escribo lo que hicimos aquí,
agregando una nueva propiedad
y luego anulando una propiedad existente.
Y me estoy concentrando mucho aquí
en esto porque esto va a ser
Realmente, realmente importante cuando trabajamos con React.
porque cuando queremos actualizar objetos en estado,
que aprenderás más adelante qué es eso,
Tendremos que utilizar esta técnica.
Y también hablaremos
Hablaremos de esto un poco más adelante en esta sección.
Pero por ahora, sólo ten en cuenta
que cuando queremos crear un nuevo objeto
y luego agregarle nuevas propiedades o anular las existentes
Así es como lo hacemos.
Entonces usamos el operador de extensión.
y lo mismo ocurre con una carrera.
Muy, muy importante.
Entonces es fundamental que sepas esto.
a medida que avanzamos en el curso.