Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

Il costrutto for...of crea un ciclo con gli oggetti iterabili (inclusi Array, Map, Set, String, TypedArray, argomenti di oggetti e così via), iterando le istruzioni per ogni valore di ogni proprietà.

Sintassi

for (variabile of oggettoIterabile) {
  istruzioni
}
variabile

Questa variabile assume il valore di una proprietà in ogni ciclo.
oggettoIterabile
Oggetto le cui proprietà sono iterate.

Esempi

Iterare un Array:

let array = [10, 20, 30];

for (let valore of array) {
  console.log(valore);
}
// Output:
// 10
// 20
// 30

Si può utilizzare const anzichè let se 'value' non cambia valore durante il ciclo.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value); // il valore di value di questo ciclo rimarrà costante
  value++; // operazione non consentita.
}
// 10
// 20
// 30

Iterare un oggetto String:

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// output:
// "b"
// "o"
// "o"

Iterare un oggetto TypedArray:

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

Iterare un oggetto Map:

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Iterare un oggetto Set:

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Iterare un DOM collection

Iterare un DOM collection come NodeList: il seguente esempio aggiunge una classe 'read' ai paragrafi che sono discendenti diretti di un elemento article:

Nota: Questo costrutto funziona soltanto con le piattaforme che implementano NodeList.prototype[Symbol.iterator]

let articleParagraphs = document.querySelectorAll("article > p");

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

Iterare generatori

Si possono iterare i generatori:

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

for (let n of fibonacci()) {
  console.log(n);
  // tronca la sequenza a 1000
  if (n >= 1000) {
    break;
  }
}

Differerenze tra for...of e for...in

Il for...in itera tutte le proprietà enumerabili di un oggetto.

Il for...of è specifico per le collezioni, piuttosto che tutti gli oggetti. Itera tutti gli oggetti di qualsiasi collection che abbia la proprietà [Symbol.iterator].

Il seguente esempio mostra le differenze tra for...of e for...in.

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

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

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

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

Specifiche

Specifica Stato Commenti
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'for...of statement' in that specification.
Standard Definizione iniziale.
ECMAScript Latest Draft (ECMA-262)
The definition of 'for...of statement' in that specification.
Draft  

Compatibilità con i browser

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Edge Opera Safari
Basic support 38 [1]
51 [3]
13 (13) [2] 12 25 7.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 38 [1] 13.0 (13) [2] ? ? 8

[1] Da Chrome 29 a Chrome 37 questa caratteristica era disponibile nel menu preferenze. In chrome://flags/#enable-javascript-harmony, bisognava attivare “Enable Experimental JavaScript”.

[2] Da Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) a Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) la proprietà iterator era usata (bug 907077), e da Gecko 27 a Gecko 35 era utilizzato "@@iterator" placeholder. In Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), il simbolo symbolo @@iterator fu implementato (bug 918828).

[3] Il supporto dell'iteration of objects è stato aggiunto in Chrome 51.

Note

Se alcuni collegamenti su questa pagina fossero segnati in rosso e si volesse visualizzarli, essi sono dispoiìnibili solo in lingua inglese. In tal caso basta cambiare la lingua di questo stesso articolo.

See also

 

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: jspkay
Ultima modifica di: jspkay,