reduce怎么用

reduce类似于一个迭代器，可调用上一次计算的值

一、参数

• (callBack,initialVal)

callBack => 回调函数
initialVal => 初始值

• callBack函数里可以接收4个参数(pre, cur, index, arr)

 pre => 前一个数据
 cur => 当前数据
 index => 当前索引
 arr => 原数组

• initailVal表示初始时pre传的值，可不填

二、返回值

• 有返回值且返回的是一个计算后的数据，可能是数组，也可能是数字、对象、其他类型

三、使用场景

• 当需要对后端接收的数据进行处理时

四、实战

1.数组累加

const arr = [1, 2, 3]
const sum = arr.reduce((pre, cur) => {
	return pre + cur
}, 0)
console.log(sum)
/*
	6
*/

2.数组去重

const arr = [1, 2, 2, 4, 5, 4, 6, 6, 5]
const newArr = arr.reduce((pre, cur) => {
	if (!pre.length || !pre.includes(cur)) {
		pre.push(cur)
	}
	return pre
}, [])
console.log(newArr)
/*
	[1,2,4,5,6]
*/

3.数组对象相同name属性累加

const arr = [
	{ name: '北京', value: 10 },
	{ name: '北京', value: 2 },
	{ name: '上海', value: 9 },
	{ name: '深圳', value: 4 },
	{ name: '上海', value: 3 },
]
const result = arr.reduce((pre, cur) => {
	if (!pre.length) {
		pre.push(cur)
	} else {
		let flag = false
		pre.map((i) => {
			if (i.name == cur.name) {
				i.value += cur.value
				flag = true
			}
			return i
		})
		if (!flag) {
			pre.push(cur)
		}
	}
	return pre
}, [])
console.log(result)
/*
	[{name: '北京', value: 12},
	{name: '上海', value: 12},
	{name: '深圳', value: 4}]
*/

4.对象累加

const obj = {
	test1: { a: 1, b: 2 },
	test2: { a: 4, b: 4 },
	test3: { a: 5, b: 2 },
}
const tempArr = []
for (let prop in obj) {
	tempArr.push(obj[prop])
}
const result = tempArr.reduce((pre, cur) => {
	if (!pre.length) {
		pre.push(cur)
	} else {
		pre.map((i) => {
			for (let key in i) {
				i[key] += cur[key]
			}
			return i
		})
	}
	return pre
}, [])
console.log(result)

/*
	[{a: 10, b: 8}]
*/

想到了啥以后再往上加 - v -

参考文章：
1.JS数组reduce()方法详解及高级技巧