Widely available すべての主要ブラウザで対応済み。安心して使用可能。
イテレータ Widely available

Iterators and the for...of loop

イテレータプロトコルは Symbol.iterator メソッドを実装するオブジェクトで、for...of ループ、スプレッド構文、分割代入で使用されます。

イテレータES2015

概要

イテレータプロトコルは Symbol.iterator メソッドを実装するオブジェクトで、for...of ループ、スプレッド構文、分割代入で使用されます。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Iterator
38
12
17
10
38
10
Iterator.@@iterator

[Symbol.iterator]() は Iterator インスタンスのメソッドで、反復可能プロトコルを実行し、組み込みイテレーターが反復可能オブジェクトを期待する大部分の構文、例えばスプレッド構文や Statements/for...of ループなどで利用できるようにします。これは this の値、すなわちイテレーターオブジェクト自身を返します。
38
12
36
10
38
10
その他
javascript.statements.for_of

for...of 文は、反復可能オブジェクトをソースとした一連の値を処理するループを実行します。反復可能オブジェクトには、 たとえば組み込みの Array, String, TypedArray, Map, Set, NodeList（およびその他の DOM コレクション）、同様に Functions/arguments オブジェクトや、ジェネレーター関数から生成されるジェネレーター、ユーザー定義の反復可能オブジェクトなどがあります。
38
12
13
7
38
7
ステートメント
closing iterators

反復子を閉じる
51
14
53
7
51
7
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 5件
削除済み
  • このバージョンで機能が削除されました (36)
  • このバージョンで機能が削除されました (27)
対応条件
  • 以前は別名で対応していました: @@iterator (27)
  • 以前は別名で対応していました: iterator (17)
実装メモ
  • iterator`という名前のプレースホルダ・プロパティが使われる。
注釈 1件
実装メモ
  • Firefox 51 より前のバージョンでは、`for...of` のループ構文で `const` キーワードを使用すると、`SyntaxError` ("missing = in const declaration") が発生しました。

基本構文

JAVASCRIPT 
// for...of loop
for (const value of [1, 2, 3]) {
  console.log(value);
}

// Custom iterator
const range = {
  from: 1, to: 5,
  [Symbol.iterator]() {
    let current = this.from;
    return {
      next: () => current <= this.to
        ? { value: current++, done: false }
        : { done: true }
    };
  }
};

ライブデモ

Iterate with For...of loop.

Array from element one getout, 1 per and to display..

プレビュー全画面表示

Manual Control with next()

itere-ta from next Use, taiming in next. Element read..

プレビュー全画面表示

Spread with Spread syntax.

iteral object one in array to convertdisplay..

プレビュー全画面表示

実務での使いどころ

  • Iterators and the for...of loop の活用

    イテレータと for...of ループ。配列・Map・Set 等の反復可能オブジェクトを統一的に処理する仕組み。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク

Powered by web-features