1
00:00:01,180 --> 00:00:05,360
Hablemos ahora del increíble operador de propagación.

2
00:00:05,360 --> 00:00:07,540
Entonces podemos usar el operador de propagación

3
00:00:07,540 --> 00:00:12,080
para expandir básicamente una matriz en todos sus elementos.

4
00:00:12,080 --> 00:00:15,943
Básicamente, desempaquetando todos los elementos de la matriz a la vez.

5
00:00:17,720 --> 00:00:19,733
Así que digamos que tenemos una matriz,

6
00:00:22,010 --> 00:00:24,770
así que siete, ocho, nueve.

7
00:00:24,770 --> 00:00:29,140
Y ahora queremos crear una nueva matriz basada en esta matriz

8
00:00:29,140 --> 00:00:31,770
pero con algunos elementos nuevos al principio.

9
00:00:31,770 --> 00:00:33,900
Entonces, ¿cómo haríamos eso?

10
00:00:33,900 --> 00:00:36,050
Bueno, con lo que ya sabemos,

11
00:00:36,050 --> 00:00:38,870
tendríamos que recorrer esta matriz,

12
00:00:38,870 --> 00:00:41,523
o peor aún, hacerlo manualmente.

13
00:00:42,540 --> 00:00:44,920
Por ejemplo, así.

14
00:00:44,920 --> 00:00:48,593
Llamémoslo el Bad New Array.

15
00:00:49,560 --> 00:00:52,380
Así que si quisiéramos sumar uno y dos

16
00:00:52,380 --> 00:00:54,000
al comienzo de esta matriz,

17
00:00:54,000 --> 00:00:56,920
tendríamos que escribir uno, dos,

18
00:00:56,920 --> 00:00:59,473
y luego cada uno de estos elementos.

19
00:01:00,970 --> 00:01:03,653
Así que eso sería arr. 0,

20
00:01:05,585 --> 00:01:06,543
arreglo 1,

21
00:01:09,250 --> 00:01:10,543
y arreglo 2.

22
00:01:15,670 --> 00:01:18,420
Bien, echemos un vistazo.

23
00:01:18,420 --> 00:01:20,430
Y ahora necesitamos obtener una nueva matriz

24
00:01:20,430 --> 00:01:22,630
con los tres elementos originales

25
00:01:22,630 --> 00:01:26,320
y luego un uno, dos al comienzo de esa matriz.

26
00:01:26,320 --> 00:01:28,510
De acuerdo, y esto es bastante

27
00:01:28,510 --> 00:01:31,110
una operación común que tenemos que hacer

28
00:01:31,110 --> 00:01:33,800
y ahora podemos, desde ES6,

29
00:01:33,800 --> 00:01:35,600
hazlo de una manera mucho mejor

30
00:01:35,600 --> 00:01:38,120
utilizando el operador de propagación.

31
00:01:38,120 --> 00:01:39,620
Así que con el operador de propagación,

32
00:01:39,620 --> 00:01:41,393
va a funcionar así.

33
00:01:42,530 --> 00:01:44,023
Así que vamos a crear una nueva matriz.

34
00:01:45,050 --> 00:01:48,803
Así que esto es lo bueno, digamos New Array.

35
00:01:50,080 --> 00:01:53,640
Y luego, de nuevo, usamos uno, dos,

36
00:01:53,640 --> 00:01:55,670
y luego usamos el operador de propagación,

37
00:01:55,670 --> 00:01:57,540
que es punto punto punto,

38
00:01:57,540 --> 00:01:59,710
para expandir básicamente esta matriz

39
00:01:59,710 --> 00:02:02,890
en todos sus elementos individuales.

40
00:02:02,890 --> 00:02:04,150
Así que vamos a ver el resultado,

41
00:02:04,150 --> 00:02:06,693
y luego te lo explico un poco mejor.

42
00:02:07,950 --> 00:02:11,490
Así que nueva matriz, y verás que obtenemos

43
00:02:11,490 --> 00:02:14,180
exactamente el mismo resultado aquí.

44
00:02:14,180 --> 00:02:16,270
Entonces, ¿qué hace el operador de propagación?

45
00:02:16,270 --> 00:02:18,350
es básicamente tomar todos los valores

46
00:02:18,350 --> 00:02:20,800
fuera de este arr. formación,

47
00:02:20,800 --> 00:02:22,790
y luego escribirlos individualmente

48
00:02:22,790 --> 00:02:27,040
como si escribiésemos siete, ocho, nueve aquí manualmente.

49
00:02:27,040 --> 00:02:31,630
Muy bien, si lo escribimos sin estos tres puntos,

50
00:02:31,630 --> 00:02:33,530
entonces tendríamos esta matriz,

51
00:02:34,634 --> 00:02:37,801
así que este arr. matriz dentro de esta.

