JavaScriptで2つの配列のindexが同じものから一つのオブジェクトを合成する

2つの配列を合成したい。

var arr1 = [{name: 'Jay'}, {name: 'Bob'}];
var arr2 = [{age: 22}, {age: 30}];

このように組み合わせた配列にしたい。

var arr3 = [{name: 'jay', age: 22}, {name: 'Bob', age: 30}];

arr1のインデックス0とarr2のインデックス0は必ず一致すると考えてよいでしょう．

これを実現するための最も早い方法は何でしょうか？私は、forEachループを別のforEachループの中に入れ子にして、arr1の各オブジェクトをarr2の現在のオブジェクトで拡張することを想像していましたが、これは複雑すぎるような気がします。

回答

一つの配列を反復して、最初の反復のインデックスを使って新しい配列を作ればいいのです。これにはいろいろな方法があります。ここではその一つを紹介します。

var arr1 = [{name: 'Jay'}, {name: 'Bob'}];
var arr2 = [{age: 22}, {age: 30}];

var combined = arr1.map(function(item, index) {
    return {name: item.name, age: arr2[index].age};
});
 document.write(JSON.stringify(combined));

本当に最高のパフォーマンスを求めるのであれば、いくつものスキームをいくつものブラウザでテストする必要があります。例えば、ブラウザによっては、組み込みの配列メソッドよりもforループの方が速い場合があります。

var arr1 = [{name: 'Jay'}, {name: 'Bob'}];
var arr2 = [{age: 22}, {age: 30}];
var combined = [];

for (var i = 0; i < arr1.length; i++) {
  combined[i] = {name: arr1[i].name, age: arr2[i].age};
}

document.write(JSON.stringify(combined));