原来reduce还可以这么玩

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

前言

工作中一次用到累加数据的时候，想到了reduce这个方法，但是具体用法有点模糊了，在了解一番解决需求后，更了解到了reduce的其他妙用，正好做下总结

含义

reduce，含义为减少、降低、简化。是一个js高阶函数，在js中主要用于数组的运算，常用方法除累加求和外，还可用于对象属性的求和，数组去重，数组扁平化，计算数组元素次数统计。来我们一起深扒一下

语法

reduce语法主要是:

array.reduce(function(total, value, index, arr){}, init)

参数具体含义:

total 必选，初始值，或者计算结束后的返回值

value 必选，当前正在处理的元素值

index 可选，当前元素的索引值

arr 可选，是指当前原数组

init 可选，表示传递给函数的初始值

用法

累加求和

	const reduceArr = [1,3,5,7,2,6]
	let reduceTotal = reduceArr.reduce(function(total, value, index, arr){
		console.log(total,value,index,arr);
		return total+value
	})
	console.log('reduceTotal = ',reduceTotal);

数组初始值为1，后续计算结束后的返回值与正在处理的元素值累加，结果依次为，1，4（1+3），9（4+5），16（9+7），18（16+2），24（18+6，也就是最后求和结果）

数组去重

	const reduceArr = [1,3,5,7,2,6,6,6,3,5]
	let reduceOrder = reduceArr.reduce(function(total, value, index, arr){
		console.log(total,value,index);
		if (total.indexOf(value) === -1) {
			total.push(value)
		}
		return total
	},[])
	console.log('reduceOrder = ',reduceOrder);

初始化一个新数组，通过indexOf进行过滤，生成一个去重后的新数组

计算数组元素次数统计

	const reduceArr = [1,3,5,7,2,6,6,6,3,5]
	let reduceNum = reduceArr.reduce(function(total, value, index, arr){
		console.log(total,value,index);
		value in total ? total[value]++ :total[value] = 1
		return total
	},{})
	console.log('reduceNum = ',reduceNum);

通过in运算符判断指定的属性是否在指定的对象里面，进行次数统计

数组扁平化

	const reduceArr = [1,3,[5,7,2,6],6,[6,3],5]
	let reduceSet = reduceArr.reduce(function(total, value, index, arr){
		console.log(total,value,index);
		return total.concat(value)
	},[])
	console.log('reduceSet = ',reduceSet);

通过contant方法实现数组扁平化，将二维数组转化为一维数组

对象属性求和

const reduceArr = [{
		name:'胡桃',
		size:37
	},{
		name:'赛利亚',
		size:41
	},{
		name:'雷克塞',
		size:116
	}]
	let reduceSum = reduceArr.reduce(function(total, value, index, arr){
		console.log(total,value,index);
		return value.size + total
	},0)
	console.log('reduceSum = ',reduceSum);

注意: 初始值应设置为0

每个人都不是一座孤岛，一个人必须是这世界上最坚固的岛屿，然后才能成为大陆的一部分。——海明威