52
00:02:39,070 --> 00:02:40,490
Así que así.

53
00:02:40,490 --> 00:02:43,920
Así que uno, dos y luego una serie de siete, ocho, nueve.

54
00:02:43,920 --> 00:02:46,030
Y eso es porque aquí, estamos incluyendo

55
00:02:46,030 --> 00:02:47,730
toda esta matriz.

56
00:02:47,730 --> 00:02:50,330
Pero con el operador de propagación, de nuevo,

57
00:02:50,330 --> 00:02:53,680
es como sacar todos los elementos de la matriz

58
00:02:53,680 --> 00:02:55,970
y escribirlos aquí manualmente.

59
00:02:55,970 --> 00:02:57,600
Entonces, cuando hacemos esto,

60
00:02:57,600 --> 00:02:59,140
entonces obtenemos siete, ocho, nueve,

61
00:02:59,140 --> 00:03:03,330
individualmente aquí, representados en esta nueva matriz.

62
00:03:03,330 --> 00:03:07,190
Entonces, lo que esto significa es que podemos usar el operador de propagación

63
00:03:07,190 --> 00:03:09,480
cada vez que de otro modo escribiríamos

64
00:03:09,480 --> 00:03:12,630
múltiples valores separados por comas.

65
00:03:12,630 --> 00:03:14,400
Y esa situación pasa

66
00:03:14,400 --> 00:03:16,810
cada vez que escribimos un literal de matriz

67
00:03:16,810 --> 00:03:18,833
como lo hicimos aquí arriba.

68
00:03:20,190 --> 00:03:22,350
Así que esa es la primera situación en la que

69
00:03:22,350 --> 00:03:25,770
es muy útil para expandir una matriz.

70
00:03:25,770 --> 00:03:27,590
Y la segunda situación es

71
00:03:27,590 --> 00:03:31,000
cuando pasamos argumentos a funciones.

72
00:03:31,000 --> 00:03:33,920
Entonces, por ejemplo, digamos

73
00:03:33,920 --> 00:03:37,600
que queríamos registrar los elementos individuales

74
00:03:37,600 --> 00:03:39,403
de esta nueva matriz aquí.

75
00:03:40,630 --> 00:03:42,630
Entonces, si simplemente registramos la matriz,

76
00:03:42,630 --> 00:03:44,860
entonces, por supuesto, se verá así.

77
00:03:44,860 --> 00:03:47,910
Es solo un valor con solo la matriz,

78
00:03:47,910 --> 00:03:50,330
es solo un gran valor.

79
00:03:50,330 --> 00:03:53,580
Pero si usamos el operador de propagación

80
00:03:53,580 --> 00:03:55,683
para expandir la nueva matriz,

81
00:03:56,750 --> 00:03:59,070
entonces a ver que pasa entonces.

82
00:03:59,070 --> 00:04:03,070
Entonces ahora registró los elementos individuales de la matriz.

83
00:04:03,070 --> 00:04:05,560
Así que esto sería lo mismo que escribir

84
00:04:05,560 --> 00:04:10,560
uno, dos, siete, ocho, nueve individualmente.

85
00:04:10,600 --> 00:04:13,140
Una vez más, siempre que necesitemos los elementos

86
00:04:13,140 --> 00:04:14,940
de una matriz individualmente,

87
00:04:14,940 --> 00:04:16,900
entonces podemos usar el operador de propagación.

88
00:04:16,900 --> 00:04:19,840
Y eso es útil cuando escribimos una matriz

89
00:04:19,840 --> 00:04:22,360
y cuando necesitamos pasar múltiples elementos

90
00:04:22,360 --> 00:04:25,540
en una función como la que hicimos aquí.

91
00:04:25,540 --> 00:04:30,030
Muy bien, veamos un ejemplo un poco más útil.

92
00:04:30,030 --> 00:04:33,060
Entonces, en este ejemplo, crearemos una matriz

93
00:04:33,060 --> 00:04:37,440
con un alimento más en la matriz del menú principal.

94
00:04:37,440 --> 00:04:42,440
Entonces ese menú principal está aquí en el menú principal del punto del restaurante,

95
00:04:43,640 --> 00:04:46,723
y básicamente queremos crear un nuevo menú aquí.

96
00:04:47,750 --> 00:04:52,750
Así que const, nuevo menú, y luego digamos

97
00:04:54,230 --> 00:04:56,150
que queremos la matriz original

98
00:04:56,150 --> 00:04:58,830
más un elemento nuevo.

99
00:04:58,830 --> 00:05:02,343
Entonces podemos hacer eso simplemente expandiendo la matriz,

100
00:05:03,710 --> 00:05:07,360
así que ese es el menú principal del restaurante dot,

101
00:05:07,360 --> 00:05:09,590
y luego podemos agregar otras cosas.

