for...of

La sentencia for...of crea un ciclo que itera sobre objetos iterables (incluyendo Array, Map, Set, el objeto arguments, etc), invocando una iteración personalizada con sentencias por ser ejecutadas para el valor de cada propiedad.

Sintaxis

for (variable of object) {
  statement
}

variable

En cada iteración el valor de un propiedad diferente es asignado a variable. 

object

Objecto cuyas propieades enumerables son iteradas. 

Ejemplos

Diferencia entre for...of y for...in

El ciclo 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 [[Enumerbale]]configurada como verdadera. 

La sintaxis de  for...of es específica de las colecciones, y no de todos los objetos. Este Iterará  sobre cualquiera de los elementos de una colección que tengan la propiedad [Symbol.iterator].

El siguiente ejemplo muestra las diferencias entre un ciclo for...of y un  ciclo for...in . 

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

Usando Array.prototype.forEach()

Para obtener los mismos valores de las propiedades que retornaría el ciclo for...of, se puede usar también el método Array.prototype.forEach():

let arr = [3, 5, 7];
arr.foo = "hello";

arr.forEach(function (element, index) {
    console.log(element); // logs "3", "5", "7"
    console.log(index);   // logs "0", "1", "2"
});

// or with Object.keys()

Object.keys(arr).forEach(function (element, index) {
    console.log(arr[element]); // logs "3", "5", "7", "hello"
    console.log(arr[index]);   // logs "3", "5", "7", undefined
});

Iterando sobre colecciones del DOM

Iterando sobre colecciones del DOM como NodeList: el siguiente ejemplo adiciona una clase read a los párrafos que son descendientes directos de un artículo:

// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

Iterando sobre generadores (generators)

Tu también puedes iterar sobre generadores:

function* fibonacci() { // a generator function
    let [prev, curr] = [0, 1];
    while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    console.log(n);
    // truncate the sequence at 1000
    if (n >= 1000) {
        break;
    }
}

Especificaciones

Compatibilidad de navegadores

[1] Desde Chrome 29 a Chrome 37 esta funcionalidad estuvo disponible detrás de una preferencia. In chrome://flags/#enable-javascript-harmony, activa el campo “Enable Experimental JavaScript”.

[2] Desde Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) a Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) la propiedad  iterador fue usada (bug 907077), y desde Gecko 27 a Gecko 35 el símbolo "@@iterator" fue usado. En Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), el símbolo @@iterator fue implementado (bug 918828).

Vea también

• for each...in - una sentencia similar, pero itera sobre los valores de las propiedades de objetos, en vez de los nombres de las propiedades (obsoleto).
• Array.prototype.forEach()