Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

for...of

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La sentencia for...of crea un ciclo que itera sobre objetos iterables (incluyendo ArrayMap, 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

Especificación Estatus Cometario
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'for...of statement' in that specification.
Standard definición inicial.
ECMAScript 2016 Draft (7th Edition, ECMA-262)
The definition of 'for...of statement' in that specification.
Draft  

Compatibilidad de navegadores

Feature Chrome Firefox (Gecko) Edge Opera Safari
Soporte básico 38 [1] 13 (13) [2] 12 25 7.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico ? 38 [1] 13.0 (13) [2] ? ? 8

[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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Angarsk8
 Última actualización por: Angarsk8,