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; }

Answer 2

您可以使用array.map和array.find proptotypes：

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吗？如果您不想<label>L <input type=range min=-1 max=1 value=0 step=0.01> R</label>下划线，可以使用[assign] [3]功能。

另外，我写了example。它不是那么完美，所以你可以尝试自己改进它。

基于共同的id组合两个数组上的对象

3 个答案: