Ahora hablemos de una nueva forma de recorrer matrices,
que se introdujo en el año seis.
Y ese es el bucle for-of.
Y digamos que queremos recorrer todo nuestro menú aquí.
Así que empecemos por crear de nuevo,
la matriz con todo el menú.
Y para eso ampliamos el menú de inicio del restaurante dot
y menú principal del restaurante dot.
Así que nada nuevo en este punto.
Ahora ya sabes cómo hacer un bucle sobre esta matriz
con un bucle for normal, ¿verdad?
Así que tendrías que seguir todos los pasos.
de montar un contador, condición
y también actualizar el contador.
Y eso es mucho trabajo.
Y es por eso que tenemos el bucle for-of ahora
en el que no necesitas nada de eso.
Es mucho más simple.
Y así es como funciona.
Todavía escribimos para y luego creamos una variable aquí,
llamémoslo elemento por ahora
y luego de menú.
Y luego podemos iniciar sesión en la consola simplemente este elemento.
Así que vamos a ver si eso funciona
y luego voy a explicar por qué funciona
y lo que hace este bucle.
Entonces, de hecho, tenemos todos nuestros elementos aquí ahora,
registrado individualmente en la consola.
Así que este bucle for-of,
que se llama por-de
porque es para y luego elemento del menú, ¿verdad?
Entonces, este bucle se repetirá automáticamente en toda la matriz.
y en cada iteración,
nos dará acceso al elemento de matriz actual,
que podemos especificar aquí.
Así que en este caso se llama el elemento,
pero, por supuesto, podríamos llamarlo como queramos.
Entonces, si simplemente registramos el elemento actual
hasta la consola,
bueno, entonces esto es aquí lo que tenemos.
Simplemente cada elemento registrado uno por uno.
Y eso es porque de nuevo,
la variable item es siempre
el elemento actual en cada iteración.
Y también como en la instrucción if else,
no necesitamos crear un bloque de código
cuando solo tenemos una declaración aquí para ejecutar, ¿de acuerdo?
Así que eso es bastante simple,
pero es un muy buen nivel de obstrucción
sobre el bucle for normal.
Así que podemos hacer lo mismo con este,
pero sin tener que preocuparte
todos los detalles subyacentes
como contadores y condiciones.
Lo que también es genial del bucle for-of,
es que todavía podemos usar las palabras clave continuar y romper.
Y esto es importante porque en la siguiente sección,
aprenderá otras formas de crear bucles de matrices
y en esos,
no podrás continuar ni romper.
Así que tendrás que tener eso en cuenta.
Pero ahora, ¿y si también quisiéramos el índice actual?
y no solo el elemento actual?
Bueno, en el bucle for-of,
en realidad es un poco doloroso
cuando necesitamos ese índice,
porque originalmente el bucle for-of
realmente solo estaba destinado a darle el elemento actual.
Sin embargo, puede obtener ambos
y tendrás que hacerlo así.
Así que para y luego otra vez,
llamémoslo simplemente elemento,
pero ahora en lugar de solo menú,
ahora necesitamos llamar a las entradas,
un método en esta matriz.
Así que entradas y luego echemos un vistazo al artículo.
Y así como ves,
cada uno de los elementos ahora es en realidad una matriz
con el índice en el propio elemento de la matriz.
Así que echemos un vistazo rápido a
qué es en realidad esta misteriosa entrada de puntos de menú.
Así que las entradas de punto del menú,
y aquí tenemos este extraño iterador de matriz.
Y eso no es realmente útil,
pero aprenderemos sobre los iteradores
al final del curso.
Pero si queremos echar un vistazo a esto,
esencialmente necesitamos expandir esto aquí,
utilizando el operador de propagación
y luego crea una nueva matriz basada en eso.
De nuevo, esto es solo para echar un vistazo
en qué menú se encuentran realmente las entradas de puntos.
Y entonces vemos que es básicamente una matriz,
que en cada posición contiene una nueva matriz,
que contiene el elemento,
entonces el número de índice de la entidad del elemento de ese elemento
en la matriz original.
Y por eso es que obtenemos,
cero, uno, dos, tres, cuatro, cinco, seis,
más todos los elementos originales del menú.
Y esa es también la razón
¿Por qué entonces obtenemos esta salida de este ciclo ahora?
Porque aquí ahora básicamente tenemos esa matriz.
Y ahora cada elemento de esa matriz es,
bueno, esta nueva matriz.
Y ahora, si quisiéramos imprimir un buen menú,
entonces podríamos aprovechar estos datos ahora.
Así que no registremos algo mejor aquí.
Así que una cadena de plantilla.
Así que tomemos el primer elemento que es cero
y luego vamos a agregarle uno
para que podamos empezar el menú a la una.
Así que aquí básicamente vamos a mostrar como un buen menú
en un restaurante de verdad.
Y ahí los números no empiezan en cero, ¿verdad?
Y ahora aquí, el artículo en sí mismo,
por lo que está en la posición número uno.
Y eso se ve muy bien, ¿no?
Así que esto funciona muy bien aquí,
pero en realidad estamos en este punto
más inteligente que hacerlo así.
Y eso es porque si item ahora es una matriz,
podemos desestructurarlo.
No tenemos que tomar manualmente el elemento cero y el elemento uno,
esa es la manera de la vieja escuela.
Así que ahora hagámoslo de una mejor manera.
Y así podemos desestructurar el artículo,
matriz aquí, aquí mismo.
Todo lo que tenemos que hacer es usar la asignación de desestructuración
y luego crear las dos variables que queremos.
Así que llamémoslo i y el para elemento.
Así que aquí podemos usar el elemento i y here.
Así que eso está comprobado y, de hecho, funciona igual.
Y así una vez más estos estructurantes
nos hizo la vida un poco más fácil aquí.
Así que es una gran adición
al lenguaje JavaScript aquí una vez más.
Y lo mismo es, por supuesto, cierto
para el propio bucle for-of,
que también lo hace mucho más fácil
para recorrer matrices.