102
00:05:09,590 --> 00:05:12,216
Así que digamos gnocci,

103
00:05:12,216 --> 00:05:15,530
al menos así creo que se escribe

104
00:05:15,530 --> 00:05:17,833
o pronunciado en italiano.

105
00:05:18,780 --> 00:05:22,803
Y echemos un vistazo a nuestro nuevo menú,

106
00:05:23,970 --> 00:05:27,010
y en efecto, tiene los tres elementos originales,

107
00:05:27,010 --> 00:05:29,450
más los ñoquis.

108
00:05:29,450 --> 00:05:32,440
Y tenga en cuenta que aquí, de hecho, estamos

109
00:05:32,440 --> 00:05:35,600
creando una matriz completamente nueva, ¿de acuerdo?

110
00:05:35,600 --> 00:05:37,470
Por supuesto, no estamos manipulando

111
00:05:37,470 --> 00:05:41,060
la matriz del menú principal del punto del restaurante.

112
00:05:41,060 --> 00:05:43,540
Así que estamos construyendo una nueva matriz desde cero,

113
00:05:43,540 --> 00:05:46,780
y se puede ver que aquí por los corchetes.

114
00:05:46,780 --> 00:05:50,110
Así que esta sintaxis de corchetes aquí es simplemente la forma

115
00:05:50,110 --> 00:05:53,470
en el que siempre hemos estado escribiendo nuevas matrices.

116
00:05:53,470 --> 00:05:56,150
Y aquí, nuevamente, estamos escribiendo una nueva matriz

117
00:05:56,150 --> 00:05:59,820
pero simplemente basado en la expansión de esta matriz,

118
00:05:59,820 --> 00:06:02,083
y luego agregarle otro elemento.

119
00:06:04,150 --> 00:06:05,640
Bueno.

120
00:06:05,640 --> 00:06:09,110
Ahora puede que hayas notado que el operador de propagación

121
00:06:09,110 --> 00:06:12,140
es en realidad un poco similar a la desestructuración,

122
00:06:12,140 --> 00:06:16,262
porque también nos ayuda a sacar elementos de los arreglos.

123
00:06:16,262 --> 00:06:20,140
Ahora, la gran diferencia es que el operador de propagación

124
00:06:20,140 --> 00:06:22,610
toma todos los elementos de la matriz

125
00:06:22,610 --> 00:06:25,590
y tampoco crea nuevas variables.

126
00:06:25,590 --> 00:06:28,230
Y como consecuencia, solo podemos usarlo

127
00:06:28,230 --> 00:06:30,810
en lugares donde de otro modo lo haríamos

128
00:06:30,810 --> 00:06:33,093
escriba los valores separados por comas.

129
00:06:33,930 --> 00:06:35,740
Y, en caso de que estés tomando notas,

130
00:06:35,740 --> 00:06:39,240
probablemente lo que acabo de decir sería muy útil

131
00:06:39,240 --> 00:06:40,843
tener como nota.

132
00:06:42,230 --> 00:06:45,640
A continuación, aprendamos sobre dos casos de uso importantes

133
00:06:45,640 --> 00:06:47,400
del operador de propagación,

134
00:06:47,400 --> 00:06:50,550
que es crear copias superficiales de matrices,

135
00:06:50,550 --> 00:06:52,723
y para fusionar dos matrices juntas.

136
00:06:55,640 --> 00:06:57,390
Así que digamos copiar matriz,

137
00:06:57,390 --> 00:07:01,270
así que simplemente creemos una copia del menú principal.

138
00:07:01,270 --> 00:07:06,270
Así que copie el menú principal, y escribamos una nueva matriz,

139
00:07:07,520 --> 00:07:10,490
y en esa nueva matriz, pondremos todos los elementos

140
00:07:10,490 --> 00:07:13,003
que se encuentran actualmente en el menú principal.

141
00:07:14,760 --> 00:07:19,760
Así que en el menú principal del restaurante dot, y eso es todo.

142
00:07:19,890 --> 00:07:24,180
Así que aquí acabamos de crear una copia superficial de esta matriz.

143
00:07:24,180 --> 00:07:27,400
Eso es un poco similar a la asignación de puntos de objetos

144
00:07:27,400 --> 00:07:30,350
que usamos en la sección anterior, ¿de acuerdo?

145
00:07:30,350 --> 00:07:34,750
Pero aquí, esta sintaxis es mucho más fácil de usar.

146
00:07:34,750 --> 00:07:36,803
Ahora, para unir dos matrices,

147
00:07:38,040 --> 00:07:41,560
así que une dos matrices o más, por supuesto,

148
00:07:41,560 --> 00:07:43,910
podemos usar la misma técnica.

