前言

最近,被面试官问道 es6 中新增了哪些数组的 api, 说到 reduce()方法的时候卡壳了, 很惭愧,这里总结一下。

reduce 的原理

是一种数组的归并方法，和迭代方法（map,forEach,filter…）一样，都会对数组进行遍历，不同之处是reduce函数的第一个参数得到的是迭代计算后的结果.

语法

arr.reduce(callback,[initialValue]) //

callback有四个参数

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

举个例子

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

输出结果

reduce 的应用

1.求和/求乘积(一般也用不到哈)

let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b))//15
console.log(arr.reduce((a,b) => a * b))//120

2.记录某个元素在数组中出现了几次

let arr5 = ['name','age','long','short','long','name','name'] 

let arrResult1 = arr.reduce((pre,cur) =>{
    console.log(pre,cur)
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre
},{})

console.log(arrResult1)//结果：{name: 3, age: 1, long: 2, short: 1}

输出结果

分析:

1.由于设置了迭代初始值，pre的第一个值是一个空对象，此时cur为name，然后进行判断，发现在pre中没有name属性，所以就将name对应的属性值赋为1；
2.后面没有重复的是一样的道理，如果碰到重复值，就会将该属性值加1，这样就能计算元素重复的次数了。

3. 数组去重

let arrResult2 = arr5.reduce((pre, cur) => {
	if (!pre.includes(cur)) {
		pre.push(cur)
	}
	return pre
}, [])

console.log(arrResult2) //结果：[ 'name', 'age', 'long', 'short' ]

分析

先传入[ ] 空数组, 通过迭代过程,对目标数组进行遍历,判断当前元素是否已经添加到空数组中, 如果没有就从尾部追加到空数组中.十分高效!!

4. 将多维数组转化为一维

let arr6 = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

5.对象中的属性求和

var result = [
    {
        name: '王二',
        age: 10
    },
    {
        name: '张三',
         age: 20
    },
    {
        name: ' 李四',
        age: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.age + prev;
}, 0);
console.log(sum) //60

后记

reduce 还有很多其他的巧妙用法,后续想到会补充的,就先这样吧 😃 😝