JavaScriptでキー配列と値配列の2つの配列からMapを構築する方法

JavaScriptでは、キーを格納した配列と値を格納した配列の2つが与えられ、それらを組み合わせてマップ（Map）を構築したい場面があります。本記事では、その具体的な実装方法を解説します。

前提となるデータ

まず、以下のような2つの配列があるとします。

const keys = [0, 4, 2, 3, 1];
const values = ["first", "second", "third", "fourth", "fifth"];

ここで必要なのは、keys配列とvalues配列を引数として受け取り、各値を対応するキーに関連付ける関数を作成することです。期待される出力は以下のようになります。

const map = {
    0 => 'first',
    4 => 'second',
    2 => 'third',
    3 => 'fourth',
    1 => 'fifth'
};

実装例：new Map()とset()メソッドを使う

最も基本的なアプローチは、new Map()でMapインスタンスを生成し、set()メソッドでキーと値のペアを順番に登録していく方法です。以下が実際のコードです。

const keys = [0, 4, 2, 3, 1];
const values = ["first", "second", "third", "fourth", "fifth"];

const buildMap = (keys, values) => {
    const map = new Map();
    for(let i = 0; i < keys.length; i++){
        map.set(keys[i], values[i]);
    };
    return map;
};

console.log(buildMap(keys, values));

出力結果

このコードを実行すると、コンソールには以下のように出力されます。

Map(5) {
    0 => 'first',
    4 => 'second',
    2 => 'third',
    3 => 'fourth',
    1 => 'fifth'
}

keys配列の各要素がキーとして、values配列の同じインデックス位置にある要素が値として正しくマッピングされていることが確認できます。

別のアプローチ：Object.fromEntries()を使う

ES2019以降の環境では、Object.fromEntries()メソッドを利用して、より簡潔に同様の処理を記述できます。

const buildObject = (keys, values) =>
    Object.fromEntries(keys.map((key, index) => [key, values[index]]));

console.log(buildObject(keys, values));
// 出力: { 0: 'first', 4: 'second', 2: 'third', 3: 'fourth', 1: 'fifth' }

この場合、戻り値はプレーンなオブジェクトになります。キーが数値でも、オブジェクトのプロパティとしては文字列に変換される点に注意してください。

別のアプローチ：reduce()を使う

Array.prototype.reduce()を活用すれば、ループ処理をより関数型のスタイルで書くことも可能です。

const buildMapWithReduce = (keys, values) =>
    keys.reduce((map, key, index) => {
        map.set(key, values[index]);
        return map;
    }, new Map());

まとめ

キー配列と値配列からマップを構築するには、new Map()とset()を組み合わせたforループが基本となります。プレーンなオブジェクトが必要な場合はObject.fromEntries()が便利で、関数型スタイルを好むならreduce()も有効です。用途や対象環境に応じて適切な方法を選択しましょう。