1
00:00:01,570 --> 00:00:05,550
Ahora hablemos de una nueva forma de recorrer matrices,

2
00:00:05,550 --> 00:00:08,470
que se introdujo en el año seis.

3
00:00:08,470 --> 00:00:10,723
Y ese es el bucle for-of.

4
00:00:12,490 --> 00:00:16,283
Y digamos que queremos recorrer todo nuestro menú aquí.

5
00:00:17,300 --> 00:00:20,000
Así que empecemos por crear de nuevo,

6
00:00:20,000 --> 00:00:23,130
la matriz con todo el menú.

7
00:00:23,130 --> 00:00:28,130
Y para eso ampliamos el menú de inicio del restaurante dot

8
00:00:29,570 --> 00:00:33,923
y menú principal del restaurante dot.

9
00:00:34,840 --> 00:00:38,180
Así que nada nuevo en este punto.

10
00:00:38,180 --> 00:00:41,670
Ahora ya sabes cómo hacer un bucle sobre esta matriz

11
00:00:41,670 --> 00:00:44,670
con un bucle for normal, ¿verdad?

12
00:00:44,670 --> 00:00:46,860
Así que tendrías que seguir todos los pasos.

13
00:00:46,860 --> 00:00:49,830
de montar un contador, condición

14
00:00:49,830 --> 00:00:52,170
y también actualizar el contador.

15
00:00:52,170 --> 00:00:53,820
Y eso es mucho trabajo.

16
00:00:53,820 --> 00:00:57,140
Y es por eso que tenemos el bucle for-of ahora

17
00:00:57,140 --> 00:00:59,520
en el que no necesitas nada de eso.

18
00:00:59,520 --> 00:01:01,620
Es mucho más simple.

19
00:01:01,620 --> 00:01:03,360
Y así es como funciona.

20
00:01:03,360 --> 00:01:08,360
Todavía escribimos para y luego creamos una variable aquí,

21
00:01:09,330 --> 00:01:11,400
llamémoslo elemento por ahora

22
00:01:11,400 --> 00:01:15,110
y luego de menú.

23
00:01:15,110 --> 00:01:19,823
Y luego podemos iniciar sesión en la consola simplemente este elemento.

24
00:01:21,190 --> 00:01:22,760
Así que vamos a ver si eso funciona

25
00:01:22,760 --> 00:01:25,710
y luego voy a explicar por qué funciona

26
00:01:25,710 --> 00:01:28,060
y lo que hace este bucle.

27
00:01:28,060 --> 00:01:30,720
Entonces, de hecho, tenemos todos nuestros elementos aquí ahora,

28
00:01:30,720 --> 00:01:33,720
registrado individualmente en la consola.

29
00:01:33,720 --> 00:01:35,950
Así que este bucle for-of,

30
00:01:35,950 --> 00:01:37,360
que se llama por-de

31
00:01:37,360 --> 00:01:42,360
porque es para y luego elemento del menú, ¿verdad?

32
00:01:42,790 --> 00:01:47,200
Entonces, este bucle se repetirá automáticamente en toda la matriz.

33
00:01:47,200 --> 00:01:48,620
y en cada iteración,

34
00:01:48,620 --> 00:01:52,190
nos dará acceso al elemento de matriz actual,

35
00:01:52,190 --> 00:01:54,690
que podemos especificar aquí.

36
00:01:54,690 --> 00:01:57,070
Así que en este caso se llama el elemento,

37
00:01:57,070 --> 00:02:00,360
pero, por supuesto, podríamos llamarlo como queramos.

38
00:02:00,360 --> 00:02:03,040
Entonces, si simplemente registramos el elemento actual

39
00:02:03,040 --> 00:02:04,840
hasta la consola,

40
00:02:04,840 --> 00:02:07,570
bueno, entonces esto es aquí lo que tenemos.

41
00:02:07,570 --> 00:02:10,720
Simplemente cada elemento registrado uno por uno.

42
00:02:10,720 --> 00:02:12,560
Y eso es porque de nuevo,

43
00:02:12,560 --> 00:02:14,960
la variable item es siempre

44
00:02:14,960 --> 00:02:18,180
el elemento actual en cada iteración.

45
00:02:18,180 --> 00:02:21,840
Y también como en la instrucción if else,

46
00:02:21,840 --> 00:02:23,930
no necesitamos crear un bloque de código

47
00:02:23,930 --> 00:02:28,533
cuando solo tenemos una declaración aquí para ejecutar, ¿de acuerdo?

