Array中的reduce()、filter()、map()几张图搞懂

2019-10-12

数组中reduce()函数与过滤filter()和映射map()有什么区别?

先来看看reduce()这个函数,废话不多说,直接上代码
const arr = [1,2,3,4]

const res = arr.reduce((acc,cur,idx,src)=>{
  return acc+cur
},1)

console.log(res)

image.png

在这里,你很好奇为什么是11,让我们来看下,首先reduce()这个方法里装的依旧是个函数,但是还有第二个参数,作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 image.png

那么(acc,cur,idx,src)什么鬼

  • 第一个参数:初始值,或者计算后返回的值
  • 第二个参数:就是当前的元素嘛
  • 第三个元素:就是当前元素的索引
  • 第四个元素:数组
再来欣赏下filter()

image.png

不难发现

  • 第一个参数:就是数组中的每个元素
  • 第二个参数:索引嘛
  • 第三个参数:就是数组

那么我们实际过滤一下, image.png

显然,大于4的没有 返回返回的是空的数组

最后map()

image.png还是同样的道理

  • 参数一:循环的时候,当前的数组元素
  • 参数二:就是元素
  • 参数三:数组

image.png

原文链接:segmentfault.com

上一篇:JavaScript 小知识, 加没加 prototype , 用法大不同
下一篇:JavaScript新建实例不需要带 new 的小技巧
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部