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

2019-10-12 admin

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

[转载]原文链接:https://segmentfault.com/a/1190000020656036

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77168.html

文章标题:Array中的reduce()、filter()、map()几张图搞懂

相关文章
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
JavaScript中的cacheStorage使用详解
localStorage 应是家喻户晓的?但本地存储这个家族可远不止它。以前扯过 sessionStorage,现在还有个神奇的 CacheStorage。它用来存储 Response 对象的。也就是说用来对 HTTP ,响应做缓存的。虽然...
2017-03-27
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
这里汇总了js实现时间显示几天前、几小时前或者几分钟前的常见方法。分享给大家供大家参考。具体如下: 方法一: 个人做法是保存时间戳,然后在前端用jq插件做转换,比如 smart-time-ago 方法二: (通过freemarker模板)如...
2017-03-24
javascript 中的try catch应用总结
<script language="javascript"> try { throw new Error(10,"asdasdasd") } catch (e) { alert(e.mes...
2017-04-05
详解JavaScript ES6中的Generator
今天讨论的新特性让我非常兴奋,因为这个特性是 ES6 中最神奇的特性。 这里的“神奇”意味着什么呢?对于初学者来说,该特性与以往的 JS 完全不同,甚至有些晦涩难懂。从某种意义上说,它完全改变了这门语言的通常行为,这不是“神奇”是什么呢。 ...
2017-03-27
详细解读AngularJS中的表单验证编程
需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的...
2017-03-25
详细解读JavaScript编程中的Promise使用
Promise核心说明 尽管Promise已经有自己的规范,但目前的各类Promise库,在Promise的实现细节上是有差异的,部分API甚至在意义上完全不同。但Promise的核心内容,是相通的,它就是then方法。在相关术语中,pro...
2017-03-27
整理AngularJS中的一些常用指令
AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令: ng-app - 该指令启动一个AngularJS应用。 ng-init - 该指令初始化应用程序数据。 ng-model - 此指令定义的...
2017-03-24
JavaScript中的slice()方法使用详解
此方法提取字符串的一部分,并返回一个新的字符串。 语法 string.slice( beginslice [, endSlice] ); 下面是参数的详细信息: beginSlice : 从零开始的索引位置开始提取 endSlice :...
2017-03-24
详解AngularJS中的作用域
范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器,模型数据通过$scope对象访问。 <script> var mainApp = angular.module("m...
2017-03-24
回到顶部