Otro tipo de bucle que se puede utilizar en el lenguaje JavaScript, es el que denominamos, el bucle for…of, se podría definir como un bucle incondicional, ya que no utiliza una condición para su funcionamiento.
El bucle se podría traducir por Para…De. Y tiene la siguiente sintaxis.
// Bucle For ... Of
for(var variable of objeto_iterable) {
Acción1;
Acción2;
AcciónN...;
}
El funcionamiento del bucle seria el siguiente, al entrar al bucle se define una variable, normalmente con var, de esta forma la variable queda disponible de forma local a toda la función donde se encuentra el bucle, a continuación se especifica el objeto sobre el cual se quiere realizar la iteración, en cada iteración a diferencia del bucle for…in en vez de leerse la propiedad se lee el valor de la misma y el valor es asignado a la variable definida anteriormente, el bucle finaliza cuando no encuentra más valores de las propiedades que leer del objeto.
Se ha de tener en cuenta que este tipo de bucle funciona correctamente sobre algunos objetos nativos como pueden ser Array o Map, ya que estos tienen un comportamiento de iteración por defecto, hay otro tipo de objetos como Object que no incorporan este iterador. Para que se puedan iterar este ultimo tipo de objeto este ha de implementar un metodo iterador, el cual ya explicaremos.
El siguiente ejemplo muestra el funcionamiento del bucle for…of, visualizando los valores de una matriz (array).
// se crea la matriz (array) de elementos
var nombresPersonas = new Array();
// se insertan elementos en el array utilizando el metodo push
nombresPersonas.push("Mar");
nombresPersonas.push("Nacho");
nombresPersonas.push("Lucía");
nombresPersonas.push("Pedro");
// Ordenamos el array de A-Z utilizando el metodo sort por defecto
nombresPersonas.sort();
// visualizar titulo
document.write('<h2>Vector A-Z</h2>');
// Recorrer el array utilizando for...of
for(let nombreLeido of nombresPersonas) {
document.write('<br>' + nombreLeido);
}
// Invertimos los valores del array utilizando el metodo reverse
// de esta forma obtenemos el array ordenado de Z-A
nombresPersonas.reverse();
// visualizar titulo
document.write('<h2>Vector Z-A</h2>');
// Volvemos a visualizar los datos del vector
for(let nombre of nombresPersonas) {
document.write('<br>' + nombre);
}
Al ejecutar el programa, el resultado que ha de mostrar el navegador en su consola, ha de ser similar al que se muestra a continuación.
Gracias por vuestra visita y un saludo!!!
Busca tu Articulo
Utiliza este buscador para encontrar el articulo que te interesa, si no existe la practica o ejercicio, deja un comentario proponiendo que realicemos un articulo sobre el, gracias por vuestra visita y un saludo!!