149
00:07:43,910 --> 00:07:46,110
Y quizás, llegados a este punto, ya puedas adivinar

150
00:07:46,110 --> 00:07:47,771
cómo funcionaría eso, y así

151
00:07:47,771 --> 00:07:50,480
puedes hacer esto, en realidad, como un desafío.

152
00:07:50,480 --> 00:07:52,090
Así que pausa el video ahora mismo,

153
00:07:52,090 --> 00:07:57,090
y crea este menú variable que será una matriz

154
00:07:57,920 --> 00:07:59,670
que contiene todo el menú.

155
00:07:59,670 --> 00:08:02,850
Así que tanto el menú principal como el menú de inicio.

156
00:08:02,850 --> 00:08:05,100
Así que tómate un minuto y pruébalo por tu cuenta aquí.

157
00:08:06,980 --> 00:08:10,260
Muy bien, así que espero que hayas logrado hacer eso.

158
00:08:10,260 --> 00:08:11,950
Y entonces el secreto aquí, de nuevo,

159
00:08:11,950 --> 00:08:13,993
es utilizar el operador de propagación.

160
00:08:15,530 --> 00:08:20,530
Así que restaurante, y comencemos con el menú de entrada.

161
00:08:20,610 --> 00:08:23,680
Así que ese será nuestro primer par de elementos.

162
00:08:23,680 --> 00:08:26,700
en esta nueva matriz, y luego, por supuesto,

163
00:08:26,700 --> 00:08:29,290
podemos usar el operador de propagación de nuevo,

164
00:08:29,290 --> 00:08:32,403
y luego esta vez expandir el menú principal.

165
00:08:34,550 --> 00:08:36,373
Menú principal de puntos.

166
00:08:38,430 --> 00:08:40,460
Y ahora terminamos con una matriz

167
00:08:40,460 --> 00:08:43,320
que contiene todos los alimentos que son a la vez

168
00:08:43,320 --> 00:08:45,770
en el motor de arranque y el menú principal.

169
00:08:45,770 --> 00:08:48,800
Y de nuevo, porque aquí, con este operador de propagación,

170
00:08:48,800 --> 00:08:51,406
sacamos todos los elementos del menú de inicio

171
00:08:51,406 --> 00:08:54,866
y básicamente los escribió aquí en esta nueva matriz,

172
00:08:54,866 --> 00:08:58,053
y luego lo mismo con el menú principal.

173
00:08:59,010 --> 00:09:02,200
Muy bien, les dije que el operador de propagación

174
00:09:02,200 --> 00:09:05,960
funciona en matrices, pero eso no es del todo cierto,

175
00:09:05,960 --> 00:09:08,280
porque en realidad, el operador de propagación

176
00:09:08,280 --> 00:09:11,610
funciona en todos los llamados iterables.

177
00:09:11,610 --> 00:09:13,800
Ahora, ¿qué es un iterable?

178
00:09:13,800 --> 00:09:17,320
Bueno, hay diferentes iterables en JavaScript.

179
00:09:17,320 --> 00:09:19,200
Y hablaremos de todos ellos.

180
00:09:19,200 --> 00:09:20,830
al final del curso,

181
00:09:20,830 --> 00:09:23,160
pero por ahora, solo sepa que los iterables

182
00:09:23,160 --> 00:09:28,160
son cosas como todas las matrices, cadenas, mapas o conjuntos,

183
00:09:28,680 --> 00:09:30,600
pero no objetos.

184
00:09:30,600 --> 00:09:33,280
Básicamente, la mayoría de las estructuras de datos integradas

185
00:09:33,280 --> 00:09:38,280
en JavaScript ahora son iterables, pero excepto objetos.

186
00:09:38,340 --> 00:09:40,490
Así que déjame escribir eso aquí para ti.

187
00:09:41,330 --> 00:09:46,330
Los iterables son matrices, cadenas, mapas y conjuntos,

188
00:09:50,310 --> 00:09:53,300
pero no objetos.

189
00:09:53,300 --> 00:09:57,160
Ahora de todos modos, dado que las cadenas también son iterables,

190
00:09:57,160 --> 00:09:59,620
eso significa que podemos usar el operador de propagación

191
00:09:59,620 --> 00:10:00,993
en una cuerda, también.

192
00:10:02,450 --> 00:10:04,313
Así que déjame mostrarte eso rápidamente.

193
00:10:05,470 --> 00:10:10,003
Así que vamos a crear una cadena rápida aquí, Jonas,

194
00:10:10,950 --> 00:10:13,180
y luego quiero crear una matriz

195
00:10:13,180 --> 00:10:16,000
que contiene todas las letras individuales,

196
00:10:16,000 --> 00:10:18,030
además de algunos otros elementos.

197
00:10:18,030 --> 00:10:21,693
Entonces, llamemos a esto letras,

