JavaScript で配列要素をグループ化解除する

はじめに

この実験では、JavaScriptを使って2次元配列の要素をグループ化解除する方法を探ります。reduce、map、forEachなどのJavaScriptの組み込み関数を組み合わせて、1つの2次元配列から個々の配列を抽出します。この実験が終わるとき、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/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28681{{"配列要素をグループ化解除する"}} javascript/data_types -.-> lab-28681{{"配列要素をグループ化解除する"}} javascript/arith_ops -.-> lab-28681{{"配列要素をグループ化解除する"}} javascript/comp_ops -.-> lab-28681{{"配列要素をグループ化解除する"}} javascript/array_methods -.-> lab-28681{{"配列要素をグループ化解除する"}} javascript/higher_funcs -.-> lab-28681{{"配列要素をグループ化解除する"}} javascript/spread_rest -.-> lab-28681{{"配列要素をグループ化解除する"}} end

JavaScriptで配列要素をグループ化解除する方法

zip関数で生成された配列の要素をグループ化解除するには、JavaScriptのunzip関数を使って2次元配列を作成することができます。方法は以下の通りです。

ターミナル/SSHを開き、コーディングを練習するためにnodeと入力します。
Math.max()、Function.prototype.apply()を使って配列内の最長のサブ配列を取得し、Array.prototype.map()を使って各要素を配列にします。
Array.prototype.reduce()とArray.prototype.forEach()を使って、グループ化された値を個々の配列にマッピングします。

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

const unzip = (arr) =>
  arr.reduce(
    (acc, val) => (val.forEach((v, i) => acc[i].push(v)), acc),
    Array.from({
      length: Math.max(...arr.map((x) => x.length))
    }).map((x) => [])
  );

以下の例でunzip関数を使うことができます。

unzip([
  ["a", 1, true],
  ["b", 2, false]
]); // [['a', 'b'], [1, 2], [true, false]]
unzip([
  ["a", 1, true],
  ["b", 2]
]); // [['a', 'b'], [1, 2], [true]]

これらの手順に従えば、JavaScriptで簡単に配列要素をグループ化解除することができます。

まとめ

おめでとうございます！あなたは配列要素をグループ化解除する実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。