简单理解Map，Filter，Reduce方法并在数组原型中实现

大家好，我是前端小白Equicy，最近学了数组的几个方法，感觉很重要也很有意思。用自己的思路梳理一下，希望能帮助到一些初学者。

让我们由浅入深的理解一下这三个方法：

1. map: 映射，数组遍历并且通过一些特定的规则加工之后，返回一个新的数组，新的数组与原数组长度一样。举个例子：穿着红衣服的小明、丹尼-->map(戴个帽子)-->穿着红衣服的小明、丹尼，并且戴着帽子

   • 语法解释

   map(callback(item[,index[,arr]])[,thisArg]))
   callback,执行的规则；item：遍历的每一个元素；arr：当前数组；thisArg：this指向

   • 举例说明

   var arr = [1,2,3];
   arr.map(item=>item+1) //[2,3,4]
   

   • 原型实现

   Array.prototype.Mymap = function(fn){
       let res=[]
       for(let i = 0; i<this.length;i++){
           res.push(fn(this[i],i,this))
       }
       return res; 
   }
   var arr = [1,2,3];
   arr.Mymap(item=>item+1) //[2,3,4]
   

2. filter: 过滤，数组遍历并且通过一些特定的规则加工之后，返回一个新的数组，新数组的长度<=原数组长度。举个例子：穿着红衣服的小明、丹尼-->filter(小明)-->穿着红衣服的小明出来，丹尼被过滤掉

   • 语法解释

   filter(callback(item[,index[,arr]])[,thisArg]))
   callback,执行的规则；item：遍历的每一个元素；arr：当前数组；thisArg：this指向

   • 举例说明

   var arr = [1,2,3];
   arr.filter(item=>item>2) //[3]
   

   • 原型实现

   Array.prototype.Myfilter = function(fn){
       //判断this是否为underfined
       if(this===null || underfined){
           throw '输入不能为null或者underfinded'
       }
       let res = []
       for(let i = 0; i<this.length; i++){
           if(fn(this[i],i,this)){
               res.push(this[i])
           }
       }
       return res;
   }
   var arr = [1,2,3];
   arr.filter(item=>item>2) //[3]
   

3. reduce: 折叠，为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素，举个例子：小明拿着接力棒1-->reduce(接力)-->丹尼接过接力棒1并拿上接力棒2-->李明接过接力棒1、2并拿上接力棒3.....;即每次得到结果用在下次运算当中

   • 语法解释

   reduce(callback(recc,item[,index[,arr]])[,initialValue]))
   callback:执行的规则；recc:累计回调的返回值;它是上一次调用回调时返回的累积值，或initialValue; item：遍历的每一个元素；arr：当前数组；initialValue:作为第一次调用callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

   • 举例说明

   var arr = [1,2,3];
   arr.reduce((recc,item)=>recc+item,0) //0+1=1-->1+2=3-->3+3=6  输出结果为6  
       recc值得变换 0-1-3-6
   

   • 原型实现

   Array.prototype.Myreduce = function(fn,base){
       let initialArr = this;
       let arr = initialArr.concat();
       if(base)arr.unshift(base);
       let newValue;
       while (arr.length > 1) {
           newValue = fn.call(null, arr[0], arr[1]);
           arr.splice(0, 2, newValue);
       }
       return newValue;
   }
   var arr = [1,2,3];
   arr.reduce((recc,item)=>recc+item,0) //0+1=1-->1+2=3-->3+3=6  输出结果为6