使用 JavaScript 进行数据分组最优雅的方式

前端宇宙

共 2758字,需浏览 6分钟

 ·

2021-12-29 01:43

今天我们一起来看一个数据分组的小技巧。

对数据进行分组,是我们在开发中经常会遇到的需求,使用 JavaScript 进行数据分组的方式也有很多种,但是由于没有原生方法的支持,我们自己实现的数据分组函数通常都比较冗长而且难以理解。

不过,告诉大家一个好消息,一个专门用来做数据分组的提案 Array.prototype.groupBy 已经到达 Stage 3 啦!

在看这个提案,之前,我们先来回顾下我们以前在 JavaScript 里是怎么分组的。

以前的方式

假设我们有下面一组数据:

const items = [
  {
    type'clothes',
    value'👔',
  },
  {
    type'clothes',
    value'👕',
  },
  {
    type'clothes',
    value'👗',
  },
  {
    type'animal',
    value'🐷',
  },
  {
    type'animal',
    value'🐸',
  },
  {
    type'animal',
    value'🐒',
  },
];

我们希望按照 type 分组成下面的格式:

const items = {
  clothes: [
    {
      type'clothes',
      value'👔',
    },
    {
      type'clothes',
      value'👕',
    },
    {
      type'clothes',
      value'👗',
    },
  ],
  animal: [
    {
      type'animal',
      value'🐷',
    },
    {
      type'animal',
      value'🐸',
    },
    {
      type'animal',
      value'🐒',
    },
  ],
};

我们可能会用到下面的写法:

for 循环

最直接而且容易理解的方法,就是代码有点多。

const groupedBy = {};

for (const item of items) {
  if (groupedBy[item.type]) {
    groupedBy[item.type].push(item);
  } else {
    groupedBy[item.type] = [item];
  }
}

reduce

使用 Array.protoype.reduce 虽然语法看起来简单,但是太难读了。

items.reduce(
  (acc, item) => ({
    ...acc,
    [item.type]: [...(acc[item.type] ?? []), item],
  }),
  {},
);

我们稍微改造的容易理解一点,语法就跟上面的 for 循环差不多了:

items.reduce((acc, item) => {
  if (acc[item.type]) {
    acc[item.type].push(item);
  } else {
    acc[item.type] = [item];
  }

  return acc;
}, {});

filter

使用 Array.prototype.filter,代码看起来很容易阅读,但是性能很差,你需要对数组进行多次过滤,而且如果 type 属性值比较多的情况下,还需要做更多的 filter 操作。

const groupedBy = {
  fruit: items.filter((item) => item.type === 'clothes'),
  vegetable: items.filter((item) => item.type === 'animal'),
};

其他

如果你既不想用 reduce,还想用到函数式写法,你可能会写出下面的代码:

Object.fromEntries(
  Array.from(new Set(items.map(({ type }) => type))).map((type) => [
    type,
    items.filter((item) => item.type === type),
  ]),
);

是不是很让人崩溃 🤯~

Array.prototype.groupBy

好了,如果使用 Array.prototype.groupBy,你只需要下面这一行代码:

items.groupBy(({ type }) => type);

groupBy 的回调中一共有三个参数:

  • 参数1:数组遍历到的当前对象
  • 参数2:index 索引
  • 参数3:原数组
const array = [12345];

// groupBy groups items by arbitrary key.
// In this case, we're grouping by even/odd keys
array.groupBy((num, index, array) => {
  return num % 2 === 0 ? 'even''odd';
});

另外,你还可以用 groupByToMap,将数据分组为一个 Map 对象。

// groupByToMap returns items in a Map, and is useful for grouping using
// an object key.
const odd  = { oddtrue };
const even = { eventrue };
array.groupByToMap((num, index, array) => {
  return num % 2 === 0 ? even: odd;
});

// =>  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }

参考:

  • https://github.com/tc39/proposal-array-grouping
  • https://www.charpeni.com/blog/array-prototype-group-by-to-the-rescue

浏览 48
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报