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 2017 Draft (ECMA-262) The definition of 'for...of statement' in that specification. |
Draft |
Compatibilità con i browser
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
- for each...in - a similar statement, but iterates over the values of object's properties, rather than the property names themselves (deprecated).
Array.prototype.forEach()
- Map.prototype.forEach()