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

更新日期: 2021-12-27阅读: 1.2k标签: 数据

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

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


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

以前的方式

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

const items = [
  {
    type: 'clothes',
    value: ':necktie:',
  },
  {
    type: 'clothes',
    value: ':shirt:',
  },
  {
    type: 'clothes',
    value: ':dress:',
  },
  {
    type: 'animal',
    value: ':pig:',
  },
  {
    type: 'animal',
    value: ':frog:',
  },
  {
    type: 'animal',
    value: ':monkey:',
  },
];

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

const items = {
  clothes: [
    {
      type: 'clothes',
      value: ':necktie:',
    },
    {
      type: 'clothes',
      value: ':shirt:',
    },
    {
      type: 'clothes',
      value: ':dress:',
    },
  ],
  animal: [
    {
      type: 'animal',
      value: ':pig:',
    },
    {
      type: 'animal',
      value: ':frog:',
    },
    {
      type: 'animal',
      value: ':monkey:',
    },
  ],
};

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

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 = [1, 2, 3, 4, 5];

// 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  = { odd: true };
const even = { even: true };
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
来源:https://mp.weixin.qq.com/s/U9stOyfVEpiYkRBycE1OOg


链接: https://www.fly63.com/article/detial/10974

双向数据绑定与单向数据绑定的各自优势和关系

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。

原生JS数据绑定的实现

双向数据绑定是非常重要的特性 —— 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验。我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 —— 一种为Object.observe

JavaScript判断数据类型的多种方法【 js判断一个变量的类型】

js判断数据类型的多种方法,主要包括:typeof、instanceof、 constructor、 prototype.toString.call()等,下面就逐一介绍它们的异同。

javascript中的typeof返回的数据类型_以及强制/隐式类型转换

由于js为弱类型语言拥有动态类型,这意味着相同的变量可用作不同的类型。 typeof 运算符返回一个用来表示表达式的数据类型的字符串,目前typeof返回的字符串有以下这些: undefined、boolean、string、number、object、function、“symbol

使用typeof obj===‘object’潜在的问题,并不能确定obj是否是一个对象?

在js中我们直接这样写typeof obj===‘object’有什么问题呢?发现Array, Object,null都被认为是一个对象了。如何解决这种情况,能保证判断obj是否为一个对象

js进制数之间以及和字符之间的转换

js要处理十六进制,十进制,字符之间的转换,发现有很多差不多且书写不正确的方法.一个一个实践才真正清楚如何转换,现在来记录一下它们之间转换的方法。

js判断数字是奇数还是偶数的2种方法实现

奇数和偶数的判断是数学运算中经常碰到的问题,这篇文章主要讲解通过JavaScript来实现奇偶数的判断。2种判断方法:求余% 、&1

js算法_判断数字是否为素数/质数

质数又称素数。指在一个大于1的自然数中,除了1和此整数自身外,没法被其他自然数整除的数。比如100以内共25个,js实现代码如下。

Js数据类型转换_JavaScript 那些不经意间发生的数据类型自动转换

JavaScript自动类型转换真的非常常见,常用的一些便捷的转类型的方式,都是依靠自动转换产生的。比如 转数字 : + x 、 x - 0 , 转字符串 : \\\"\\\" + x 等等。现在总算知道为什么可以这样便捷转换。

Js中实现XML和String相互转化

XML是标准通用标记语言 (SGML) 的子集,非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。 这篇文章主要介绍Js中实现XML和String相互转化

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!