js reduce 和 reduceRight 方法的深入理解

目录

一、概述

二、归并方法

（1）、reduce()  方法

（2）、reduceRight() 方法

三、手写 reduce() 方法（中高级前端面试题）★★★★★

1、手写 reduce() 方法

---

参考：https://blog.csdn.net/mChales_Liu/article/details/103201171#14%E3%80%81%E5%BD%92%E5%B9%B6%E6%96%B9%E6%B3%95

 

一、概述

reduce() 和 reduceRight() 方法都属于数组的归并方法。

• reduce() 和 reduceRight() 方法都接收2个参数：数组每一项都要调用的函数 和 （可选的）作为归并基础的初始值。
• 传入这些方法中的函数会接收4个参数：前一个值、当前值、项的索引 和 数组对象。
• reduce() 和 reduceRight() 方法都改变原数组。
   

二、归并方法

（1）、reduce()  方法

reduce() 方法从数组的第一项开始，遍历到最后。

let numArr = [1,2,3,4,5];
 
let sum1 = numArr.reduce((prev, cur, index, array)=>{
    return prev + cur;
});
console.log(sum1);                  // 15

上述代码，第一次执行回调函数时，prev 是1，cur 是2。第二次执行时，prev 是3（1 加 2 的结果），cur 是3（数组 numArr 中的第三项）。以此类推，累加直至数组最后一项，最后返回结果。

let numArr = [1,2,3,4,5];
 
let sum2 = numArr.reduce((prev, cur, index, array)=>{
    return prev + cur;
}, 100);
console.log(sum2);                  // 115

上述代码，制定了初始值位100，所以，第一次执行回调函数时，prev 是100，cur 是1。第二次执行时，prev 是101，cur 是2。以此类推，累加直至数组最后一项，最后返回结果。

（2）、reduceRight() 方法

reduceRight() 方法从数组的最后一项开始，向前遍历到第一项。

let numArr = [1,2,3,4,5];
 
let sum = numArr.reduceRight((prev, cur, index, array)=>{
    return prev + cur;
});
console.log(sum);                // 15

上述代码，第一次执行回调函数时，prev 是5，cur 是4。第二次执行时，prev 是9（5 加 4 的结果），cur 是3（数组 numArr 中的第三项）。以此类推，累加直至数组最后一项，最后返回结果。

 

三、手写 reduce() 方法（中高级前端面试题）★★★★★

1、手写 reduce() 方法

Array.prototype.myReduce = function (f, value=0) {
    let arr = this;
    for (let i = 0; i < arr.length; i++) {
        value = f(arr[i], value)
    }
    return value
}

var data = [4,8,15,16,23,42];
var sum1 = data.myReduce(function(a,b){
    return a+b;
})
var sum2 = data.myReduce(function(a,b){
    return a+b;
},10)
console.log([sum1, sum2])                           // [108, 118]

上述代码中，采用了 ES6 设置默认值的方式：value=0。