198
00:10:23,200 --> 00:10:25,490
y luego creamos una nueva matriz

199
00:10:25,490 --> 00:10:28,223
y expanda la cadena aquí también.

200
00:10:29,760 --> 00:10:32,100
Entonces aquí quiero una cadena vacía,

201
00:10:32,100 --> 00:10:34,223
entonces aquí quiero una S,

202
00:10:36,220 --> 00:10:39,360
y luego registrémoslo a través de la consola,

203
00:10:39,360 --> 00:10:42,383
y ahora tendrá un poco más de sentido.

204
00:10:43,710 --> 00:10:47,610
Muy bien, y de hecho, aquí tenemos esta matriz,

205
00:10:47,610 --> 00:10:50,160
donde cada letra de la cadena original

206
00:10:50,160 --> 00:10:52,800
ahora es un elemento individual.

207
00:10:52,800 --> 00:10:56,790
Así como nos expandimos, desempaquetamos una matriz,

208
00:10:56,790 --> 00:10:59,570
ahora hicimos lo mismo con una cuerda.

209
00:10:59,570 --> 00:11:01,090
Ahora solo ten en cuenta

210
00:11:01,090 --> 00:11:03,840
que todavía solo podemos usar el operador de propagación

211
00:11:03,840 --> 00:11:05,470
al construir una matriz,

212
00:11:05,470 --> 00:11:09,300
o cuando pasamos valores a una función.

213
00:11:09,300 --> 00:11:12,853
Entonces, por ejemplo, también podemos hacer esto.

214
00:11:15,070 --> 00:11:17,520
Así que expanda la cadena aquí,

215
00:11:17,520 --> 00:11:20,673
y entonces es lo mismo que escribir esto.

216
00:11:23,070 --> 00:11:27,563
Así que J, O, y así sucesivamente, ¿verdad?

217
00:11:28,800 --> 00:11:32,653
Entonces, de hecho, aquí ahora tenemos todos los elementos individuales.

218
00:11:33,570 --> 00:11:36,530
Muy bien, por ejemplo, lo que no podemos hacer

219
00:11:36,530 --> 00:11:40,643
es usar esto para construir una cadena usando un literal de plantilla.

220
00:11:44,470 --> 00:11:48,053
Así que aquí, esto no va a funcionar.

221
00:11:49,060 --> 00:11:51,440
Y eso es porque este no es un lugar

222
00:11:51,440 --> 00:11:55,143
que espera múltiples valores separados por una coma.

223
00:11:56,650 --> 00:12:00,890
Así que ves un token inesperado, ¿de acuerdo?

224
00:12:00,890 --> 00:12:04,640
De nuevo, varios valores separados por una coma

225
00:12:04,640 --> 00:12:06,670
generalmente solo se esperan

226
00:12:06,670 --> 00:12:09,160
cuando pasamos argumentos a una función,

227
00:12:09,160 --> 00:12:11,510
o cuando construimos una nueva matriz.

228
00:12:11,510 --> 00:12:12,950
Así que toma nota de eso,

229
00:12:12,950 --> 00:12:15,360
porque eso es importante de entender

230
00:12:15,360 --> 00:12:17,600
sobre el operador de propagación.

231
00:12:17,600 --> 00:12:21,370
Bien, pero ahora suficiente con la construcción de matrices.

232
00:12:21,370 --> 00:12:23,740
Ahora escribamos nuestra propia función

233
00:12:23,740 --> 00:12:25,970
que acepta múltiples argumentos

234
00:12:25,970 --> 00:12:27,730
y luego usar el operador de propagación

235
00:12:27,730 --> 00:12:30,230
para pasar realmente esos argumentos.

236
00:12:30,230 --> 00:12:34,630
Y ese va a ser un ejemplo muy real allí mismo.

237
00:12:34,630 --> 00:12:37,752
Así que agreguemos aquí otro método ahora,

238
00:12:37,752 --> 00:12:40,410
y entonces, digamos que queremos un método

239
00:12:40,410 --> 00:12:43,090
para pedir solo pasta, ¿de acuerdo?

240
00:12:43,090 --> 00:12:45,300
Y la pasta siempre necesita tener

241
00:12:45,300 --> 00:12:47,363
exactamente tres ingredientes.

242
00:12:48,300 --> 00:12:53,300
Así que digamos pedir pasta, y será una función,

243
00:12:54,770 --> 00:12:57,453
y ahora aquí, necesitamos tres ingredientes.

244
00:12:58,510 --> 00:13:03,033
Así que llamémoslos ing. 1, Ing. 2, e Ing. 3.

245
00:13:04,770 --> 00:13:09,310
Y luego simplemente regístrelos en la consola, alguna cadena,

246
00:13:09,310 --> 00:13:13,720
aqui esta tu rica pasta

