javascript:generator
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン | |||
javascript:generator [2015/03/10 15:52] – nullpon | javascript:generator [2015/10/24 04:29] (現在) – 削除 nullpon | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== Generator ====== | ||
- | |||
- | Generator(ジェネレータ)はECMAScript 6で追加された新機能。 | ||
- | |||
- | ジェネレータは、内部の状態管理が必要となるIterator(イテレータ)の反復処理において、オブジェクトよりも簡単・安全に状態管理を行うための機能である。 | ||
- | |||
- | ジェネレータを用いた反復処理では「次の値の取り出し」と「取り出した値の処理」が交互に繰り返される。「次の値の取り出し」を行った後「取り出した値の処理」が完了するまでジェネレータ関数に記述された手続きの流れが一時中断される。 | ||
- | |||
- | 今までのJavaScriptでは実現できなかった手続き途中での中断という動作が非同期処理のより良いコーディング手法として注目されている。 | ||
- | |||
- | ===== ジェネレータの動作 ===== | ||
- | |||
- | <code javascript> | ||
- | function* f(i) { | ||
- | var y; | ||
- | y = yield ++i; | ||
- | console.log(y); | ||
- | y = yield ++i; | ||
- | console.log(y); | ||
- | y = yield ++i; | ||
- | console.log(y); | ||
- | } | ||
- | |||
- | var g = f(1); // g => [Object: generator] | ||
- | console.log(g.next()); | ||
- | console.log(g.next(" | ||
- | console.log(g.next(" | ||
- | console.log(g.next(" | ||
- | </ | ||
- | |||
- | - キーワード '' | ||
- | - ジェネレータ関数を実行するとGeneratorオブジェクトが得られる | ||
- | * この時点ではジェネレータ関数の中身は実行されない | ||
- | * 引数 1 はジェネレータ関数に渡される | ||
- | - Generator# | ||
- | * Generator# | ||
- | - 再度 Generator# | ||
- | * 最初の yield が next の引数(" | ||
- | * ジェネレータ関数が次の yield 式まで実行される。 | ||
- | * Generator# | ||
- | - 再度 Generator# | ||
- | * 二番目の yield が next の引数(" | ||
- | * ジェネレータ関数が次の yield 式まで実行される。 | ||
- | * Generator# | ||
- | - さらに Generator# | ||
- | * 三番目の yield が next の引数(" | ||
- | * ジェネレータ関数の末尾まで実行される。 | ||
- | * Generator# | ||
- | |||
- | ===== ジェネレータの例 ===== | ||
- | |||
- | フィボナッチ数列を生成するジェネレータ | ||
- | |||
- | <code javascript> | ||
- | function* fibonacci(limit = Infinity) { | ||
- | var count = 0; | ||
- | var a = 1; | ||
- | var b = 1; | ||
- | while(count++ < limit) { | ||
- | let c = a + b; | ||
- | a = b; | ||
- | b = c; | ||
- | yield c; | ||
- | } | ||
- | } | ||
- | |||
- | for (let i of fibonacci(5)) { | ||
- | | ||
- | } | ||
- | </ | ||
- | 結果 | ||
- | < | ||
- | 2 | ||
- | 3 | ||
- | 5 | ||
- | 8 | ||
- | 13 | ||
- | </ | ||
- | |||
- | Rangeを生成するジェネレータ | ||
- | |||
- | <code javascript> | ||
- | function* range(a, b) { | ||
- | for(var i = a; i <= b; i++) { | ||
- | yield i; | ||
- | } | ||
- | } | ||
- | |||
- | for (let i of range(3,7)) { | ||
- | | ||
- | } | ||
- | </ | ||
- | 結果 | ||
- | < | ||
- | 3 | ||
- | 4 | ||
- | 5 | ||
- | 6 | ||
- | 7 | ||
- | </ | ||
- | |||
- | ===== 非同期処理 ===== | ||
- | |||
- | ジェネレータを用いた非同期処理 | ||
- | |||
- | <code javascript> | ||
- | var g = (function* () { | ||
- | | ||
- | var x = yield setTimeout(function() { console.log(2); | ||
- | | ||
- | var y = yield setTimeout(function() { console.log(4); | ||
- | | ||
- | })(); | ||
- | g.next(); | ||
- | </ | ||
- | 結果 | ||
- | < | ||
- | 1 // ここで1秒待つ | ||
- | 2 | ||
- | 3 // ここで2秒待つ | ||
- | 4 | ||
- | 5 | ||
- | </ | ||
javascript/generator.1426002739.txt.gz · 最終更新: 2015/03/10 15:52 by nullpon