Novedades ES6

Novedades de ES6 - Estructura repetitiva 'for of'

La sentencia sentencia for...of ejecuta un bloque de código para cada elemento de un objeto iterable, como lo son: String, Array, objetos similares a array , TypedArray, Map, Set e iterables definidos por el usuario.

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())