247
00:13:15,128 --> 00:13:17,423
con ing. 1,

248
00:13:19,630 --> 00:13:21,290
En g. 2,

249
00:13:21,290 --> 00:13:25,450
e ing. 3.

250
00:13:25,450 --> 00:13:27,850
Así que aquí arriba, tenemos un error,

251
00:13:27,850 --> 00:13:30,143
así que este debería ser el número tres.

252
00:13:32,390 --> 00:13:34,890
Y luego, llamemos ahora a esta función.

253
00:13:34,890 --> 00:13:37,210
Así que pide pasta.

254
00:13:37,210 --> 00:13:38,540
Ahora lo que quiero hacer aquí

255
00:13:38,540 --> 00:13:40,680
es realmente obtener estos ingredientes

256
00:13:40,680 --> 00:13:42,430
desde una ventana de solicitud.

257
00:13:42,430 --> 00:13:45,380
Así que recuerda la función de aviso que podemos usar,

258
00:13:45,380 --> 00:13:48,653
y entonces vamos a crear una matriz llamada ingredientes.

259
00:13:52,580 --> 00:13:55,060
Y cada elemento aquí será definido

260
00:13:55,060 --> 00:13:56,363
por una ventana de solicitud.

261
00:13:58,010 --> 00:13:59,497
Así que esto de aquí ahora no tiene nada que ver con

262
00:13:59,497 --> 00:14:00,990
el operador de propagación,

263
00:14:00,990 --> 00:14:03,200
es solo una forma de que podamos realmente

264
00:14:03,200 --> 00:14:06,210
ingresar los datos nosotros mismos.

265
00:14:06,210 --> 00:14:07,163
Así que digamos,

266
00:14:09,906 --> 00:14:12,033
y aquí tenemos que escapar de esto,

267
00:14:12,870 --> 00:14:16,793
Así que vamos a hacer pasta.

268
00:14:18,150 --> 00:14:21,010
Ingrediente uno.

269
00:14:21,010 --> 00:14:24,700
Y creo que no te mostré este escape aquí antes.

270
00:14:24,700 --> 00:14:29,170
Así que aquí, cuando simplemente escribimos esta comilla simple aquí,

271
00:14:29,170 --> 00:14:30,620
escribir vamos,

272
00:14:30,620 --> 00:14:34,800
JavaScript piensa que estamos terminando esta cadena aquí.

273
00:14:34,800 --> 00:14:38,040
Bien, entonces podríamos usar las comillas dobles aquí

274
00:14:38,040 --> 00:14:42,680
o podemos escapar usando la barra invertida, ¿de acuerdo?

275
00:14:42,680 --> 00:14:44,970
Ahora cuando guardamos esto, creo que más bonito

276
00:14:44,970 --> 00:14:47,400
en realidad se deshará de esto aquí,

277
00:14:47,400 --> 00:14:51,240
pero aún es importante saber que existe el escape.

278
00:14:51,240 --> 00:14:54,730
Básicamente, esto enmascara esta comilla simple aquí,

279
00:14:54,730 --> 00:14:57,850
para que no termine la cadena en este punto.

280
00:14:57,850 --> 00:14:58,733
Así que guardémoslo.

281
00:14:59,740 --> 00:15:02,770
Y así ves que ahora, la extensión Prettier

282
00:15:02,770 --> 00:15:06,530
en realidad reemplazó la comilla simple con la comilla doble.

283
00:15:06,530 --> 00:15:09,400
Y aquí ya vemos nuestro aviso,

284
00:15:09,400 --> 00:15:11,053
pero vamos a crear dos más.

285
00:15:15,360 --> 00:15:18,123
Así que digamos el ingrediente dos ahora,

286
00:15:20,750 --> 00:15:22,360
y luego otro.

287
00:15:22,360 --> 00:15:24,800
De nuevo, aquí estamos, simplemente construyendo una matriz

288
00:15:24,800 --> 00:15:26,273
de los tres ingredientes.

289
00:15:29,280 --> 00:15:32,263
Bien, y luego podemos registrarlo en la consola,

290
00:15:33,180 --> 00:15:35,660
solo para ver A,

291
00:15:35,660 --> 00:15:36,913
B y C.

292
00:15:38,390 --> 00:15:41,110
Y así, de hecho, ahora obtenemos estos ingredientes de matriz

293
00:15:41,110 --> 00:15:44,610
con A, B y C, que son las tres cuerdas

294
00:15:44,610 --> 00:15:46,003
que acabamos de escribir allí.

295
00:15:47,220 --> 00:15:49,610
Y ahora, ¿cómo deberíamos llamar

296
00:15:49,610 --> 00:15:51,373
la funcion de pedir pasta?

297
00:15:53,060 --> 00:15:57,730
Así que el restaurante no pide pasta.

