在前端开发过程中，经常会遇到需要对对象进行分组的情况，比如按照城市、年龄、性别等字段进行分组，以便进行数据统计或展示。而在ES8中，新的特性 Object.values 和 Object.entries 提供了方便、快捷的实现分组操作的方法，大大简化了前端开发过程中的痛点。
Object.values和Object.entries方法
在介绍具体实现分组操作之前，首先需要了解 Object.values 和 Object.entries 这两个方法。
Object.values 方法返回一个给定对象自身的所有可枚举值的数组，顺序与手动遍历该对象属性值的顺序相同。
示例代码：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]Object.entries 方法返回一个给定对象自身的所有可枚举属性的键值对数组，顺序与手动遍历该对象属性的顺序相同。
示例代码：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 42]]值得注意的是，这两个方法返回的数组顺序都是按照对象属性的顺序排序的。如果需要按照某个字段进行分组，则可以通过先排序，再分组来实现。
实现分组操作
有了上面的铺垫，接下来就可以实现分组操作了。
假设我们有一个学生列表数组，每个学生都有姓名、年龄、性别和城市等四个字段。现在需要按照城市和性别两个字段进行分组，以便进行统计和展示。
示例代码：
-- -------------------- ---- -------
----- -------- - -
- ----- ----- ---- --- ------- ---- ----- ---- --
- ----- ----- ---- --- ------- ---- ----- ---- --
- ----- ----- ---- --- ------- ---- ----- ---- --
- ----- ----- ---- --- ------- ---- ----- ---- --
- ----- ----- ---- --- ------- ---- ----- ---- -
--
-- -----------
----- ------ - ---
--------------------- -- -
----- --- - --------- - --- - ------------
-- -------------- -
----------- - ---
-
----------------------------
---
--------------------上面的代码首先定义了一个空对象 groups，用来存储分组后的结果。然后遍历学生列表，针对每个学生按照城市和性别两个字段拼接出一个唯一的键值 key，如果 groups 中不存在该键值，则初始化一个空数组，最后将该学生的姓名加入到相应的数组中。
运行上面的代码，可以看到如下输出结果：
{
'北京_男': [ '小明', '小张' ],
'上海_女': [ '小红' ],
'广州_女': [ '小花' ],
'上海_男': [ '小李' ]
}可以看到，学生列表已经按照城市和性别两个字段进行了分组，每个分组都对应一个数组，其中包含了各自的学生姓名。
总结
ES8中的新特性 Object.values 和 Object.entries 提供了方便、快捷的实现分组操作的方法，可以很好地解决前端开发过程中的对象分组痛点。通过本文的介绍和示例代码，相信读者已经能够掌握分组操作的实现方法，希望能够对读者在实际开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646a4e5f968c7c53b09fbe4d