配列要素のグループ化 | データ処理 | JavaScript テクニック

はじめに

この実験では、元の配列内の要素の位置に基づいて配列要素をグループ化する方法を検討します。複数の配列を受け取り、各入力配列からの要素のサブ配列が位置に基づいてグループ化された新しい配列を返す zip() 関数を使用します。これは、データ処理と分析において役立つ手法であり、複数のソースからのデータを単一のデータ構造に結合してさらなる分析に使用できます。

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/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28367{{"複数の配列からのデータのグループ化"}} javascript/data_types -.-> lab-28367{{"複数の配列からのデータのグループ化"}} javascript/arith_ops -.-> lab-28367{{"複数の配列からのデータのグループ化"}} javascript/comp_ops -.-> lab-28367{{"複数の配列からのデータのグループ化"}} javascript/array_methods -.-> lab-28367{{"複数の配列からのデータのグループ化"}} javascript/higher_funcs -.-> lab-28367{{"複数の配列からのデータのグループ化"}} javascript/destr_assign -.-> lab-28367{{"複数の配列からのデータのグループ化"}} javascript/spread_rest -.-> lab-28367{{"複数の配列からのデータのグループ化"}} end

配列要素をグループ化する

元の配列内の要素の位置に基づいて配列要素をグループ化するには、以下に示す zip 関数を使用します。

ターミナル/SSH を開き、コーディングを練習するには node と入力します。
zip 関数は、Math.max() と Function.prototype.apply() を使用して、引数の中で最も長い配列を取得します。
その長さの配列を返り値として作成し、マッピング関数付きで Array.from() を使用してグループ化された要素の配列を作成します。
引数の配列の長さが異なる場合、値が見つからない場合は undefined が使用されます。

const zip = (...arrays) => {
  const maxLength = Math.max(...arrays.map((x) => x.length));
  return Array.from({ length: maxLength }).map((_, i) => {
    return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
  });
};

使用例:

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

まとめ

おめでとうございます！「配列要素をグループ化する」実験を完了しました。技術力を向上させるために、LabExでさらに多くの実験を行って練習してください。