Javascript 过滤器对象答案

【问题标题】：Javascript Filter ObjectJavascript 过滤器对象
【发布时间】：2021-04-11 15:15:20
【问题描述】：

我正在映射一个数组，该数组带有包含项目的对象。每个项目都有它的类别。我想生成一个类别数组，每个类别都带来它的项目。以下是我目前采用的方法：

...Typescript
    categories.map((item: Items) => {
        response.push({ title: item.category });
    });
...

[
  {
    category: 'Food',
    name: 'Some food1'
  },
  {
    category: 'Food',
    name: 'Some food2'
  },
  ...
]

结果一定是这样的：

[
  {
    title: 'Food',
    items: [
      {
        name: 'Some food1'
      },
      {
        name: 'Some food2'
      },
      ...
    ]
  },
  ...
]

【问题讨论】：

map 用于转换和返回数据，而不是用于副作用。

标签： javascript json reactjs typescript

【解决方案1】：

这是一个代码 sn-p，应该可以解决您的问题 -

   function filterAndMerge(data) {
        let result = {};
        data.forEach((each) => {
            if (!result[each.category]) {
                result[each.category] = [];
            }
            result[each.category].push(each.name);
        });
        const formattedResult = Object.keys(result).map((title) => ({
            title,
          items: result[title]
        }));
        return formattedResult;
    }

这个想法是通过将names 推入result 对象中，将其组合到相应的category 中。稍后，我们通过映射其键将结果格式化回具有title 和items 的数组。

【讨论】：

【解决方案2】：

试试这样的，纯 JS，但你可能可以使用 lodash 的 groupBy 函数：

https://lodash.com/docs/4.17.15#groupBy

const data = [
    {
        category: 'Food',
        name: 'Some food1'
    },
    {
        category: 'Food',
        name: 'Some food2'
    },
]

const result = data.reduce((acc, item) => {
    const {category, ...itemData} = item;

    let itemWithCategory = acc.find((elem) => elem.title === category )
    if(!itemWithCategory) {
        itemWithCategory = {title: category, items: []}
        acc.push(itemWithCategory)

    }
    itemWithCategory.items.push(itemData)
    return acc
}, [])

console.log(result)

【讨论】：

【解决方案3】：

最有效的方法是编写自定义函数，但最简单的方法是使用 Lodash 的 groupBy

import { groupBy } from 'lodash'

const arr = [
  {
    category: 'Food',
    name: 'Some food1'
  },
  {
    category: 'Food',
    name: 'Some food2'
  },
]

const groups = groupBy(arr, 'category')
// returns {
//   Food: [
//     { category: 'Food', name: 'Some food1' },
//     { category: 'Food', name: 'Some food2' },
//   ]
// }

const groupedArr = Object.entries(groups).map(([title, items]) => ({ title, items }))
// returns [
//   {
//     title: 'Food',
//     items: [
//       { category: 'Food', name: 'Some food1' },
//       { category: 'Food', name: 'Some food2' },
//     ]
//   },
// ]

【讨论】：