JavaScript で配列をフラット化する | 再帰、Reduce、Concat

はじめに

この実験では、JavaScriptを使って配列を指定された深さまでフラット化する概念を探ります。要素や配列をマージするために再帰、reduce、concatメソッドをどのように使うか学びます。この実験が終わるとき、あなたは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/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28311{{"JavaScript 再帰を使った配列のフラット化"}} javascript/data_types -.-> lab-28311{{"JavaScript 再帰を使った配列のフラット化"}} javascript/arith_ops -.-> lab-28311{{"JavaScript 再帰を使った配列のフラット化"}} javascript/comp_ops -.-> lab-28311{{"JavaScript 再帰を使った配列のフラット化"}} javascript/higher_funcs -.-> lab-28311{{"JavaScript 再帰を使った配列のフラット化"}} end

JavaScriptで配列をフラット化する方法

JavaScriptで配列を指定された深さまでフラット化するには、次の手順に従います。

ターミナル/SSHを開き、コーディングを練習するために node と入力します。
flatten 関数に2つの引数を使用します。arr（フラット化する配列）と depth（フラット化するネストレベルの最大数）。
flatten 関数の中で、再帰を使って深さの各レベルで depth を1減らします。
Array.prototype.reduce() と Array.prototype.concat() を使って要素や配列をマージします。
depth が1に等しい場合のベースケースを追加して再帰を停止します。
2番目の引数 depth を省略すると、深さ1までのみフラット化されます（単一のフラット化）。

以下が flatten 関数のコードです。

const flatten = (arr, depth = 1) =>
  arr.reduce(
    (a, v) =>
      a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v),
    []
  );

次の例で flatten 関数をテストできます。

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

まとめ

おめでとうございます！あなたは配列をフラット化する実験を完了しました。あなたのスキルを向上させるために、LabExでさらに多くの実験を練習できます。