JavaScriptで2つの配列を組み合わせてオブジェクト配列（JSON）に変換する方法

JavaScriptでは、キーとなる配列と値となる配列の2つを組み合わせて、1つのオブジェクト配列（JSON形式）を作成したいケースがよくあります。例えば、アンケートの選択肢とその真偽値を対応付けるような場面です。

変換元のデータ

まず、次のような2つの配列があったとします。

const options = ['A', 'B', 'C', 'D'];
const values = [true, false, false, false];

この2つの配列から、以下のように各要素をペアにした新しいオブジェクトの配列を生成して返す関数が必要です。

const response = [
    {opt: 'A', val: true},
    {opt: 'B', val: false},
    {opt: 'C', val: false},
    {opt: 'D', val: false},
];

実装方法

この処理は、forループを使ってシンプルに実装できます。片方の配列の長さ分だけ繰り返し処理を行い、それぞれのインデックスに対応する要素をペアとしてオブジェクトに格納していきます。

コード例

const options = ['A', 'B', 'C', 'D'];
const values = [true, false, false, false];

const mapArrays = (options, values) => {
    const res = [];
    for(let i = 0; i < options.length; i++){
        res.push({
            opt: options[i],
            val: values[i]
        });
    }
    return res;
};

console.log(mapArrays(options, values));

実行結果

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

[
    { opt: 'A', val: true },
    { opt: 'B', val: false },
    { opt: 'C', val: false },
    { opt: 'D', val: false }
]

map()メソッドを使った別の書き方

よりモダンな書き方としては、map()メソッドを利用する方法もあります。こちらの方がコードが簡潔になり、意図も明確に伝わります。

const mapArrays = (options, values) => 
    options.map((opt, i) => ({ opt, val: values[i] }));

map()は配列の各要素に対して処理を実行し、その結果から新しい配列を生成するため、このようなペアリング処理に適しています。ES2015以降では、プロパティ名と変数名が同じ場合の省略記法（ショートハンド）も使えるため、さらにスッキリとした記述が可能です。

まとめ

• 2つの配列をインデックスで対応付けて、オブジェクトの配列に変換できる
• 基本的なforループでも実装可能だが、map()を使うとより簡潔に書ける
• 両配列の長さが異なる場合は、短い方に合わせて処理される点に注意（必要に応じて事前に長さチェックを追加すると安全）