在 JS 中合并具有多个属性的对象答案

【问题标题】：Merging objects with multiple properties in JS在 JS 中合并具有多个属性的对象
【发布时间】：2019-04-08 01:14:13
【问题描述】：

我有这些数组

Event.attendants.employers = [
    {
        "id": "5bcda6477e51de001576d287",
        "boothVisits": ["5bcda6477e51de001576d287", "5bc9d28270e5375dfbfe17fd", "5bcdabd27e51de001576d289", "5bcdabd27e51de001576d289", "5bcdabd27e51de001576d289", "5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bcdabd27e51de001576d289", "5bcda6477e51de001576d287"]
    },
    {
        "id": "5bc9d28270e5375dfbfe17fd",
        "boothVisits": ["5bc9d28270e5375dfbfe17fd", "5b4751df76ebd145d6c1dc2a", "5bcda6477e51de001576d287", "5bcdabd27e51de001576d289", "5bd067a9947f790015856ccb"]
    },
    {
        "id": "5bcda6477e51de001576d287", "boothVisits": []
    },
    {
        "id": "5bd05e35947f790015856cc8",
        "boothVisits": ["5bd05e35947f790015856cc8", "5bcdabd27e51de001576d289", "5bd05e35947f790015856cc8", "5bd067a9947f790015856ccb", "5bd0787e0f64cd001563ddbf", "5bd05e35947f790015856cc8", "5bcdabd27e51de001576d289", "5bd087570f64cd001563ddc5"]
    },
    {
        "id": "5bd05e35947f790015856cc8", "boothVisits": []
    },
    {
        "id": "5bd06524947f790015856cca",
        "boothVisits": ["5bc9d28270e5375dfbfe17fd", "5bd067a9947f790015856ccb"]
    },
    {
        "id": "5bd067a9947f790015856ccb",
        "boothVisits": ["5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bd06321947f790015856cc9"]
    },
    {"id": "5bc9d28270e5375dfbfe17fd", "boothVisits": []}
]

empNames = [
    {id: 5bcda6477e51de001576d287, companyName: 'Renia'},
    {id: 5bc9d28270e5375dfbfe17fd, companyName: 'BSA Concept'},
    {id: 5bcda6477e51de001576d287, companyName: 'Renia'},
    {id: 5bd05e35947f790015856cc8, companyName: 'company name'},
    {id: 5bd05e35947f790015856cc8, companyName: 'company name'},
    {id: 5bd06524947f790015856cca, companyName: 'Roger'},
    {id: 5bd067a9947f790015856ccb, companyName: 'Reniax'},
    {id: 5bc9d28270e5375dfbfe17fd, companyName: 'BSA Concept'}
]

我需要加入它们，以便 companyName 和 boltVisits 都成为数组中新对象的一部分。有点像 SQL 连接。但我不知道该怎么做。我找到了this answer

并试图重新使用它的代码

var messages = [{userId: 2, content: "Salam"}, {userId: 5, content: "Hello"},{userId: 4, content: "Moi"}];
var users = [{id: 2, name: "Grace"}, {id: 4, name: "Janetta"},{id: 5, name: "Sara"}];

var messagesWithUserNames = messages.map((msg)=> {
  var haveEqualId = (user) => user.id === msg.userId
  var userWithEqualId= users.find(haveEqualId)
  return Object.assign({}, msg, userWithEqualId)
})
console.log(messagesWithUserNames)

为了满足我的需要：

var boothVisitsByEmp = empNames.map((name) => {
    var haveEqualId = (user) => user.id === name.userId;
    var userWithEqualId = event.attendants.employers.find(haveEqualId);
    return Object.assign({}, name, userWithEqualId);
});

但没有运气。知道如何解决这个问题吗？

一些预期的输出：

var expectedOutput = [
{
    "id": "5bcda6477e51de001576d287",
    "companyName": 'Renia',
    "boothVisits": ["5bcda6477e51de001576d287", "5bc9d28270e5375dfbfe17fd", "5bcdabd27e51de001576d289", "5bcdabd27e51de001576d289", "5bcdabd27e51de001576d289", "5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bcdabd27e51de001576d289", "5bcda6477e51de001576d287"]
},
{
    "id": "5bc9d28270e5375dfbfe17fd",
    "companyName": 'BSA Concept',
    "boothVisits": ["5bc9d28270e5375dfbfe17fd", "5b4751df76ebd145d6c1dc2a", "5bcda6477e51de001576d287", "5bcdabd27e51de001576d289", "5bd067a9947f790015856ccb"]
}]

【问题讨论】：

你能指定哪个变量是什么吗？不知道什么是事件，boothVisitsByEmp、empNames...
我建议同时提供预期合并结果/输出的示例
我编辑了我的帖子。 BoothVisitsByEmp 应该是合并数组
我编辑了问题

标签： javascript arrays object merge javascript-objects

【解决方案1】：

您可以使用.reduce() 方法获取结果对象并使用Object.values() 获取所需的数组：

