ジェネレータとは?
ECMAScript2015から追加された関数に似た機能です。
用途
戻り値としてiterator(値を保持してくれる)を返すので、呼び出す度に値を更新してその値を保持する処理を作る際に使います。
基本構文
下記のように記述します。
1 2 3 4 5 6 7 8 9 |
function* gene() { yield 1; yield 2; } let a = gene(); a; console.log(a.next()); // { value:1, done: false } console.log(a.next()); // { value:2, done: false } console.log(a.next()); // { value:undefined, done: true } |
ポイント
- functionの末尾に*(アスタリスク)を付ける。
- function内にyieldキーワードを使う。
- 戻り値としてIteratorを返す。valueはyieldとして定義した値が返る。
イテレータのnextメソッドを実行した際の挙動
イテレーターのnextメソッドを実行した際はyieldが配置してある箇所まで実行されます。なので下記の例で言えば「あ」のみがコンソール出力されることになります。つまりyieldは通常の関数でいうところのreturnと似た挙動になります。
1 2 3 4 5 6 7 8 9 |
function* gene() { console.log('あ'); yield 1; console.log('い'); yield 2; } let a = gene(); a; console.log(a.next()); //「あ」と「{value:1,done:false}」が出力される。 |
オブジェクト内でジェネレータを定義するには?
オブジェクト内でジェネレータを定義する場合はfunctionキーワードを排除して定義します。
1 2 3 4 5 6 7 8 |
let person = { name: "太郎", age: 25, * gene() { yield 1; } } console.log(person.gene().next()); //{ value:1, done: false } |
リファクタリング
yield*の後に配列を定義することで複数行にyieldキーワードを並べる記述と同等の記述をする事ができます。yieldの間に処理は挟めませんが、単純にyieldを並べるだけの処理であれば下記のように記述する方が美しいコードと言えるでしょう。
1 2 3 4 5 6 |
function* gene() { yield* [1, 2]; } let a = gene(); console.log(a.next()); // {value:1,done:false} console.log(a.next()); // {value:2,done:false} |
この記事へのコメントはありません。