ECMAScript 2015 に追加された 2 つのプロトコルです(新しい構文やビルトインではありません)。規約を満たす任意のオブジェクトに実装することができます。
iterable プロトコルと iterator プロトコルの 2 つのプロトコルがあります。
iterable プロトコル
iterable (反復可能)プロトコルによって、JavaScript オブジェクトは、for..of
構造で値がループしているもの等の反復動作を定義、または、カスタマイズできます。Array
やMap
のように、いくつかのビルトインの型はデフォルトの反復動作を持っているビルトイン iterables です。一方、(Object
のような)他の型は反復動作を持ちません。
iterable であるために、オブジェクトは@@iterator メソッドを実装する必要があります。これはつまり、オブジェクト(または、prototype chain オブジェクトの一つ)が
定数にて利用できる @@iterator キーのプロパティを持つ必要があります。:Symbol.iterator
プロパティ | 値 |
---|---|
[Symbol.iterator] |
iterator プロトコルに準拠するオブジェクトを返す、引数なしの関数。 |
(for..of
ループの始まりのように)オブジェクトが反復される必要があるときはいつでも、その@@iterator
メソッドが引数なしで呼ばれます。そして、返される iterator は、反復される値を取得するために使用されます。
iterator プロトコル
iterator プロトコルは、値のシーケンスを生成するための標準的な方法を定義します(有限または無限のいずれか)。
次のセマンティクスで next()
メソッドを実装するとき、オブジェクトはイテレーターです。:
プロパティ | 値 |
---|---|
next |
引き数なしの関数。二つのプロパティを持つオブジェクトを返します。:
|
いくつかのイテレーターは次々にイテレート可能です:
var someArray = [1, 5, 7]; var someArrayEntries = someArray.entries(); someArrayEntries.toString(); // "[object Array Iterator]" someArrayEntries === someArrayEntries[Symbol.iterator](); // true
例: iteration protocols を使う
String
はビルトイン反復可能オブジェクトの例です。:
var someString = "hi"; typeof someString[Symbol.iterator]; // "function"
String
のデフォルトイテレーターは一つづつ String の文字を返します。:
var iterator = someString[Symbol.iterator](); iterator + ""; // "[object String Iterator]" iterator.next(); // { value: "h", done: false } iterator.next(); // { value: "i", done: false } iterator.next(); // { value: undefined, done: true }
spread演算子のように、内部で同じ反復プロトコルを使っているビルトインコンストラクタもあります:
[...someString] // ["h", "i"]
自身の@@iterator
を供給することによって反復動作を再定義できます。:
var someString = new String("hi"); // need to construct a String object explicitly to avoid auto-boxing someString[Symbol.iterator] = function() { return { // this is the iterator object, returning a single element, the string "bye" next: function() { if (this._first) { this._first = false; return { value: "bye", done: false }; } else { return { done: true }; } }, _first: true }; };
@@iterator
を再定義することによって、iteration プロトコルを使用するビルトインコンストラクタの動作にどれほど影響を与えるか注意してください:
[...someString]; // ["bye"] someString + ""; // "hi"
反復の例
ビルトインの反復可能オブジェクト
String
、Array
、TypedArray
、Map
、Set
は、すべてのビルトイン反復可能オブジェクトです。というのも、それらすべてのプロトタイプオブジェクトは@@
iterator
メソッドをもつからです。
ユーザー定義反復可能オブジェクト
下記のように反復可能オブジェクトを生成できます。:
var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...myIterable]; // [1, 2, 3]
反復可能オブジェクトを受け入れる組み込み API
反復可能オブジェクトを受け入れる多くの API があります。例えば: Map([iterable])
、WeakMap([iterable])
、Set([iterable])
、WeakSet([iterable])
:
var myObj = {}; new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2); // "b" new WeakMap([[{},"a"],[myObj,"b"],[{},"c"]]).get(myObj); // "b" new Set([1, 2, 3]).has(3); // true new Set("123").has("2"); // true new WeakSet(function*() { yield {}; yield myObj; yield {}; }()).has(myObj); // true
他には、Promise.all(iterable)
、Promise.race(iterable)
、Array.from()
があります。
反復可能オブジェクトを期待する構文
いくつかのステートメントや式は反復可能オブジェクトを期待しています。例えば、for-of
ループ、spread syntax、yield*
、destructuring assignment
for(let value of ["a", "b", "c"]){ console.log(value); } // "a" // "b" // "c" [..."abc"]; // ["a", "b", "c"] function* gen(){ yield* ["a", "b", "c"]; } gen().next(); // { value:"a", done:false } [a, b, c] = new Set(["a", "b", "c"]); a // "a"
非整形反復可能オブジェクト
反復可能オブジェクトの@@iterator
メソッドが反復オブジェクトを返さない場合、その反復可能オブジェクトは非整形反復可能オブジェクトです。それは、ランタイム例外やバグの挙動をもたらす可能性があります。:
var nonWellFormedIterable = {} nonWellFormedIterable[Symbol.iterator] = () => 1 [...nonWellFormedIterable] // TypeError: [] is not a function
イテレーターの例
簡単なイテレーター
function makeIterator(array){ var nextIndex = 0; return { next: function(){ return nextIndex < array.length ? {value: array[nextIndex++], done: false} : {done: true}; } }; } var it = makeIterator(['yo', 'ya']); console.log(it.next().value); // 'yo' console.log(it.next().value); // 'ya' console.log(it.next().done); // true
無限のイテレーター
function idMaker(){ var index = 0; return { next: function(){ return {value: index++, done: false}; } }; } var it = idMaker(); console.log(it.next().value); // '0' console.log(it.next().value); // '1' console.log(it.next().value); // '2' // ...
ジェネレーターとともに
function* makeSimpleGenerator(array){ var nextIndex = 0; while(nextIndex < array.length){ yield array[nextIndex++]; } } var gen = makeSimpleGenerator(['yo', 'ya']); console.log(gen.next().value); // 'yo' console.log(gen.next().value); // 'ya' console.log(gen.next().done); // true function* idMaker(){ var index = 0; while(true) yield index++; } var gen = idMaker(); console.log(gen.next().value); // '0' console.log(gen.next().value); // '1' console.log(gen.next().value); // '2' // ...
ES2015 class とともに
class SimpleClass {
constructor(data) {
this.index = 0;
this.data = data;
}
[Symbol.iterator]() {
return {
next: () => {
if (this.index < this.data.length) {
return {value: this.data[this.index++], done: false};
} else {
this.index = 0; //If we would like to iterate over this again without forcing manual update of the index
return {done: true};
}
}
}
};
}
const simple = new SimpleClass([1,2,3,4,5]);
for (const val of simple) {
console.log(val); //'0' '1' '2' '3' '4' '5'
}
ジェネレーターは、イテレーターまたは反復可能なオブジェクトですか?
generator オブジェクトは、イテレーターであり、反復可能オブジェクトです。:
var aGeneratorObject = function*(){ yield 1; yield 2; yield 3; }(); typeof aGeneratorObject.next; // "function", because it has a next method, so it's an iterator typeof aGeneratorObject[Symbol.iterator]; // "function", because it has an @@iterator method, so it's an iterable aGeneratorObject[Symbol.iterator]() === aGeneratorObject; // true, because its @@iterator method return its self (an iterator), so it's an well-formed iterable [...aGeneratorObject]; // [1, 2, 3]
仕様
仕様 | ステータス | コメント |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) Iteration の定義 |
標準 | 初期定義。 |
ECMAScript Latest Draft (ECMA-262) Iteration の定義 |
ドラフト |
関連情報
ES2015 ジェネレーターの詳細について、function*() 文書をご覧ください。