1 00:00:01,110 --> 00:00:03,150 Ahora sigamos, aprendamos rápidamente. 2 00:00:03,150 --> 00:00:06,123 sobre el resto y el operador de spread. 3 00:00:07,530 --> 00:00:10,200 Y volvamos aquí a esta línea de código. 4 00:00:10,200 --> 00:00:13,380 donde hicimos la desestructuración en la conferencia anterior. 5 00:00:13,380 --> 00:00:15,600 Entonces, eliminamos este género principal. 6 00:00:15,600 --> 00:00:19,170 y el género secundario fuera de este conjunto. 7 00:00:19,170 --> 00:00:20,040 Y ahora digamos 8 00:00:20,040 --> 00:00:23,580 que también queríamos incluir todos los demás géneros, 9 00:00:23,580 --> 00:00:25,680 entonces los que no son los primeros 10 00:00:25,680 --> 00:00:28,800 y el segundo en otra matriz, 11 00:00:28,800 --> 00:00:32,880 básicamente en una matriz que contiene todos los demás géneros. 12 00:00:32,880 --> 00:00:36,270 Y para eso podemos usar el operador rest. 13 00:00:36,270 --> 00:00:39,660 Entonces aquí podemos simplemente escribir, punto, punto, punto. 14 00:00:39,660 --> 00:00:41,673 y luego darle el nombre que queramos. 15 00:00:42,870 --> 00:00:45,930 Entonces digamos otros géneros. 16 00:00:45,930 --> 00:00:48,600 Y entonces esto creará automáticamente una matriz. 17 00:00:48,600 --> 00:00:51,120 que contiene todos los valores que no tenemos 18 00:00:51,120 --> 00:00:52,320 previamente desestructurado. 19 00:00:54,090 --> 00:00:55,713 Así que registremos eso aquí. 20 00:00:58,740 --> 00:01:01,383 Y efectivamente, aquí está. 21 00:01:03,030 --> 00:01:06,210 Entonces sacamos la ciencia ficción y el humor. 22 00:01:06,210 --> 00:01:10,410 que recuerdan es el primero y el segundo, 23 00:01:10,410 --> 00:01:13,740 y luego obtuvimos una matriz con el tercero, el cuarto 24 00:01:13,740 --> 00:01:14,853 y el último. 25 00:01:16,350 --> 00:01:18,390 Exactamente lo que queríamos. 26 00:01:18,390 --> 00:01:22,290 Y, por supuesto, si aquí no tuviéramos este, entonces 27 00:01:22,290 --> 00:01:27,150 Estos otros géneros también contendrían el género secundario. 28 00:01:27,150 --> 00:01:31,410 Entonces aquí solo estaría el género primario. 29 00:01:31,410 --> 00:01:32,610 Así sería este, 30 00:01:32,610 --> 00:01:35,733 y luego los otros géneros serían todos los demás. 31 00:01:37,590 --> 00:01:41,190 Ahora bien, esto no es lo que queremos, así que volvamos a colocarlo. 32 00:01:41,190 --> 00:01:43,950 Y ahora sólo una cosa importante sobre esto es 33 00:01:43,950 --> 00:01:45,750 que solo podemos colocar esto aquí 34 00:01:45,750 --> 00:01:49,410 al final de la operación de desestructuración. 35 00:01:49,410 --> 00:01:53,463 Entonces colocar esto así aquí no tendría mucho sentido. 36 00:01:54,930 --> 00:01:57,960 Entonces esto inmediatamente nos da aquí un error que dice 37 00:01:57,960 --> 00:01:59,970 que el elemento resto debe ser el último 38 00:01:59,970 --> 00:02:01,563 en el patrón desestructurante. 39 00:02:04,290 --> 00:02:06,743 Bien, entonces volvamos otra vez. 40 00:02:06,743 --> 00:02:11,403 y eso es todo para el operador resto. 41 00:02:12,330 --> 00:02:13,770 Ahora, ¿qué es un poco confuso? 42 00:02:13,770 --> 00:02:16,560 sobre esto es que la misma sintaxis, 43 00:02:16,560 --> 00:02:20,970 entonces los tres puntos también se usan para el operador de extensión, 44 00:02:20,970 --> 00:02:24,870 que es un poco más común que el operador resto. 45 00:02:24,870 --> 00:02:27,930 Entonces, el operador de extensión lo usamos todo el tiempo. 46 00:02:27,930 --> 00:02:30,660 Es realmente importante y muy común. 47 00:02:30,660 --> 00:02:32,340 Y, al igual que la desestructuración, 48 00:02:32,340 --> 00:02:36,270 También podemos usarlo tanto en matrices como en objetos. 49 00:02:36,270 --> 00:02:40,320 Y comencemos a mirar primero las matrices. 50 00:02:40,320 --> 00:02:43,350 Entonces digamos que queremos crear una nueva matriz. 51 00:02:43,350 --> 00:02:47,043 con todos los géneros, pero añade uno nuevo al final. 52 00:02:48,000 --> 00:02:49,563 Entonces, ¿cómo podríamos hacer eso? 53 00:02:53,880 --> 00:02:57,243 Digamos nuevos géneros. 54 00:02:59,010 --> 00:03:01,920 Entonces, queremos una nueva matriz, como dijimos, cierto, 55 00:03:01,920 --> 00:03:04,290 que contiene todos los géneros actuales 56 00:03:04,290 --> 00:03:06,210 y luego otro al final. 57 00:03:06,210 --> 00:03:10,435 Entonces podríamos intentar simplemente agregar géneros aquí. 58 00:03:10,435 --> 00:03:15,435 y luego digamos fantasía épica. 59 00:03:17,790 --> 00:03:20,790 Así que veamos qué nos traería eso. 60 00:03:20,790 --> 00:03:23,220 Pero inmediatamente vemos que esto no es exactamente 61 00:03:23,220 --> 00:03:27,397 lo que queríamos porque ahora tenemos una matriz que contiene, 62 00:03:27,397 --> 00:03:32,397 Por supuesto, la fantasía épica, pero también otra variedad. 63 00:03:32,730 --> 00:03:35,520 Entonces simplemente tenemos toda la gama de géneros. 64 00:03:35,520 --> 00:03:38,520 y luego el género que queríamos agregar. 65 00:03:38,520 --> 00:03:40,050 Pero esto no es lo que queremos. 66 00:03:40,050 --> 00:03:42,360 Queremos una matriz que contenga todos 67 00:03:42,360 --> 00:03:44,550 de estos valores aquí individualmente. 68 00:03:44,550 --> 00:03:46,260 Entonces todos estos seis géneros 69 00:03:46,260 --> 00:03:50,340 uno por uno y no una matriz, que contiene cinco géneros 70 00:03:50,340 --> 00:03:54,870 y luego simplemente el otro género al final. 71 00:03:54,870 --> 00:03:59,430 Entonces lo que podemos hacer es utilizar el operador de extensión. 72 00:03:59,430 --> 00:04:03,330 Entonces, el operador de extensión, como dije, tiene la misma sintaxis. 73 00:04:03,330 --> 00:04:06,330 Entonces podemos simplemente escribir esto aquí, 74 00:04:06,330 --> 00:04:10,140 y lo que esto hará es básicamente tomar todos los valores 75 00:04:10,140 --> 00:04:14,580 fuera de la matriz y colóquelos aquí uno por uno. 76 00:04:14,580 --> 00:04:17,850 Entonces puedes imaginar, como si esto se convirtiera 77 00:04:17,850 --> 00:04:21,600 simplemente escribir estos géneros aquí uno por uno. 78 00:04:21,600 --> 00:04:25,110 Así que sáquelos del conjunto y colóquelos aquí. 79 00:04:25,110 --> 00:04:27,960 Y dado que estamos construyendo una nueva matriz aquí 80 00:04:27,960 --> 00:04:29,760 Luego obtendremos esta nueva matriz. 81 00:04:29,760 --> 00:04:32,490 que contiene todos estos valores individuales, 82 00:04:32,490 --> 00:04:36,360 y, al final, fantasía épica ya, ¿no? 83 00:04:36,360 --> 00:04:38,640 Así que esto es realmente útil. 84 00:04:38,640 --> 00:04:41,340 y, por supuesto, también podríamos colocarlo al final. 85 00:04:41,340 --> 00:04:44,220 Y entonces la fantasía épica simplemente sería 86 00:04:44,220 --> 00:04:46,680 al comienzo de la nueva matriz. 87 00:04:46,680 --> 00:04:50,295 Entonces así, genial. 88 00:04:50,295 --> 00:04:54,000 Así es como funciona el operador de extensión con matrices. 89 00:04:54,000 --> 00:04:55,050 Pero ahora sigamos adelante 90 00:04:55,050 --> 00:04:59,190 a objetos donde el operador de dispersión es aún más importante 91 00:04:59,190 --> 00:05:02,010 porque nos permite agregar nuevas propiedades 92 00:05:02,010 --> 00:05:04,293 y también para actualizar los existentes. 93 00:05:05,700 --> 00:05:09,573 Entonces, creemos una variable llamada LibroActualizado. 94 00:05:11,700 --> 00:05:14,880 Y digamos que ahora queríamos crear un nuevo objeto. 95 00:05:14,880 --> 00:05:18,570 basado en el libro actual, pero que tiene una nueva propiedad. 96 00:05:18,570 --> 00:05:21,720 Y esa nueva propiedad, por ejemplo, puede ser la película. 97 00:05:21,720 --> 00:05:23,100 fecha de publicación. 98 00:05:23,100 --> 00:05:26,808 Entonces ya tenemos una propiedad de fecha de publicación aquí. 99 00:05:26,808 --> 00:05:30,750 y también tenemos una adaptación cinematográfica. 100 00:05:30,750 --> 00:05:34,080 Y ahora también podemos crear una propiedad que diga 101 00:05:34,080 --> 00:05:37,770 cuando la película fue realmente publicada. 102 00:05:37,770 --> 00:05:40,620 Ahora bien, este libro aquí en realidad no tiene una película, 103 00:05:40,620 --> 00:05:42,510 pero ese no es realmente el punto aquí. 104 00:05:42,510 --> 00:05:43,830 Eso realmente no importa. 105 00:05:43,830 --> 00:05:46,710 Recién estamos aprendiendo cómo hacer esto. 106 00:05:46,710 --> 00:05:50,310 Entonces, intentemos crear este objeto de libro actualizado, 107 00:05:50,310 --> 00:05:55,290 tal como lo hicimos antes usando el objeto libro actual 108 00:05:55,290 --> 00:05:58,800 y luego agregando una propiedad aquí que dice 109 00:05:58,800 --> 00:06:02,400 fecha de publicación de la película. 110 00:06:07,320 --> 00:06:09,753 No simplemente usé esta fecha. 111 00:06:11,310 --> 00:06:13,590 Ahora bien, esta fecha es en realidad la publicación. 112 00:06:13,590 --> 00:06:17,010 de la película del primer libro de 'El Señor de los Anillos', 113 00:06:17,010 --> 00:06:18,843 que creo que es el libro número uno. 114 00:06:20,160 --> 00:06:22,394 Y entonces, simplemente para hacer esto bien, 115 00:06:22,394 --> 00:06:25,773 Consigamos el libro número uno aquí. 116 00:06:27,150 --> 00:06:29,850 Entonces verás inmediatamente todo lo que se actualiza aquí. 117 00:06:29,850 --> 00:06:32,550 Entonces todos estos registros que tenemos 118 00:06:32,550 --> 00:06:37,290 Todos estos géneros aquí, por supuesto, pero lo que nos interesa 119 00:06:37,290 --> 00:06:41,927 Aquí está el libro actualizado, ¿verdad? 120 00:06:42,960 --> 00:06:47,250 Y nuevamente, para inspeccionar esto, abramos aquí esta barra lateral. 121 00:06:47,250 --> 00:06:51,180 Y al igual que antes, esto realmente no es lo que queríamos. 122 00:06:51,180 --> 00:06:54,960 Entonces, dentro de este libro, ahora tenemos otra propiedad de libro. 123 00:06:54,960 --> 00:06:56,910 que contiene el libro en sí 124 00:06:56,910 --> 00:07:00,423 más esta propiedad de fecha de publicación de la nueva película. 125 00:07:01,320 --> 00:07:02,730 Entonces esto no es lo que queremos. 126 00:07:02,730 --> 00:07:06,120 En cambio, queremos un objeto grande que contenga todos 127 00:07:06,120 --> 00:07:08,520 de esta y esta nueva propiedad. 128 00:07:08,520 --> 00:07:11,130 Y entonces la solución, como antes, es 129 00:07:11,130 --> 00:07:14,550 para simplemente difundir todas las propiedades de este libro 130 00:07:14,550 --> 00:07:17,200 objeto en el nuevo objeto, 131 00:07:17,200 --> 00:07:20,970 e inmediatamente ves como se actualiza aquí, 132 00:07:20,970 --> 00:07:25,970 y ahora todo está simplemente dentro del objeto libro actualizado. 133 00:07:26,250 --> 00:07:29,250 excelente. Así es como agregamos nuevas propiedades. 134 00:07:29,250 --> 00:07:32,130 a un objeto usando el operador de extensión. 135 00:07:32,130 --> 00:07:33,810 Pero, como dije al principio, 136 00:07:33,810 --> 00:07:37,860 También podemos usarlo básicamente para actualizar propiedades, 137 00:07:37,860 --> 00:07:40,354 simplemente anulándolos. 138 00:07:40,354 --> 00:07:43,680 Entonces vemos que tenemos esta propiedad de páginas. 139 00:07:43,680 --> 00:07:47,100 pero imaginemos que por alguna razón está mal. 140 00:07:47,100 --> 00:07:49,533 Y entonces podemos simplemente sobrescribirlo aquí. 141 00:07:52,350 --> 00:07:55,470 Entonces digamos que el número de páginas es en realidad 1210. 142 00:08:00,270 --> 00:08:02,460 Entonces, si inspeccionamos eso nuevamente, 143 00:08:02,460 --> 00:08:05,970 entonces ves que ahora en realidad es 1210. 144 00:08:05,970 --> 00:08:07,680 Y la razón por la que funciona es 145 00:08:07,680 --> 00:08:10,350 porque, como mencioné al principio, 146 00:08:10,350 --> 00:08:13,950 esta sintaxis aquí básicamente toma todos los elementos, 147 00:08:13,950 --> 00:08:18,300 entonces todas las propiedades del objeto, en este nuevo objeto. 148 00:08:18,300 --> 00:08:22,140 Y luego, por supuesto, contendrá la propiedad de las páginas originales. 149 00:08:22,140 --> 00:08:25,050 Y entonces tenemos dos propiedades de páginas. 150 00:08:25,050 --> 00:08:26,700 y entonces el segundo, 151 00:08:26,700 --> 00:08:30,600 entonces este último anulará el primero. 152 00:08:30,600 --> 00:08:34,950 Entonces, si colocamos este primero, que es perfectamente válido, 153 00:08:34,950 --> 00:08:37,260 entonces veras que vuelve 154 00:08:37,260 --> 00:08:41,970 a 1216 porque entonces la propiedad de las páginas viene 155 00:08:41,970 --> 00:08:44,310 De aqui mismo es Celeste 156 00:08:44,310 --> 00:08:46,713 y por lo tanto anulará este. 157 00:08:48,300 --> 00:08:50,400 Entonces, cuando queramos hacer esto, 158 00:08:50,400 --> 00:08:53,643 el objeto original extendido debe estar primero. 159 00:08:57,360 --> 00:08:59,220 Así que simplemente escribo lo que hicimos aquí, 160 00:08:59,220 --> 00:09:00,790 agregando una nueva propiedad 161 00:09:05,310 --> 00:09:10,310 y luego anulando una propiedad existente. 162 00:09:10,800 --> 00:09:12,330 Y me estoy concentrando mucho aquí 163 00:09:12,330 --> 00:09:14,130 en esto porque esto va a ser 164 00:09:14,130 --> 00:09:17,280 Realmente, realmente importante cuando trabajamos con React. 165 00:09:17,280 --> 00:09:21,390 porque cuando queremos actualizar objetos en estado, 166 00:09:21,390 --> 00:09:23,430 que aprenderás más adelante qué es eso, 167 00:09:23,430 --> 00:09:26,430 Tendremos que utilizar esta técnica. 168 00:09:26,430 --> 00:09:27,450 Y también hablaremos 169 00:09:27,450 --> 00:09:30,330 Hablaremos de esto un poco más adelante en esta sección. 170 00:09:30,330 --> 00:09:31,860 Pero por ahora, sólo ten en cuenta 171 00:09:31,860 --> 00:09:35,130 que cuando queremos crear un nuevo objeto 172 00:09:35,130 --> 00:09:39,240 y luego agregarle nuevas propiedades o anular las existentes 173 00:09:39,240 --> 00:09:40,260 Así es como lo hacemos. 174 00:09:40,260 --> 00:09:42,930 Entonces usamos el operador de extensión. 175 00:09:42,930 --> 00:09:45,630 y lo mismo ocurre con una carrera. 176 00:09:45,630 --> 00:09:47,070 Muy, muy importante. 177 00:09:47,070 --> 00:09:49,020 Entonces es fundamental que sepas esto. 178 00:09:49,020 --> 00:09:50,673 a medida que avanzamos en el curso.