ES6のgeneratorについて

generatorとは

めっちゃ簡単にいうと、何回も入ったり出たりする関数。らしい。

そのほか用語

• イテレーター

順番にイテレータリザルトを取り出すことのできるオブジェクトのこと。

• デリゲーション

委譲。ジェネレーター同士を連携すること。

参考文献 : JavaScript の イテレータ を極める！

書き方

// function後に*をつけることで、generatorにすることができる
function* cheeses() {
  // yield - generator関数を一時停止させたり、再開したりするのに使われる
  yield 'モッツアレラチーズ';
  yield 'カマンベールチーズ';
  yield 'チェダーチーズ';
}

let cheese = cheeses();

// next()を使って、次のyieldまで処理を実行することができる
cheese.next();
// 実行結果 : {"value":"モッツアレラチーズ","done":false}

cheese.next();
// 実行結果 : {"value":"カマンベールチーズ","done":false}

cheese.next();
// 実行結果 : {"value":"チェダーチーズ","done":false}

cheese.next();
// 実行結果 : {"done":true}
// 関数内すべての処理がおわったよ〜

使い方

ピザの具材すべてをingredientsという配列に入れる処理を書く。

// ピザのトッピングが定義されているオブジェクト
const toppings = {
  vegetable: ['トマト', '玉ねぎ', 'じゃがいも'],
  meat: ['ソーセージ'],
  /* []: ・・・ es6の動的プロパティ
  * Symbol.iterator という特別なkeyをもっている
  * [Symbol.iterator]には、ジェネレーターを定義できる
  */
  // トッピングを取り出すためのgenerator
  [Symbol.iterator]: function* () {
    yield this.vegetable
    yield this.meat
  }
}

// ピザの様々な要素が定義されているオブジェクト
const cheesePizza = {
  size: 'large',
  price: '2,400',
  // ピザにおけるチーズの立ち位置はトッピングとは別だよね。。。
  cheese: ['モッツアレラチーズ', 'カマンベールチーズ'],
  // ピザのトッピング
  toppings,
  // すべての具材(ingredients)を取り出すためのgenerator
  [Symbol.iterator]: function* () {
    yield this.cheese
    // 別のgeneratorに委託する
    // toppingsオブジェクトに対して、Symbol.iterator(generator)があるか探しに行く
    yield* this.toppings
  }
}

let ingredients = [];

// for〜of で、generatorのyield分 実行
// cheesePizzaオブジェクトに対して、Symbol.iterator(generator)があるか探しに行く
for(let  ingredient of cheesePizza){
   ingredients = [...ingredients, ...ingredient]
}

結論

使い所はわからなかった。