如何在reactjs / javascript中按值对对象数组进行分组答案

【问题标题】：how to group array of objects by value in reactjs / javascript如何在reactjs / javascript中按值对对象数组进行分组
【发布时间】：2018-09-02 20:49:07
【问题描述】：

我有一个具有不同值的对象数组，例如

 items=[{id:1,category:"cat_1" , title:"My title 1"},{id:2,category:"cat_2" , title:"My title 2"},{id:6,category:"cat_1" , title:"Another title 1"},{id:1,category:"cat_3" , title:"My title 3"},{id:8,category:"cat_1" , title:"Third Title"},{id:2,category:"cat_2" , title:"Another title 2 "}]

我使用数组映射来列出对象并将它们显示为

     {
     items.map((item) => (
        <h1>{item.category}</h1>
        <p>{item.title}</p>
    ))}

我的问题是如何迭代项目，以便按类别对项目进行分组，如下所示

cat_1
- My title 1
- Another title 1
- My title 3

cat_2
- My title 2
- Another title 2

cat_3
-Third Title

【问题讨论】：

标签： javascript reactjs loops foreach group-by

【解决方案1】：

使用.reduce:

const items = [{
  id: 1,
  category: "cat_1",
  title: "My title 1"
}, {
  id: 2,
  category: "cat_2",
  title: "My title 2"
}, {
  id: 6,
  category: "cat_1",
  title: "Another title 1"
}, {
  id: 1,
  category: "cat_3",
  title: "My title 3"
}, {
  id: 8,
  category: "cat_1",
  title: "Third Title"
}, {
  id: 2,
  category: "cat_2",
  title: "Another title 2 "
}];
const cats = items.reduce((catsSoFar, { category, title }) => {
  if (!catsSoFar[category]) catsSoFar[category] = [];
  catsSoFar[category].push(title);
  return catsSoFar;
}, {});
console.log(cats);

【讨论】：

@TerryLennox：这太轻描淡写了！事实上，reduce 是一个通用的迭代操作，一切你可以用FOREACH 循环来做（for/in, for/of, Array.prototype.forEach），您可以使用reduce！一旦你有了reduce，你就不再需要map、filter、groupBy、sort等（当然除了可读性和清晰度）。 the Wikipedia page for fold 上有一个简单的证明草图。所以，reduce 不仅仅是“超级强大”，它实际上是“无所不能”。
@JörgWMittag，但你可以对forEach 甚至是普通的for 和map 说同样的话——重要的部分是没有使用足够强大的东西（qr.ae/RNMEGA），但是使用足够强大的东西 and 在语义上适合其效果。
好吧，@Jörg 我会看看这篇文章！
@CertainPerformance: map 不通用。例如，它不能改变集合的长度，也不能返回不是集合的东西。你不能用map 来实现sum，除非你滥用了这样一个事实，即在ECMAScript 中，映射函数可能会产生副作用并可以访问集合本身，从而对其进行变异。
@JörgWMittag 我的意思是，您可以使用/滥用（例如）map 来实现与地图不同的事情，就像您可以使用/滥用 reduce 来做更适合方法如forEachfilter等

【解决方案2】：

我在很多项目中都使用 lodash 作为通用实用腰带。如果您决定做类似的事情 - 它很简单：

const data = [{
  id: 1,
  category: "cat_1",
  title: "My title 1"
}, {
  id: 2,
  category: "cat_2",
  title: "My title 2"
}, {
  id: 6,
  category: "cat_1",
  title: "Another title 1"
}, {
  id: 1,
  category: "cat_3",
  title: "My title 3"
}, {
  id: 8,
  category: "cat_1",
  title: "Third Title"
}, {
  id: 2,
  category: "cat_2",
  title: "Another title 2 "
}];

const groups = _.groupBy(data,  'category');

console.log(groups);

&lt;script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

我会让CertainPerformance 的回答更简洁一点：

    const items = [{
      id: 1,
      category: "cat_1",
      title: "My title 1"
    }, {
      id: 2,
      category: "cat_2",
      title: "My title 2"
    }, {
      id: 6,
      category: "cat_1",
      title: "Another title 1"
    }, {
      id: 1,
      category: "cat_3",
      title: "My title 3"
    }, {
      id: 8,
      category: "cat_1",
      title: "Third Title"
    }, {
      id: 2,
      category: "cat_2",
      title: "Another title 2 "
    }];
    const cats = items.reduce((catMemo, { category, title }) => {
      (catMemo[category] = catMemo[category] || []).push(title);
      return catMemo;
    }, {});
    console.log(cats);

【讨论】：

如何在反应中呈现这个