如何在javascript中对映射对象的数据进行分组？答案

【问题标题】：How can I group the data of a mapped object in javascript?如何在javascript中对映射对象的数据进行分组？
【发布时间】：2019-07-18 17:11:04
【问题描述】：

const data = [
    {
        id: "1",
        name: "monkey",
        category: {
            id: "2",
            color: "blue"
        }
    },
    {
        id: "2",
        name: "cat",
        category: {
            id: "1",
            color: "red"
        }
    },
    {
        id: "3",
        name: "snake",
        category: {
            id: "2"
            color: "blue",
        }
    },
    {
        id: "4",
        name: "elephant",
        category: {
            id: "1"
            color: "green"
        }
    }
];

这是我的代码：

return (data.map(obj => obj.category ? `color: ${obj.category.color} , name:   ${obj.name}` : `${obj.name}`)).join('<br>');

输出是：

color: blue,  name: monkey
color: red,   name: cat
color: blue,  name: snake
color: green, name: elephant

我要做的是按类别对输出进行分组：

color: blue,  name: monkey
color: blue,  name: snake
color: green, name: elephant
color: red,   name: cat

这是我的方法：

return (data.map(data.groupBy(obj.category, "category"),obj => obj.category ? `color: ${obj.category.color} , name:   ${obj.name}` : `${obj.name}`)).join('<br>').sort();

但我得到了错误

obj 没有定义

【问题讨论】：

你从哪里得到groupBy？
@NinaScholz consolelog.io/group-by-in-javascript
为什么不在 console.logging 一切之前先按类别对数组进行排序？

标签： javascript jquery arrays object mapping

【解决方案1】：

先对数据进行排序：

data.sort((a,b) => Number(a.category.id) - Number(b.category.id));

然后执行您的操作以记录它们全部或其他内容

【讨论】：

我正在尝试理解您的代码。为什么要减去类别 ID。这是如何工作的？
Array 上的 Sort 函数对数组内的元素对运行回调，a 和 b -- 如果回调返回负数，它会将 a 放在 @987654325 之前@，如果它是一个正数，则相反（除非我把它倒过来，这是可能的）。所以通过减去类别，我们只是告诉它使用类别来决定哪个先出现，a 或 b

【解决方案2】：

您可以使用reduce 方法将一个对象分组，然后您可以使用map 和join 从Object.values() 创建字符串。

const data = [{"id":"1","name":"monkey","category":{"id":"2","color":"blue"}},{"id":"2","name":"cat","category":{"id":"1","color":"red"}},{"id":"3","name":"snake","category":{"id":"2","color":"blue"}},{"id":"4","name":"elephant","category":{"id":"1","color":"green"}}]

const group = data.reduce((r, {name, category: {color}}) => {
  const str = `color: ${color}, name: ${name}`
  r[color] = (r[color] || []).concat(str)
  return r;
}, {})

const res = Object.values(group)
  .map(e => e.join('\n'))
  .join('\n')

console.log(res)

【讨论】：

【解决方案3】：

您可以使用Array.prototype.sort() 和Array.prototype.map() 获得result

还要注意使用unary plus (+) 将id 转换为数值

代码：

const data = [{id: "1",name: "monkey",category: {id: "2",color: "blue"}},{id: "2",name: "cat",category: {id: "1",color: "red"}},{id: "3",name: "snake",category: {id: "2",color: "blue",}},{id: "4",name: "elephant",category: {id: "1",color: "green"}}];
const result = data
  .sort((a,b) => +b.category.id - +a.category.id)
  .map(obj => `color: ${obj.category.color}, name: ${obj.name}`);

console.log(result);

【讨论】：

【解决方案4】：

您可以将分组函数与用于嵌套属性的函数的回调一起使用，并在平面数组中获取结果。然后将您的样式添加到输出数组中。

Array.prototype.groupBy = function (prop) {
    return this.reduce(function (groups, item) {
        const val = typeof prop === 'function' ? prop(item) : item[prop];
        groups[val] = groups[val] || [];
        groups[val].push(item);
        return groups;
    }, {})
};

const
    data = [{ id: "1", name: "monkey", category: { id: "2", color: "blue" } }, { id: "2", name: "cat", category: { id: "1", color: "red" } }, { id: "3", name: "snake", category: { id: "2", color: "blue", } }, { id: "4", name: "elephant", category: { id: "1", color: "green" } }],
    grouped = Object
        .values(data.groupBy(o => o.category.id))
        .reduce((a, b) => [...a, ...b]),
    result = Object
        .values(grouped)
        .map(obj => `color: ${obj.category.color} , name:   ${obj.name}`).join('<br>');

console.log(grouped);
console.log(result);

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

【讨论】：