JavaScript中按对象键分组数组：对比键值并分组实现方法

我是JavaScript新手，最近碰到个难题：需要把数组里的对象按name键分组，把相同name对应的value值放到同一个子数组里。

现有数组：

const days = [ 
  {'name':'Mon','value':1}, 
  {'name':'Tue','value':5}, 
  {'name':'Wed','value':10}, 
  {'name':'Wed','value':30}, 
  {'name':'Fri','value':18}, 
  {'name':'Sat','value':80}, 
  {'name':'Sat','value':90}, 
  {'name':'Sun','value':20}, 
]

我想要的分组结果是这样的：

const result = [[1],[5], [10, 30], [18], [80, 90], [20]]

完全摸不着头脑，希望能用ES6原生语法或者Lodash来实现，求各位大佬指点！

一、ES6原生实现（无需额外依赖） #

先给你说纯ES6的写法，不用装任何库，新手也能看懂逻辑：

const days = [ /* 你的原始数组 */ ];

// 第一步：用reduce按name分组，把相同name的value收集到一起
const groupedByName = days.reduce((acc, currentItem) => {
  // 如果当前name还没在累加器里，就初始化一个空数组
  if (!acc[currentItem.name]) {
    acc[currentItem.name] = [];
  }
  // 把当前item的value推进对应的数组
  acc[currentItem.name].push(currentItem.value);
  return acc;
}, {}); // 初始值是个空对象，用来存分组结果

// 第二步：把对象里的所有数组提取出来，就是最终结果
const result = Object.values(groupedByName);

console.log(result); // 输出 [[1],[5], [10, 30], [18], [80, 90], [20]]

简单解释下：reduce就像一个“打包机”，遍历数组的时候把每个元素按name分类放进对象里，最后用Object.values()把对象里的所有子数组取出来，正好就是你要的格式～

二、Lodash实现（更简洁高效） #

如果你已经在项目里用了Lodash，那代码会更短，两行搞定核心逻辑：

先确保你已经引入Lodash（比如通过npm安装后import _ from 'lodash'），然后：

const days = [ /* 你的原始数组 */ ];

// 先按name分组，再把每个分组里的对象转换成value数组
const result = _.map(_.groupBy(days, 'name'), group => group.map(item => item.value));

console.log(result); // 同样得到你想要的结果

这里_.groupBy(days, 'name')会帮你把数组按name分成一个个小组，然后_.map()遍历这些小组，把每个小组里的对象都转成对应的value，最后就得到了目标数组，是不是很省心？

内容的提问来源于stack exchange，提问作者6round