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

2019年10月12日 85次阅读 来源: 洋小洋同学

数组中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)

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

在这里，你很好奇为什么是11，让我们来看下，首先reduce（）这个方法里装的依旧是个函数，但是还有第二个参数，作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。
《Array中的reduce()、filter()、map()几张图搞懂》

那么（acc,cur,idx,src）什么鬼

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

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

不难发现

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

那么我们实际过滤一下，
《Array中的reduce()、filter()、map()几张图搞懂》

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

最后map()

《Array中的reduce()、filter()、map()几张图搞懂》
还是同样的道理

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

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

    原文作者：洋小洋同学
    原文地址: https://segmentfault.com/a/1190000020656036
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