for...of
文は、それぞれのプロパティの値に対して実行する文とともに独自の反復処理を呼び出す、(Array
, Map
, Set
, String
, TypedArray
, 引数オブジェクトなどを含む)iterable objectsに反復するループを作成します。
構文
for (variable of iterable) { statement }
variable
- それぞれの反復処理において、別々のプロパティの値が variable に代入されます。
iterable
- 列挙可能なプロパティに対して、反復処理を行うオブジェクトです。
例
Array
で反復する:
let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } // 10 // 20 // 30
ブロック内で変数を修正したくない場合、let
の代わりに const
を使用できます。
let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } // 10 // 20 // 30
String
で反復する:
let iterable = "boo"; for (let value of iterable) { console.log(value); } // "b" // "o" // "o"
TypedArray
で反復する:
let iterable = new Uint8Array([0x00, 0xff]); for (let value of iterable) { console.log(value); } // 0 // 255
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
Set
で反復する:
let iterable = new Set([1, 1, 2, 2, 3, 3]); for (let value of iterable) { console.log(value); } // 1 // 2 // 3
DOM コレクションで反復する
NodeList
のような DOM コレクションで反復する場合、次の例は read
クラスを article
の直系の子孫である段落(p
)に加えます:
// 注:特定のプラットホームでのみ動作します // implemented NodeList.prototype[Symbol.iterator] let articleParagraphs = document.querySelectorAll("article > p"); for (let paragraph of articleParagraphs) { paragraph.classList.add("read"); }
ジェネレーターで反復する
ジェネレーター(function*
) で反復することもできます:
function* fibonacci() { // ジェネレーター関数 let [prev, curr] = [1, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (let n of fibonacci()) { console.log(n); // 1000でシーケンスを打ち切る if (n >= 1000) { break; } }
反復可能オブジェクトで反復する
明示的に iterable プロトコルを実装しているオブジェクトを反復することもできます:
var iterable = { [Symbol.iterator]() { return { i: 0, next() { if (this.i < 3) { return { value: this.i++, done: false }; } return { value: undefined, done: true }; } }; } }; for (var value of iterable) { console.log(value); } // 0 // 1 // 2
for...of
と for...in
との違い
for...in
ループは、オブジェクトのすべての enumerable なプロパティを反復します。
for...of
構文は、全オブジェクトよりもむしろ、コレクションに特有です。これは、[Symbol.iterator]
プロパティを持つ任意のプロパティの要素全体をこの方法で反復します。
次の例は、for...of
ループと 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 }
仕様
仕様 | ステータス | コメント |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) for...of statement の定義 |
標準 | 初期定義。 |
ECMAScript 2017 Draft (ECMA-262) for...of statement の定義 |
ドラフト |
ブラウザー互換性
機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基本サポート | 5.1 | 38 [1] | 13.0 (13) [2] | 未サポート | ? | 8 |
[1] Chrome 29からChrome 37まで、この機能は設定から隠されていました。chrome://flags/#enable-javascript-harmony で、“Enable Experimental JavaScript” をアクティブにします。
[2] Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14)から Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2)まで、iterator
プロパティが使用され(bug 907077)、Gecko 27 から Gecko 35 まで "@@iterator"
プレースホルダーが使用されていました。Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33)で、@@iterator
symbol が実装されました(bug 918828)。
[3] オブジェクトの反復は Chrome 51 でサポートされました。
関連情報
- for each...in - 似ている文ですが、プロパティ名そのものではなく、オブジェクトのプロパティの値に対して反復します(非推奨)。
Array.prototype.forEach()
- Map.prototype.forEach()