配列を受け取り、データ型ごとに分類したMapを返すJavaScript関数の作り方

混合したデータ型を含む配列を受け取り、要素をそれぞれのデータ型ごとにグループ化した Map を返す関数 classifyArray() を作成することを考えてみましょう。

要件の例

// 入力配列が以下の場合:
const arr = ['class', 2, [7, 8, 9], {"name": "Michael"}, Symbol('foo'),
true, false, 'name', 6];
// 出力されるMapは次のようになります:
Map(5) {
    'string' => [ 'class', 'name' ],
    'number' => [ 2, 6 ],
    'object' => [ [ 7, 8, 9 ], { name: 'Michael' } ],
    'symbol' => [ Symbol(foo) ],
    'boolean' => [ true, false ]
}

コード例

この関数は、Array.prototype.reduce() メソッドと Map オブジェクトを組み合わせることで簡潔に実装できます。各要素に対して typeof 演算子でデータ型を判定し、その型をキーとして要素を振り分けていきます。

const arr = ['class', 2, [7, 8, 9], {"name": "Michael"}, Symbol('foo'),
true, false, 'name', 6];
const classifyArray = arr => {
    return arr.reduce((acc, val) => {
        const previousData = acc.get(typeof val);
        if(previousData){
            acc.set(typeof val, [...previousData, val]);
        }else{
            acc.set(typeof val, [val]);
        };
        return acc;
    }, new Map());
};
console.log(classifyArray(arr));

実行結果

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

Map(5) {
    'string' => [ 'class', 'name' ],
    'number' => [ 2, 6 ],
    'object' => [ [ 7, 8, 9 ], { name: 'Michael' } ],
    'symbol' => [ Symbol(foo) ],
    'boolean' => [ true, false ]
}

コードの解説

この実装の処理の流れは以下のとおりです。

• reduce() の初期値として空の new Map() を渡します。
• コールバック関数内で typeof val によって現在の要素のデータ型を取得します。
• acc.get() で同じ型のキーがすでに存在するかを確認します。
• キーが存在する場合は、スプレッド構文 [...previousData, val] を使って既存の配列に新しい要素を追加します。
• キーが存在しない場合は、新しいキーとして対象の要素を1つだけ持つ配列をセットします。

最終的に、データ型名をキー、その型に属する要素の配列を値とする Map が返されます。なお、null や配列も typeof では 'object' として判定されるため、より厳密な分類が必要な場合は Array.isArray() などを併用するとよいでしょう。