对数组方法reduce和map的深入理解,用reduce方法实现map方法

 引言:偶然看到一道面试题,希望可以用reduce方法实现map方法,看过之后发现这是个有趣的逻辑思维题、既要对数组方法有深入理解也要有一定编程能力。

一、reduce语法

reduce:高阶数组方法,对数组中的所有元素应用一个函数(由你提供),将其减少为单个输出值。

arr.reduce((prev,cur,index,arr)={},initialValue)

reduce有两个参数,第一个callback函数,第二个初始值 ,适用于将序列的元素通过某种操作合并成一个单一的结果

callback 函数(执行数组中每个值的函数,包含四个参数):

    prev(必需):上一次调用回调返回的值,或者是提供的初始值(initialValue)
    cur(必需):数组中当前被处理的元素
    index:当前元素在数组中的索引
    arr:调用 reduce 的数组
initialValue(表示初始值,作为第一次调用 callback 的第一个参数):

        如果初始值存在,cur 从数组第一项开始,而prev 是初始值,如果初始值不存在,则 cur 从第二项开始执行,而 prev 是数组第一项的值 

reduce可以实现的功能很多,如数组求和、统计数组中元素出现的次数、数组去重、数组扁平化(flat可以直接用,也可以尝试用reduce写一下)等等。

 二、map语法

map:高阶数组方法,可以对数组中的每个元素进行操作,并返回一个新的数组,新数组的元素个数与原数组相同

array.map((cur, index, arr)=>{}, thisValue)

map也有两个参数,第一个callback函数,第二个指定函数中的 this 值,适用于对列表中的每个元素执行相同操作的情况

callback 函数(操作每个元素的函数,包含三个参数):
    cur:数组中当前被处理的元素
    index:当前元素在数组中的索引
    arr:调用 map的数组

thisValue 指定函数中的 this 值 

三、用reduce实现map

Array.prototype.map2 = function (callback, ctx = null) {
  if (typeof callback !== 'function') {
    throw('callback must be a function')
  }
  return this.reduce((pre, cur, index, arr) => {
    return  pre.concat(callback.call(ctx, cur, index, arr))
  }, [])
}

 总结

虽然在实际开发中很少会用到 reduce 来实现 map,但这种练习仍然有助于提升编程技能和问题解决能力。同时,也可以作为一个有趣的问题,让你更深入地理解 JavaScript 的数组方法。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值