Listado completo de tutoriales

ES6 - Estructura repetitiva 'for of'

Con ES6 disponemos una nueva estructura repetitiva para recorrer todos los elementos de un array, string, map, set etc.

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

Retornar