 |
Novedades de ES6 - Estructura repetitiva 'for of'
Con ES6 disponemos una nueva estructura repetitiva para recorrer todos los elementos de un array, string, map, set etc.
Sintaxis
for (variable of iterable) {
statement
}
- variable En cada iteración el elemento (propiedad enumerable) correspondiente es asignado a variable.
- iterable Objeto cuyas propiedades enumerables son iteradas.
Diferencia entre for...of y for...in
El bucle for...in iterará sobre todas las propiedades de un objeto. Más tecnicamente, iterará sobre cualquier propiedad en el objeto que haya sido internamente definida con su propiedad [[Enumerable]] configurada como true.
La sintaxis de for...of es específica para las colecciones, y no para todos los objetos. Esta Iterará sobre cualquiera de los elementos de una colección que tengan la propiedad [Symbol.iterator].
El siguiente ejemplo muestra las diferencias entre un bucle for...of y un bucle for...in.
En forma muy sencilla podemos acceder por ejemplo a cada caracter de un string:
const cadena='Hola Mundo';
for(let letra of cadena)
document.write(`${letra}<br>`);
Como resultado de ejecutar éste algoritmo de JavaScript tenemos la impresión de cada caracter en una línea distinta en la página.
Podemos recorrer también un array:
const vector=[10, 40, 60, 5];
let suma=0;
for(let elemento of vector)
suma+=elemento;
document.write(`La suma de todos los elementos del vector es:${suma}`);
Problema
Se tiene el siguiente vector con 3 objetos literales con los datos de personas. Imprimir el nombre y edad de las personas mayores de edad:
const personas = [
{
nombre:'juan',
edad:45
},
{
nombre:'ana',
edad:12
},
{
nombre:'luis',
edad:16
},
{
nombre:'cristina',
edad:76
}
];
Luego el programa que recorre el array y accede a cada objeto almacenado mediante un for of:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<script>
const personas = [
{
nombre:'juan',
edad:45
},
{
nombre:'ana',
edad:12
},
{
nombre:'luis',
edad:16
},
{
nombre:'cristina',
edad:76
}
];
document.write('<h1>Personas mayores de edad.</h1>');
for(let persona of personas)
if (persona.edad>=18)
document.write(`${persona.nombre} y tiene ${persona.edad} años.<br>`);
</script>
</body>
</html>
Mediante un for of recorremos cada componente del array. En la variable persona se almacena en cada repetición del for of un elemento del array:
for(let persona of personas)
if (persona.edad>=18)
document.write(`${persona.nombre} y tiene ${persona.edad} años.<br>`);
Recuperar el valor y el índice que ocupa un elemento dentro del arreglo.
Imprimir todos los elementos de un array y la posición que ocupa dentro del mismo:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<script>
const vector=[10, 40, 60, 5];
for(let [indice, valor] of vector.entries())
document.write(`${valor} ocupa la posición ${indice}<br>`);
</script>
</body>
</html>
El método entries() devuelve un arreglo con dos valores: la posición del elemento y el valor del mismo:
for(let [indice, valor] of vector.entries())