298
00:15:57,730 --> 00:16:00,461
Y a la manera antigua, ahora escribiríamos

299
00:16:00,461 --> 00:16:05,461
ingredientes cero, ingredientes uno e ingredientes dos.

300
00:16:11,170 --> 00:16:13,790
Pero, desde que aprendimos sobre el operador de propagación

301
00:16:13,790 --> 00:16:17,290
en esta conferencia, ahora podemos hacerlo mucho mejor.

302
00:16:17,290 --> 00:16:20,630
Y así, en cambio, hacemos esto.

303
00:16:20,630 --> 00:16:23,543
Pasta de orden de punto de restaurante.

304
00:16:25,090 --> 00:16:28,170
Y ahora, todo lo que tenemos que hacer es expandir

305
00:16:28,170 --> 00:16:30,890
los elementos de la matriz de ingredientes,

306
00:16:30,890 --> 00:16:33,170
y eso básicamente

307
00:16:33,170 --> 00:16:35,810
escribir los tres elementos de la matriz

308
00:16:35,810 --> 00:16:37,383
aquí separados por comas.

309
00:16:38,990 --> 00:16:42,910
Entonces esto y esto deberían producir exactamente el mismo resultado,

310
00:16:42,910 --> 00:16:46,223
y ahora vamos a probarlo con algunos datos reales.

311
00:16:47,720 --> 00:16:52,720
Así que a ver, champiñones, espárragos y queso.

312
00:16:54,600 --> 00:16:57,040
Y así, en estos, tenemos ahora dos veces,

313
00:16:57,040 --> 00:16:58,460
aqui esta tu rica pasta

314
00:16:58,460 --> 00:17:02,160
con champiñones, espárragos y queso.

315
00:17:02,160 --> 00:17:04,420
¿Y cuál crees que es la mejor solución?

316
00:17:04,420 --> 00:17:07,030
¿Este, o este?

317
00:17:07,030 --> 00:17:09,430
Y especialmente considerando que una matriz

318
00:17:09,430 --> 00:17:11,540
podría, por supuesto, ser mucho más largo

319
00:17:11,540 --> 00:17:13,420
que solo tres elementos.

320
00:17:13,420 --> 00:17:15,268
Así que de hecho, siempre ve con esto

321
00:17:15,268 --> 00:17:18,680
sintaxis ES6 más moderna aquí.

322
00:17:18,680 --> 00:17:21,610
Es una adición increíble al lenguaje.

323
00:17:21,610 --> 00:17:24,310
Y ahora, solo para terminar esta conferencia aquí,

324
00:17:24,310 --> 00:17:27,490
desde ES 2018, el operador de propagación

325
00:17:27,490 --> 00:17:30,360
en realidad también funciona en objetos,

326
00:17:30,360 --> 00:17:32,937
aunque los objetos no son iterables.

327
00:17:34,800 --> 00:17:36,573
Así que vamos a escribir eso aquí.

328
00:17:37,740 --> 00:17:41,910
Y aquí vamos a escribir un ejemplo del mundo real.

329
00:17:47,110 --> 00:17:49,253
Y ahora vamos a experimentar con esto.

330
00:17:50,100 --> 00:17:52,200
El primer ejemplo aquí fue crear

331
00:17:52,200 --> 00:17:56,860
una nueva matriz basada en una matriz inicial, ¿verdad?

332
00:17:56,860 --> 00:18:00,220
Y ahora vamos a crear también un nuevo objeto de restaurante.

333
00:18:00,220 --> 00:18:02,540
con todos los datos del original

334
00:18:02,540 --> 00:18:04,493
más algunos datos adicionales.

335
00:18:05,610 --> 00:18:09,000
Y esta es realmente una manera increíble de hacer esto,

336
00:18:09,000 --> 00:18:12,660
porque es mucho más fácil que con el viejo JavaScript.

337
00:18:12,660 --> 00:18:15,423
Así que llamemos a este nuevo restaurante.

338
00:18:18,460 --> 00:18:22,560
Y luego podemos simplemente difundir el viejo restaurante

339
00:18:22,560 --> 00:18:25,080
y esto básicamente copiará todas las propiedades

340
00:18:25,080 --> 00:18:28,000
del restaurante en este nuevo objeto.

341
00:18:28,000 --> 00:18:30,690
Y luego podemos agregar lo que queramos.

342
00:18:30,690 --> 00:18:34,470
Fundador, por ejemplo, digamos Giuseppe,

343
00:18:34,470 --> 00:18:38,620
O Giuseppe, realmente no sé cómo decirlo.

344
00:18:38,620 --> 00:18:42,410
Y, por supuesto, aquí el orden no importa como siempre.

345
00:18:42,410 --> 00:18:46,400
Así que esta tirada aquí ni siquiera tiene que ser la primera.