48
00:02:29,720 --> 00:02:31,370
Así que eso es bastante simple,

49
00:02:31,370 --> 00:02:34,370
pero es un muy buen nivel de obstrucción

50
00:02:34,370 --> 00:02:36,310
sobre el bucle for normal.

51
00:02:36,310 --> 00:02:38,700
Así que podemos hacer lo mismo con este,

52
00:02:38,700 --> 00:02:41,150
pero sin tener que preocuparte

53
00:02:41,150 --> 00:02:43,230
todos los detalles subyacentes

54
00:02:43,230 --> 00:02:46,670
como contadores y condiciones.

55
00:02:46,670 --> 00:02:49,210
Lo que también es genial del bucle for-of,

56
00:02:49,210 --> 00:02:53,430
es que todavía podemos usar las palabras clave continuar y romper.

57
00:02:53,430 --> 00:02:56,270
Y esto es importante porque en la siguiente sección,

58
00:02:56,270 --> 00:02:59,020
aprenderá otras formas de crear bucles de matrices

59
00:02:59,020 --> 00:02:59,940
y en esos,

60
00:02:59,940 --> 00:03:03,760
no podrás continuar ni romper.

61
00:03:03,760 --> 00:03:06,053
Así que tendrás que tener eso en cuenta.

62
00:03:07,440 --> 00:03:11,100
Pero ahora, ¿y si también quisiéramos el índice actual?

63
00:03:11,100 --> 00:03:13,570
y no solo el elemento actual?

64
00:03:13,570 --> 00:03:15,450
Bueno, en el bucle for-of,

65
00:03:15,450 --> 00:03:17,280
en realidad es un poco doloroso

66
00:03:17,280 --> 00:03:19,280
cuando necesitamos ese índice,

67
00:03:19,280 --> 00:03:22,030
porque originalmente el bucle for-of

68
00:03:22,030 --> 00:03:25,930
realmente solo estaba destinado a darle el elemento actual.

69
00:03:25,930 --> 00:03:27,790
Sin embargo, puede obtener ambos

70
00:03:27,790 --> 00:03:29,973
y tendrás que hacerlo así.

71
00:03:31,360 --> 00:03:34,683
Así que para y luego otra vez,

72
00:03:35,690 --> 00:03:37,053
llamémoslo simplemente elemento,

73
00:03:38,160 --> 00:03:40,950
pero ahora en lugar de solo menú,

74
00:03:40,950 --> 00:03:43,220
ahora necesitamos llamar a las entradas,

75
00:03:43,220 --> 00:03:45,093
un método en esta matriz.

76
00:03:46,600 --> 00:03:51,600
Así que entradas y luego echemos un vistazo al artículo.

77
00:03:55,990 --> 00:03:57,723
Y así como ves,

78
00:03:58,930 --> 00:04:01,390
cada uno de los elementos ahora es en realidad una matriz

79
00:04:01,390 --> 00:04:04,653
con el índice en el propio elemento de la matriz.

80
00:04:05,520 --> 00:04:07,060
Así que echemos un vistazo rápido a

81
00:04:07,060 --> 00:04:10,723
qué es en realidad esta misteriosa entrada de puntos de menú.

82
00:04:12,530 --> 00:04:14,803
Así que las entradas de punto del menú,

83
00:04:16,650 --> 00:04:21,320
y aquí tenemos este extraño iterador de matriz.

84
00:04:21,320 --> 00:04:23,490
Y eso no es realmente útil,

85
00:04:23,490 --> 00:04:25,370
pero aprenderemos sobre los iteradores

86
00:04:25,370 --> 00:04:27,440
al final del curso.

87
00:04:27,440 --> 00:04:29,900
Pero si queremos echar un vistazo a esto,

88
00:04:29,900 --> 00:04:32,830
esencialmente necesitamos expandir esto aquí,

89
00:04:32,830 --> 00:04:35,160
utilizando el operador de propagación

90
00:04:35,160 --> 00:04:38,363
y luego crea una nueva matriz basada en eso.

91
00:04:40,310 --> 00:04:42,700
De nuevo, esto es solo para echar un vistazo

92
00:04:42,700 --> 00:04:46,100
en qué menú se encuentran realmente las entradas de puntos.

93
00:04:46,100 --> 00:04:49,480
Y entonces vemos que es básicamente una matriz,

94
00:04:49,480 --> 00:04:52,190
que en cada posición contiene una nueva matriz,

95
00:04:52,190 --> 00:04:54,433
que contiene el elemento,

