阅读 25

【卡片校园技术】简单理解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
    复制代码
关注下面的标签,发现更多相似文章
评论