javascript ジェネレータ関数の使い方

javascript ジェネレータ関数の使い方

javascriptで、ES6で追加されたジェネレータ関数の簡単な使い方を記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

ジェネレータ関数の使い方

ジェネレータ関数は、イテレータであり、function*とyieldを使って以下のように記述していきます。

実行結果

上記のコードでは、yieldがあるところまで、1回のnextで実行されることが確認できます。

done は 処理が終了しているかどうかの結果となります。

以下のように、値を返すことも可能です。

実行結果

値だけを抽出したい場合は、「.value」を使用します。

以下のように利用すると、100番目の数字から順番に値を抽出することもできます。

サンプルコード

以下は、
「表示」ボタンをクリックすると、ジェネレータでランダムに生成した5個の配列をfor-ofで抽出して表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

表示されていることが確認できます。