JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのyield*式とは?ジェネレーターの委譲方法をサンプルコードで解説

yield* 式は、別のジェネレーター関数やイテラブル(反復可能)オブジェクトを参照し、その値の生成処理を委譲するために使用される構文です。

通常の yield が単一の値を返すのに対し、yield* は指定したジェネレーターや配列などのイテラブルが持つすべての値を、あたかもその場所に直接記述したかのように順番に取り出します。これにより、複数のジェネレーターを連結したり、再帰的なデータ構造を簡潔に走査したりすることが可能になります。

yield*式の基本的な仕組み

yield* の後にジェネレーターオブジェクトやイテラブルを指定すると、その要素がすべて順に生成されます。委譲先のジェネレーターが完了すると、元のジェネレーターの処理が続行されます。

サンプルコード

以下は、JavaScriptで yield* 式を使用した実装例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>yield* keyword in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to iterate over test2 and see the value yielded</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   function* test() {
      yield 12;
      yield 24;
      yield 36;
   }
   function* test2() {
      yield* test();
   }
   let iterator = test2();
   BtnEle.addEventListener("click", () => {
      resEle.innerHTML = iterator.next().value + "<br>";
      resEle.innerHTML += iterator.next().value + "<br>";
      resEle.innerHTML += iterator.next().value + "<br>";
   });
</script>
</body>
</html>

コードの解説

  • ジェネレーター関数 test() は、12・24・36 の3つの値を順に返します。
  • ジェネレーター関数 test2() 内では yield* test() を呼び出しており、test() への処理を委譲しています。
  • test2() から得たイテレーターに対して next() を呼び出すたびに、委譲先である test() が保持する値が1つずつ取り出されます。

実行結果

JavaScriptのyield*式とは?ジェネレーターの委譲方法をサンプルコードで解説

「CLICK HERE」ボタンをクリックすると、test2() が test() に委譲された結果として、画面には以下のように値が順番に表示されます。

JavaScriptのyield*式とは?ジェネレーターの委譲方法をサンプルコードで解説

  1. JavaScriptのsuperキーワードとは？使い方をサンプルコード付きで解説

    superキーワードとはsuperキーワードは、オブジェクトの親クラス（スーパークラス）が持つ関数やプロパティにアクセスし、呼び出すために使用されます。super.prop や super[expr] といった式は、クラスおよびオブジェクトリテラル内の任意のメソッド定義の中で利用できます。このキーワードは、extendsキーワードを使って別のクラスを継承した「派生クラス（サブクラス）」の中で活用されるのが一般的です。基本構文super(arguments);実行例以下の例では、「Person」というクラスの特性を、「Student」という別のクラスへ継承しています。両方のクラスにはそれぞれ固有

  2. JavaScriptのyield*式とは?ジェネレーターの委譲方法をサンプルコードで解説

    yield* 式は、別のジェネレーター関数やイテラブル(反復可能)オブジェクトを参照し、その値の生成処理を委譲するために使用される構文です。 通常の yield が単一の値を返すのに対し、yield* は指定したジェネレーターや配列などのイテラブルが持つすべての値を、あたかもその場所に直接記述したかのように順番に取り出します。これにより、複数のジェネレーターを連結したり、再帰的なデータ構造を簡潔に走査したりすることが可能になります。 yield*式の基本的な仕組み yield* の後にジェネレーターオブジェクトやイテラブルを指定すると、その要素がすべて順に生成されます。委譲先のジェネレーター