96
00:04:55,470 --> 00:04:58,800
entonces el número de índice de la entidad del elemento de ese elemento

97
00:04:58,800 --> 00:05:00,930
en la matriz original.

98
00:05:00,930 --> 00:05:02,430
Y por eso es que obtenemos,

99
00:05:02,430 --> 00:05:05,750
cero, uno, dos, tres, cuatro, cinco, seis,

100
00:05:05,750 --> 00:05:09,843
más todos los elementos originales del menú.

101
00:05:11,270 --> 00:05:12,710
Y esa es también la razón

102
00:05:12,710 --> 00:05:16,230
¿Por qué entonces obtenemos esta salida de este ciclo ahora?

103
00:05:16,230 --> 00:05:19,380
Porque aquí ahora básicamente tenemos esa matriz.

104
00:05:19,380 --> 00:05:23,470
Y ahora cada elemento de esa matriz es,

105
00:05:23,470 --> 00:05:24,853
bueno, esta nueva matriz.

106
00:05:26,320 --> 00:05:30,180
Y ahora, si quisiéramos imprimir un buen menú,

107
00:05:30,180 --> 00:05:33,890
entonces podríamos aprovechar estos datos ahora.

108
00:05:33,890 --> 00:05:36,830
Así que no registremos algo mejor aquí.

109
00:05:36,830 --> 00:05:38,203
Así que una cadena de plantilla.

110
00:05:41,040 --> 00:05:45,120
Así que tomemos el primer elemento que es cero

111
00:05:45,120 --> 00:05:47,230
y luego vamos a agregarle uno

112
00:05:48,700 --> 00:05:51,490
para que podamos empezar el menú a la una.

113
00:05:51,490 --> 00:05:54,660
Así que aquí básicamente vamos a mostrar como un buen menú

114
00:05:54,660 --> 00:05:56,200
en un restaurante de verdad.

115
00:05:56,200 --> 00:05:59,073
Y ahí los números no empiezan en cero, ¿verdad?

116
00:06:01,460 --> 00:06:04,490
Y ahora aquí, el artículo en sí mismo,

117
00:06:04,490 --> 00:06:06,253
por lo que está en la posición número uno.

118
00:06:07,360 --> 00:06:10,570
Y eso se ve muy bien, ¿no?

119
00:06:10,570 --> 00:06:12,620
Así que esto funciona muy bien aquí,

120
00:06:12,620 --> 00:06:14,640
pero en realidad estamos en este punto

121
00:06:14,640 --> 00:06:17,310
más inteligente que hacerlo así.

122
00:06:17,310 --> 00:06:21,030
Y eso es porque si item ahora es una matriz,

123
00:06:21,030 --> 00:06:22,690
podemos desestructurarlo.

124
00:06:22,690 --> 00:06:27,690
No tenemos que tomar manualmente el elemento cero y el elemento uno,

125
00:06:27,690 --> 00:06:29,720
esa es la manera de la vieja escuela.

126
00:06:29,720 --> 00:06:31,840
Así que ahora hagámoslo de una mejor manera.

127
00:06:31,840 --> 00:06:35,660
Y así podemos desestructurar el artículo,

128
00:06:35,660 --> 00:06:38,160
matriz aquí, aquí mismo.

129
00:06:38,160 --> 00:06:42,350
Todo lo que tenemos que hacer es usar la asignación de desestructuración

130
00:06:42,350 --> 00:06:45,290
y luego crear las dos variables que queremos.

131
00:06:45,290 --> 00:06:50,290
Así que llamémoslo i y el para elemento.

132
00:06:50,370 --> 00:06:55,220
Así que aquí podemos usar el elemento i y here.

133
00:06:55,220 --> 00:06:59,760
Así que eso está comprobado y, de hecho, funciona igual.

134
00:06:59,760 --> 00:07:01,580
Y así una vez más estos estructurantes

135
00:07:01,580 --> 00:07:04,690
nos hizo la vida un poco más fácil aquí.

136
00:07:04,690 --> 00:07:06,580
Así que es una gran adición

137
00:07:06,580 --> 00:07:09,890
al lenguaje JavaScript aquí una vez más.

138
00:07:09,890 --> 00:07:11,610
Y lo mismo es, por supuesto, cierto

139
00:07:11,610 --> 00:07:14,600
para el propio bucle for-of,

140
00:07:14,600 --> 00:07:16,440
que también lo hace mucho más fácil

141
00:07:16,440 --> 00:07:18,033
para recorrer matrices.