js reduce实现map_JavaScript基础:说说map, filter, reduce的区别?reduce实现map

map函数

map 作用是生成一个新数组,遍历原数组,将每个元素拿出来做一些变换然后放入到新的数组中。

[1, 2, 3].map( v => v + 1 ) 
20d4d3fd4e02427b91919c75d4bbc1b9.png

另外 map 的回调函数接受三个参数,分别是当前索引元素,索引,原数组

['1','2','3'].map(parseInt)
6502d070b26cecafba26f27358a867cb.png
  1. 第一轮遍历 parseInt('1', 0) -> 1
  2. 第二轮遍历 parseInt('2', 1) -> NaN
  3. 第三轮遍历 parseInt('3', 2) -> NaN

filter函数

filter 的作用也是生成一个新数组,在遍历数组的时候将返回值为 true 的元素放入新数组,我们可以利用这个函数删除一些不需要的元素

let array = [1, 2, 4, 6]let newArray = array.filter(item => item !== 6)console.log(newArray) 
41a5c75b381870fc3a0c29d9935f2fd8.png

和 map 一样,filter 的回调函数也接受三个参数,用处也相同。


reduce函数

reduce可以将数组中的元素通过回调函数最终转换为一个值

如果我们想实现一个功能将函数里的元素全部相加得到一个值,可能会这样写代码

const arr = [1, 2, 3]let total = 0for (let i = 0; i < arr.length; i++) {total += arr[i]}console.log(total) // 6
7cf205179eab3f2477d61d6ee950e84a.png

但是如果我们使用 reduce 的话就可以将遍历部分的代码优化为一行代码

const arr = [1, 2, 3]const sum = arr.reduce((acc, current) => acc + current, 0)console.log(sum)
57d63ba6588463a1a30b3b3d259a645d.png

对于 reduce 来说,它接受两个参数,分别是回调函数初始值,接下来我们来分解上述代码中 reduce 的过程:

  1. 首先初始值为 0,该值会在执行第一次回调函数时作为第一个参数传入
  2. 回调函数接受四个参数,分别为累计值、当前元素、当前索引、原数组,后三者想必大家都可以明白作用,这里着重分析第一个参数
  3. 在一次执行回调函数时,当前值和初始值相加得出结果 1,该结果会在第二次执行回调函数时当做第一个参数传入
  4. 在第二次执行回调函数时,相加的值就分别是 1 和 2,以此类推,循环结束后得到结果 6

想必通过以上的解析大家应该明白 reduce 是如何通过回调函数将所有元素最终转换为一个值的,当然 reduce 还可以实现很多功能.

通过 reduce 来实现 map 函数

const arr = [1, 2, 3]const mapArray = arr.map(value => value * 2)
296b356e76a923de93e0507652141ab7.png
const reduceArray = arr.reduce((acc, current) => {acc.push(current * 2)return acc}, [])
01d461e68682ed14d2fdf7be5d3763bb.png
欢迎关注
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值