346
00:18:46,400 --> 00:18:50,320
Así que digamos que también queremos el año de fundación,

347
00:18:50,320 --> 00:18:51,963
digamos 1998,

348
00:18:53,143 --> 00:18:54,390
¿bueno?

349
00:18:54,390 --> 00:18:56,963
Y así, con esto, creamos un objeto completamente nuevo.

350
00:18:57,840 --> 00:19:01,390
Ahora tenemos que deshacernos de estos tres avisos allí,

351
00:19:01,390 --> 00:19:04,543
porque de lo contrario, nos va a volver locos.

352
00:19:06,320 --> 00:19:07,770
Pero vamos a sacar esto,

353
00:19:11,130 --> 00:19:14,603
y simplemente registre aquí el nuevo restaurante en la consola.

354
00:19:16,320 --> 00:19:20,890
Y de hecho, obtenemos nuestro objeto original básicamente,

355
00:19:20,890 --> 00:19:23,773
más el fundador, y más fundado en.

356
00:19:24,640 --> 00:19:25,810
Excelente.

357
00:19:25,810 --> 00:19:27,960
Y finalmente, ya que pudimos hacer

358
00:19:27,960 --> 00:19:32,290
copias superficiales de matrices, utilizando el operador de propagación,

359
00:19:32,290 --> 00:19:34,740
podemos hacer lo mismo con los objetos.

360
00:19:34,740 --> 00:19:37,150
Entonces, en lugar de usar la asignación de punto de objeto,

361
00:19:37,150 --> 00:19:39,423
como lo hicimos en la lección anterior.

362
00:19:40,260 --> 00:19:41,403
Así que hagamos eso.

363
00:19:42,450 --> 00:19:45,173
Copia de restaurante.

364
00:19:46,140 --> 00:19:50,220
Entonces, todo lo que tenemos que hacer es un objeto vacío.

365
00:19:50,220 --> 00:19:52,680
y luego ahí expandir todos los elementos

366
00:19:52,680 --> 00:19:57,300
del objeto original, por lo que el restaurante, en este caso.

367
00:19:57,300 --> 00:20:00,553
Y ahora, si intentamos cambiar algo en la copia,

368
00:20:02,130 --> 00:20:05,990
copiar el nombre del punto,

369
00:20:05,990 --> 00:20:09,833
llamémoslo ahora Ristorante Roma,

370
00:20:12,950 --> 00:20:13,850
y si eres italiano,

371
00:20:13,850 --> 00:20:16,143
no te va a gustar cómo suena eso.

372
00:20:17,140 --> 00:20:22,040
Pero de todos modos, ahora, mientras echamos un vistazo a ambos,

373
00:20:22,040 --> 00:20:26,363
entonces el nombre de la copia y el original,

374
00:20:27,480 --> 00:20:29,653
ahora verás que son diferentes.

375
00:20:31,800 --> 00:20:35,650
Así que la copia tiene el nombre de Ristorante Roma,

376
00:20:35,650 --> 00:20:38,420
y el viejo tiene Classico Italiano,

377
00:20:38,420 --> 00:20:39,760
lo que significa que, en efecto,

378
00:20:39,760 --> 00:20:43,150
hicimos una copia del restaurante original.

379
00:20:43,150 --> 00:20:45,230
Porque de lo contrario, como aprendimos

380
00:20:45,230 --> 00:20:47,110
al final de la sección anterior,

381
00:20:47,110 --> 00:20:50,890
cambiar un objeto también cambiaría el otro.

382
00:20:50,890 --> 00:20:53,290
¿Bien? Fresco.

383
00:20:53,290 --> 00:20:55,840
Así que otra larga conferencia aquí,

384
00:20:55,840 --> 00:20:59,030
pero estamos haciendo un gran progreso.

385
00:20:59,030 --> 00:21:00,850
Y por supuesto, usaremos todo esto

386
00:21:00,850 --> 00:21:03,760
en proyectos reales más adelante.

387
00:21:03,760 --> 00:21:06,510
Pero nuevamente, elegí enseñarte estos conceptos.

388
00:21:06,510 --> 00:21:09,900
de forma separada y no dentro de un gran proyecto,

389
00:21:09,900 --> 00:21:11,540
porque esto me permite mostrarte

390
00:21:11,540 --> 00:21:13,750
muchos más ejemplos diferentes

391
00:21:13,750 --> 00:21:16,780
y también hace que el material sea más referenciable

392
00:21:16,780 --> 00:21:18,350
para ti en el futuro.

393
00:21:18,350 --> 00:21:19,900
Y eso va a ser útil

394
00:21:19,900 --> 00:21:22,490
cuando intentas encontrar lo que buscas

395
00:21:22,490 --> 00:21:24,023
después de tomar este curso.