for...of

反復処理可能なオブジェクト (Array、Array に類似するオブジェクト、イテレータやジェネレータを含む) に反復処理を行い、各々のプロパティの値に対して実行する文とともに独自の反復処理のフックを呼び出します。

構文

for (variable of object)
  statement

variable

各々の反復処理において、別々のプロパティの値が variable に代入されます。

object

列挙可能なプロパティに対して、反復処理を行うオブジェクトです。

例

以下の例で、for...of ループと for...in ループの違いを示します。for...in はプロパティ名に対して反復するのに対して、for...of はプロパティの値に対して反復します:

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

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

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

NodeList のような DOM コレクションへの反復処理: 以下の例では、article の直系の子孫要素であるパラグラフに対して read クラスを追加しています:

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

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

ジェネレータに対して反復することも可能です:

// 注記: "function*" は Firefox でサポートしていません。
// Firefox 13 でこのコードを動作させるには、アスタリスクを削除してください。

function* fibonacci() { // ジェネレータ関数
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    // 1000 のときに反復終了
    if (n > 1000)
        break;
    print(n);
}

ブラウザ実装状況

関連情報

• for each...in - 似ている文ですが、プロパティ名そのものではなく、オブジェクトのプロパティの値に対して反復します。(JavaScript 1.6 の新機能ですが非推奨です)
• Array.forEach()