一般的な共有IDに基づいて2つの配列にオブジェクトを結合する

Question

オブジェクトを含む2つの配列があります。最初の配列のオブジェクトには、id,nameおよびageが含まれています。

私はthis oneとthis oneなどのオンラインでStackOverflowで見つかった多くの答えを試しましたが、これは非常に扱いにくいことを証明しています。

var arrOne = [ 
    {id: 1, name: 'Raul', age: 18}, 
    {id: 2, name: 'Sarah', age: 20}, 
    {id: 3, name: 'Sanchez', age: 30} 
]; 

二番目の配列は第一配列とし、関連する画像内のユーザーに関連するidを含有します。彼らは私がidに基づいて、両方の配列内のオブジェクトを組み合わせ、各オブジェクトを使用してこのような結果を捜している合成された後

var arrOne = [ 
    {id: 1, image: 'raulrod.jpg'}, 
    {id: 2, image: 'saz.jpg'}, 
    {id: 1, image: 'hola.jpg'}, 
    {id: 3, image: 'qtal.jpg'}, 
    {id: 1, image: 'senor.jpg'}, 
    {id: 3, image: 'ciao.jpg'}, 
]; 

。平野ES6で

var finalArr = [ 
    {id: 1, name: 'Raul', age: 18 image: 'raulrod.jpg'}, 
    {id: 1, name: 'Raul', age: 18 image: 'hola.jpg'}, 
    {id: 1, name: 'Raul', age: 18 image: 'senor.jpg'}, 
    {id: 2, name: 'Raul', age: 20 image: 'saz.jpg'} 
    {id: 3, name: 'Raul', age: 30 image: 'ciao.jpg'}, 
    {id: 3, name: 'Raul', age: 30 image: 'qtal.jpg'}, 
]; 

Answer 1

、あなたは、Array#findで、arrTwoの関連オブジェクトのプロパティをarrOneのプロパティを持つ新しいオブジェクトをマップし、ことができます。

必要に応じて、後で結果をidでソートできます。

var arrOne = [{ id: 1, name: 'Raul', age: 18 }, { id: 2, name: 'Sarah', age: 20 }, { id: 3, name: 'Sanchez', age: 30 }], 
 
    arrTwo = [{ id: 1, image: 'raulrod.jpg' }, { id: 2, image: 'saz.jpg' }, { id: 1, image: 'hola.jpg' }, { id: 3, image: 'qtal.jpg' }, { id: 1, image: 'senor.jpg' }, { id: 3, image: 'ciao.jpg' }], 
 
    result = arrTwo.map(a => Object.assign({}, a, arrOne.find(b => a.id === b.id))); 
 

 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

あなたはarray.map使うとproptotypesをarray.findことができます。

var arrOne = [ 
    {id: 1, name: 'Raul', age: 18}, 
    {id: 2, name: 'Sarah', age: 20}, 
    {id: 3, name: 'Sanchez', age: 30} 
]; 

var arrTwo = [ 
    {id: 1, image: 'raulrod.jpg'}, 
    {id: 2, image: 'saz.jpg'}, 
    {id: 1, image: 'hola.jpg'}, 
    {id: 3, image: 'qtal.jpg'}, 
    {id: 1, image: 'senor.jpg'}, 
    {id: 3, image: 'ciao.jpg'} 
]; 
var finalArr = arrTwo.map(item => { 
    var correspondingObj = arrOne.find(obj => obj.id === item.id) 
    item.name = correspondingObj.name; 
    item.age = correspondingObj.age; 
    return item; 
}); 
console.log(finalArr); 

Answer 3

実は、https://stackoverflow.com/a/19480257/5809250はあなたを助ける必要があります。
アンダースコア - http://underscorejs.org/#extendが含まれていますか？
includeのアンダースコアを使用したくない場合は、[assign] [3]関数を使用できます。

また、私はexampleを書きました。完璧ではないので、あなた自身で改善しようとするかもしれません。