let arr1 = [{"id": "5bcda6477e51de001576d287", "boothVisits": ["5bcda6477e51de001576d287", "5bc9d28270e5375dfbfe17fd", "5bcdabd27e51de001576d289", "5bcdabd27e51de001576d289", "5bcdabd27e51de001576d289", "5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bcdabd27e51de001576d289", "5bcda6477e51de001576d287"]}, {"id": "5bc9d28270e5375dfbfe17fd", "boothVisits": ["5bc9d28270e5375dfbfe17fd", "5b4751df76ebd145d6c1dc2a", "5bcda6477e51de001576d287", "5bcdabd27e51de001576d289", "5bd067a9947f790015856ccb"]}, {"id": "5bd05e35947f790015856cc8", "boothVisits": ["5bd05e35947f790015856cc8", "5bcdabd27e51de001576d289", "5bd05e35947f790015856cc8", "5bd067a9947f790015856ccb", "5bd0787e0f64cd001563ddbf", "5bd05e35947f790015856cc8", "5bcdabd27e51de001576d289", "5bd087570f64cd001563ddc5"]}, {"id": "5bd06524947f790015856cca", "boothVisits": ["5bc9d28270e5375dfbfe17fd", "5bd067a9947f790015856ccb"]}, {"id": "5bd067a9947f790015856ccb", "boothVisits": ["5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bd06321947f790015856cc9"]}],
    arr2 = [{id: '5bcda6477e51de001576d287', companyName: 'Renia'}, {id: '5bc9d28270e5375dfbfe17fd', companyName: 'BSA Concept'}, {id: '5bcda6477e51de001576d287', companyName: 'Renia'}, {id: '5bd05e35947f790015856cc8', companyName: 'company name'}, {id: '5bd05e35947f790015856cc8', companyName: 'company name'}, {id: '5bd06524947f790015856cca', companyName: 'Roger'}, {id: '5bd067a9947f790015856ccb', companyName: 'Reniax'}, {id: '5bc9d28270e5375dfbfe17fd', companyName: 'BSA Concept'}];

let result = Object.values([...arr1, ...arr2].reduce((r, c) => (
    r[c.id] = Object.assign((r[c.id] || {}), c), r
), {}));

console.log(result);

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

【讨论】：

【解决方案2】：

下面是另一种更具可读性的解决方案。本质上，找到names 对象数组的索引并将该名称分配给booths 对象。

let a = [{"id": "5bcda6477e51de001576d287", "boothVisits": ["5bcda6477e51de001576d287", "5bc9d28270e5375dfbfe17fd", "5bcdabd27e51de001576d289", "5bcdabd27e51de001576d289", "5bcdabd27e51de001576d289", "5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bcdabd27e51de001576d289", "5bcda6477e51de001576d287"]}, {"id": "5bc9d28270e5375dfbfe17fd", "boothVisits": ["5bc9d28270e5375dfbfe17fd", "5b4751df76ebd145d6c1dc2a", "5bcda6477e51de001576d287", "5bcdabd27e51de001576d289", "5bd067a9947f790015856ccb"]}, {"id": "5bd05e35947f790015856cc8", "boothVisits": ["5bd05e35947f790015856cc8", "5bcdabd27e51de001576d289", "5bd05e35947f790015856cc8", "5bd067a9947f790015856ccb", "5bd0787e0f64cd001563ddbf", "5bd05e35947f790015856cc8", "5bcdabd27e51de001576d289", "5bd087570f64cd001563ddc5"]}, {"id": "5bd06524947f790015856cca", "boothVisits": ["5bc9d28270e5375dfbfe17fd", "5bd067a9947f790015856ccb"]}, {"id": "5bd067a9947f790015856ccb", "boothVisits": ["5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bd067a9947f790015856ccb", "5bd06321947f790015856cc9"]}],
    b = [{id: '5bcda6477e51de001576d287', companyName: 'Renia'}, {id: '5bc9d28270e5375dfbfe17fd', companyName: 'BSA Concept'}, {id: '5bcda6477e51de001576d287', companyName: 'Renia'}, {id: '5bd05e35947f790015856cc8', companyName: 'company name'}, {id: '5bd05e35947f790015856cc8', companyName: 'company name'}, {id: '5bd06524947f790015856cca', companyName: 'Roger'}, {id: '5bd067a9947f790015856ccb', companyName: 'Reniax'}, {id: '5bc9d28270e5375dfbfe17fd', companyName: 'BSA Concept'}];

let out = a.map(objA => {
  return b.map(objB => {
      let idxB = Object.entries(objB)[0].findIndex(element => element == objA.id);
      if(idxB > 0) objA.companyName = objB.companyName;
      return objA;
  });
});
console.log(out);

【讨论】：

【解决方案3】：

由于某种原因，以下答案未正确转移展位访问。我最终这样做了：

const boothVisitsByEmp = employers.map(emp => {
    const employerName = empNames.find(name => name.id.equals(emp.id));
    emp.companyName = employerName.companyName;
    return emp;
});

【讨论】：