【卡片校园技术】简单理解Map，Filter，Reduce方法并在数组原型中实现

最近学了数组的几个方法，感觉很重要也很有意思。用自己的思路梳理一下，希望能帮助到一些初学者。

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

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]

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]

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

作者：Equicy
链接：https://juejin.im/post/5cb94c07e51d456e7618a6cd
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【卡片校园技术】简单理解Map，Filter，Reduce方法并在数组原型中实现

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

猜你喜欢