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

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

让我们由浅入深的理解一下这三个方法:
  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]
  1. 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]
  1. 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

在这里插入图片描述

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值