使用reduce实现数据分组

4,562 阅读1分钟

在javascript中面向一些对数据分组的需求,我们经常会使用先创建一个对象或数组然后通过遍历填写值的方式实现分组.

function groupBy(data){
		const  result = {}   
    data.forEach(item=>{
    	if(!result[item.key]){
        	result[item.key] = []
        }
        
      result[item.key].push(item.value)
    })
}

而使用reduce可以更方便的完成这个操作.

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reduce会每次传入计算值和当前值,经常被用来做数组求和:

[1,2,3].reduce((x1,x2)=>x1+x2)

第一次会默认取出第一个参数作为计算值,而第二个参数作为了当前值,但是我们也可以手动来设置初始的计算值来实现遍历

[1,2,3].reduce((sum,x)=>sum+=x,0)

这样其实更符合直观的理解。

使用类似的方式就可以实现分组函数。

const data = [{ key: 'a', value: '001' }, { key: 'a', value: '002' }, { key: 'b', value: '003' }]

const groupBy = (list, key) =>
  list.reduce((result, item) => {
    result[item.key] = [...(result[item.key] || []), item.value]
    return result
  }, {})
  
groupBy(data,'key')
// {a: Array(2), b: Array(1)}	
// a: (2) ["001", "002"]	b: ["003"]

这样就可以方便的使用groupBy实现分组功能了