JavaScript の反復子とジェネレータをマスターする | ネストされたデータ構造

はじめに

この実験では、JavaScript における反復子とジェネレータの概念を探ります。具体的には、ネストされた配列やセットを反復処理し、それらを単一の反復可能オブジェクトにフラット化することができるフラットな反復子を作成することに焦点を当てます。これにより、よりスマートな方法でネストされたデータ構造に効率的にアクセスして操作することができます。実験が終了するまでに、ジェネレータと反復子がどのように機能するか、また現実の問題を解決するためにどのように適用できるかについて、より深い理解を得ることができるようになります。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28310{{"JavaScript の反復子とジェネレータを使ったネストされたデータ構造のフラット化"}} javascript/data_types -.-> lab-28310{{"JavaScript の反復子とジェネレータを使ったネストされたデータ構造のフラット化"}} javascript/arith_ops -.-> lab-28310{{"JavaScript の反復子とジェネレータを使ったネストされたデータ構造のフラット化"}} javascript/cond_stmts -.-> lab-28310{{"JavaScript の反復子とジェネレータを使ったネストされたデータ構造のフラット化"}} javascript/loops -.-> lab-28310{{"JavaScript の反復子とジェネレータを使ったネストされたデータ構造のフラット化"}} javascript/spread_rest -.-> lab-28310{{"JavaScript の反復子とジェネレータを使ったネストされたデータ構造のフラット化"}} end

フラットな反復子の解説

反復可能オブジェクトを反復処理し、ネストされた反復可能オブジェクトをフラット化するジェネレータを作成するには、次の手順に従います。

ターミナル/SSH を開き、コーディングを練習するために node と入力します。
ジェネレータ関数で再帰を使用します。
for...of ループを使用して、与えられた反復可能オブジェクトの値を反復処理します。
Symbol.iterator を使用して、各値が反復可能オブジェクトであるかどうかを確認します。
そうであれば、yield* 式を使用して同じジェネレータ関数に再帰的に委譲します。
そうでなければ、現在の値を yield します。

以下はコードのサンプルです。

const flatIterator = function* (itr) {
  for (let item of itr) {
    if (item[Symbol.iterator]) yield* flatIterator(item);
    else yield item;
  }
};

const arr = [1, 2, [3, 4], [5, [6, [7], 8]], 9, new Set([10, 11])];
[...flatIterator(arr)]; // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11

この例では、arr は値の配列で、ネストされた配列とセットが含まれています。flatIterator ジェネレータ関数は、これらのネストされた値をフラット化し、フラット化された配列を返します。

まとめ

おめでとうございます！あなたはフラットな反復子の実験を完了しました。あなたの技術を向上させるために、LabExでさらに実験を行って練習することができます。