JavaScriptで配列内の各データ型の出現回数を数える方法

はじめに

本記事では、異なるデータ型の要素が混在する配列を受け取り、各データ型ごとの出現回数をMapオブジェクトとして返すJavaScript関数の作成方法を解説します。

例として、次のような配列を考えてみましょう。

const arr = [23, 'df', undefined, null, 12, {
    name: 'Rajesh'
}, [2, 4, 7], 'dfd', null, Symbol('*'), 8];

この配列には、数値・文字列・undefined・null・オブジェクト・配列・シンボルなど、さまざまなデータ型が含まれています。これらをtypeof演算子で判定し、Mapを使って集計していきます。

コード例

以下がその実装コードです。

const arr = [23, 'df', undefined, null, 12, {
    name: 'Rajesh'},
    [2, 4, 7], 'dfd', null, Symbol('*'), 8];
const countDataTypes = arr => {
    return arr.reduce((acc, val) => {
        const dataType = typeof val;
        if(acc.has(dataType)){
            acc.set(dataType, acc.get(dataType)+1);
        }else{
            acc.set(dataType, 1);
        };
        return acc;
    }, new Map());
};
console.log(countDataTypes(arr));

コードの解説

この関数では、Array.prototype.reduce()メソッドを使って配列を走査し、初期値として新しいMapオブジェクトを渡しています。

処理の流れは以下の通りです。

1. 各要素に対してtypeof演算子でデータ型を取得します。
2. Mapにすでにそのデータ型のキーが存在する場合は、カウントを1つ増やします。
3. 存在しない場合は、新しいキーを追加してカウントを1に設定します。

なお注意点として、JavaScriptでは配列やnullもtypeofでは「object」と判定されます。そのため、プレーンなオブジェクト・配列・nullはすべて「object」にまとめて集計されます。

出力結果

コンソールには以下のように出力されます。

Map(5) {
    'number' => 3,
    'string' => 2,
    'undefined' => 1,
    'object' => 4,
    'symbol' => 1
}

この結果から、数値が3つ、文字列が2つ、undefinedが1つ、オブジェクト（オブジェクト・配列・nullを含む）が4つ、シンボルが1つ存在することが確認できます。

まとめ

reduce()とMapを組み合わせることで、簡潔かつ効率的に配列内のデータ型分布を集計できます。より厳密に配列やnullを区別したい場合は、Array.isArray()やval === nullによる判定を組み合わせると良いでしょう。