使用 map 方法对数组进行分组答案

【问题标题】：Grouping array with map method使用 map 方法对数组进行分组
【发布时间】：2019-08-04 13:05:47
【问题描述】：

我想按其键对对象数组进行分组，

原始形式；

data = [
    {'id': 1, 'name': 'karthik'},
    {'id': 1, 'age': 31},
    {'id': 2, 'name': 'ramesh'},
    {'id': 2,  'age': 22}
];

转换成，

groupedData = [
    {'id': 1, 'name': 'karthik', 'age': 31},
    {'id': 2, 'name': 'ramesh', 'age': 22}
];

我试过了，

this.data.map(item => item.id)
        .filter((item, index, all) => all.indexOf(item) === index);
        console.log(this.data);

【问题讨论】：

标签： javascript arrays typescript object ecmascript-6

【解决方案1】：

使用reduce 而不是map。

const groupedData = Object.values(this.data.reduce((a, { id, ...r }) => ({ ...a, [id]: { ...(a[id] || { id }), ...r }}), {}));

这是如何工作的：

首先，使用reduce 比任何map 解决方案都容易得多，因为它允许我们拥有一个累加器值a。

然后，我们提取属性的id 和rest（因为我们不知道它们叫什么）。

我们返回a，以id 的值为键的属性是现有属性或带有id 的新属性，以及其余属性。

【讨论】：

请解释一下它的作用是什么？
编辑了@kartik，有帮助吗？
没问题@ChrisY，总是乐于提供帮助。 Here 在reduce 上的一些阅读材料可帮助您更好地了解代码如何工作。

【解决方案2】：

您可以使用reduce为每个id创建一个对象（一个表）。

const groupMap = data.reduce((group, currentData) => {
    const id = currentData['id']
    group[id] = { ...(group[id] || {}), ...currentData }
    return group
} ,{})

返回的内容类似于：

{
  "1": {
    "id": 1,
    "name": "karthik",
    "age": 31
  },
  "2": {
    "id": 2,
    "name": "ramesh",
    "age": 22
  }
}

group[id] = { ...(group[id] || {}), ...currentData }基本上就是“如果你已经看到了这个id，就将之前的数据和当前的数据合并”

然后调用Object.values就可以得到最终结果

const groupedData = Object.values(groupMap)

它只是获取上面创建的对象的值。

【讨论】：

您可以复制粘贴到浏览器的控制台中，查看所有步骤。
请解释一下它的作用是什么？

【解决方案3】：

试试这个

data = data.reduce((total, current, index) => {
for(let key in current) total[index][key] = current[key]
return total
}, [])

【讨论】：

【解决方案4】：

这个功能会帮助你）

    function mergeobj(arrofobj) {
 arrofobj.map((item, index) => {
    for (let i = 0; i < arrofobj.length; i++) {
        if(i==index)continue;
        if (item['id'] == arrofobj[i]['id']) {
            item = Object.assign(item, arrofobj[i]);
            arrofobj.splice(i, 1);
            --i;
        }
    }
    return item;
})
return arrofobj; }

【讨论】：