javascript - 根据共同共享的 id 组合两个数组上的对象

Question

我有两个包含对象的数组。第一个数组上的对象包含 id、name 和 age。

我尝试了在 StackOverflow 上找到的许多答案，例如 this one和 this one以及在线其他地方，但事实证明这非常棘手，我无法使其正常工作。

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

第二个数组包含与第一个数组中的用户相关的 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'},
];

将它们组合后，我正在寻找这样的结果，每个对象根据id组合两个数组中的对象。

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

使用普通的 ES6，您可以使用 arrOne 的属性和 Array#find 映射一个新对象。 ，arrTwo相关对象的属性。

如果需要，您可以稍后按 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; }