JavaScript で要素をカウントに基づいてグループ化する

はじめに

この実験では、配列の要素を与えられた関数に基づいてグループ化し、各グループの要素数を返す countBy 関数について学びます。この関数を使って配列の値を関数またはプロパティ名にマッピングする方法と、Array.prototype.reduce() を使って各グループの要素数をカウントするオブジェクトを作成する方法を探ります。また、この関数を実際のシナリオでどのように使うかを理解するためにいくつかの例を見てみます。

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") subgraph Lab Skills javascript/variables -.-> lab-28221{{"要素をカウントに基づいてグループ化する"}} javascript/data_types -.-> lab-28221{{"要素をカウントに基づいてグループ化する"}} javascript/arith_ops -.-> lab-28221{{"要素をカウントに基づいてグループ化する"}} javascript/comp_ops -.-> lab-28221{{"要素をカウントに基づいてグループ化する"}} javascript/array_methods -.-> lab-28221{{"要素をカウントに基づいてグループ化する"}} javascript/higher_funcs -.-> lab-28221{{"要素をカウントに基づいてグループ化する"}} javascript/destr_assign -.-> lab-28221{{"要素をカウントに基づいてグループ化する"}} end

JavaScript を使って配列の要素をグループ化してカウントする方法

JavaScript を使って配列の要素をグループ化してカウントするには、次の手順に従います。

ターミナル/SSH を開き、コーディングを練習するために node と入力します。
Array.prototype.map() メソッドを使って、配列の値を関数またはプロパティ名にマッピングします。
Array.prototype.reduce() メソッドを使って、キーがマッピング結果から生成されるオブジェクトを作成します。
countBy という名前の関数を作成し、配列と関数を引数とします。
countBy 関数の中で、渡された引数が関数かプロパティ名かを三項演算子でチェックします。関数の場合は、マッピング関数として使います。プロパティ名の場合は、配列要素のそのプロパティにアクセスします。
reduce() メソッドを使って、各キーが配列の一意の要素を表し、その値が配列内で出現する回数であるオブジェクトを作成します。

以下がコードです。

const countBy = (arr, fn) =>
  arr
    .map(typeof fn === "function" ? fn : (val) => val[fn])
    .reduce((acc, val) => {
      acc[val] = (acc[val] || 0) + 1;
      return acc;
    }, {});

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

countBy([6.1, 4.2, 6.3], Math.floor); // {4: 1, 6: 2}
countBy(["one", "two", "three"], "length"); // {3: 2, 5: 1}
countBy([{ count: 5 }, { count: 10 }, { count: 5 }], (x) => x.count); // {5: 2, 10: 1}

まとめ

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