JavaScriptで2つの配列を組み合わせてオブジェクトの配列を作成する方法

JavaScriptでは、2つの配列を1つの配列（オブジェクトの配列）にまとめたい場面がよくあります。本記事では、map()メソッドを使ったシンプルな結合方法を、サンプルコードと実行結果つきで解説します。

例となる2つの配列

まず、次のような2つの配列を用意します。

var firstArray = ['John', 'David', 'Bob'];
var secondArray = ['Mike', 'Sam', 'Carol'];

この2つの配列を、対応する要素同士をペアにした1つの配列へと結合していきます。

map()を使って配列を結合する

2つの配列を組み合わせるには、JavaScriptのmap()メソッドを使用します。map()は、元の配列の各要素に対してコールバック関数を実行し、その戻り値から新しい配列を生成するメソッドです。コールバック関数には「現在の値」と「インデックス」が渡されるため、インデックスをもとにもう一方の配列の対応する要素を取得できます。

サンプルコード

var firstArray = ['John', 'David', 'Bob'];
var secondArray = ['Mike', 'Sam', 'Carol'];

var arrayOfObject = firstArray.map(function (value, index) {
    return [value, secondArray[index]];
});

console.log("最初の配列=");
console.log(firstArray);
console.log("2番目の配列=");
console.log(secondArray);
console.log("結合された配列オブジェクト=");
console.log(arrayOfObject);

プログラムの実行方法

上記のプログラムは、Node.js環境で次のコマンドを実行することで動作を確認できます。

node fileName.js

ここでは、ファイル名を「demo190.js」としています。ターミナルやコマンドプロンプトでファイルを保存したディレクトリに移動してから実行してください。

出力結果

実行すると、以下のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo190.js
最初の配列=
[ 'John', 'David', 'Bob' ]
2番目の配列=
[ 'Mike', 'Sam', 'Carol' ]
結合された配列オブジェクト=
[ [ 'John', 'Mike' ], [ 'David', 'Sam' ], [ 'Bob', 'Carol' ] ]

このように、firstArrayとsecondArrayの同じ位置にある要素がペアとなり、新しい入れ子構造の配列が生成されました。

補足：キー付きのオブジェクト配列を作りたい場合

上記の方法では、各要素が「配列」になります。もし { firstName: ..., secondName: ... } のようなキーを持つオブジェクトの配列が必要な場合は、アロー関数とオブジェクトリテラルを組み合わせて次のように書きます。

var result = firstArray.map((value, index) => ({
    firstName: value,
    secondName: secondArray[index]
}));

console.log(result);
// [ { firstName: 'John', secondName: 'Mike' },
//   { firstName: 'David', secondName: 'Sam' },
//   { firstName: 'Bob', secondName: 'Carol' } ]

用途に応じて、「配列のペア」形式と「キー付きオブジェクト」形式を使い分けるとよいでしょう。