js中的高阶函数

高阶函数

高阶函数是函数式编程的一种代码实现方案,一般把接受一个或多个函数作为参数,或者返回一个函数的函数叫做高阶函数。

js中最常见的一些高阶函数如闭包(返回函数),一些内置函数(传入函数)等。

Array.prototype.reduce

例:
image.png
reduce接受两个参数,返回操作后的数据。

参数一(必须):函数累计器,声明要对数组的每一个值执行的操作,累计器默认被传入四个参数,分别表示累计器上一次返回累计值,数组正在处理的元素,正在处理的元素下标,调用reduce的数组;其中前两个必选,后两个可选。

参数二(可选):声明累计器的初始值,没有的话默认选择数组的第一个元素作为累计器的第一个值。

常见错误

image.png

当对空数组执行reduce操作时,必须指定参数二,保证累加器有一个初始值,否则会报错,如上图。

image.png

上图的代码执行顺序

  1. 将数组的第一个元素 1 作为累计器的初始值;
  2. 第一次循环,从数组的第二个元素开始,初始值1,当前值2,下标1;
  3. 第二次循环,初始值为之前的累计值 3,当前值3,下标2;
  4. 得到最终累计值为6,返回结果,计算结束下标1;
Array.prototype.map

例:
普通用法

image.png

数组包含空元素

image.png

复杂数组

image.png

回调函数所有参数

image.png

map可选参数测试

image.png
image.png

map接受两个参数

参数一(必须):一个回调函数,这个函数会被自动传入三个参数分别表示数组元素,数组下标,数组本身;函数内声明对原数组的每一项做的指定操作,并将得到的数据放入一个新数组并返回;

参数二(可选):用来指定回调函数中this的指向

常见错误

将\['1','2','3'\]转换为数字数组

转换数字可以用parseInt,parseFloat,Number等方法,依次试验一下,结果如下:

image.png

这时候发现传入parseInt作为转换函数得不到想要的结果,回想一下,map接受的函数参数会被默认传入三个参数,而实际上,parseInt在使用过程中是可以接受两个参数的,第一个是解析的字符串,而第二个可选的参数,用来表示转换的进制,尝试一下:

image.png

所以错误的原因来自于此,当parseInt作为map的参数时,第二个参数被传入数组的下标,导致得不到想要的结果。
而parseFloat和Number则不存在这个问题。因为这两个函数都是智能接收一个字符串参数,并且返回转换后的结果。

Array.prototype.filter

示例:
image.png

filter接受两个参数
参数一(必选) 回调函数,指定过滤条件,回调函数接收三个参数,如上图所示,分别为当前处理的数组元素,当前处理的数组下标,调用filter的数组本身,并且返回一个过滤条件,符合条件的数组元素会被放入新数组返回;
参数二(可选) 同map,用来指定回调函数中this的指向;

通过高阶函数,我们还可以实现一些诸如函数缓存,函数柯里化等来提高js代码的性能及可读性,这个下次在说

Image placeholder
张磊
未设置
  37人点赞

没有讨论,发表一下自己的看法吧

推荐文章
模块化编程-高阶函数笔记

递归函数 递归函数就是定义了一个函数,然后在函数内,自己调用了自己这个函数递归函数内必须要有结束,不然就会一只调用下去,直到调用的层数越来越多,栈溢出递归函数是一层一层的进入,再一层一层的返回 初

Vue.js中的无渲染行为插槽

在本文中我们讨论Vue中的无渲染插槽模式能够帮助解决哪些问题。在Vue.js2.3.0中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生,解决了提供可重用行为和可插入表示的问题。在这里

Vuejs中的监察院"watch"

最近刚刚追完庆余年,心思还总是在剧情里,然后就觉得在vuejs里watch就是监察院,一个不折不扣的特务机构。在Vue中watch被称为监听者,它随时观察这vue实例中每一个数据的变化,当数据发生改变

了解Node.js中的流(Stream)

Node.js中的流(Stream)是出了名的难用甚至是难以理解。用DominicTarr的话来说:“流是Node中最好的,也是最容易被误解的想法。”即使是Redux的创建者和React.js的核心团

Python 面向对象 高阶-描述符与设计模式笔记

描述符 当一个类中,包含了三个魔术方法(__get__,__set__,__delete__)之一,或者全部时,那么这个类就称为描述符类 作用 描述符的作用就是对一个类中的某个成员进行一个详细的

如何应对Kubernetes中的存储管理挑战?

Kubernetes是Google开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。对于那些工作负载多样化、不断变化的企业来说,使用Kubernetes是非常有利的。与容器一样,

阿里支付宝架构师:谈谈我眼中的高并发架构【好文】

来源:my.oschina.net/u/3772106/blog/1793561前言高并发经常会发生在有大活跃用户量,用户高聚集的业务场景中,如:秒杀活动,定时领取红包等。为了让业务可以流畅的运行并且

实操讲解:使用Keras中的自动编码器进行极端罕见事件分类

在这篇文章中,我们将学习如何实现用自动编码器来构建稀有事件分类器。我们将使用来自此处的真实稀有事件数据集。背景什么是极端罕见的事件?在一个罕见的问题中,我们有一个不平衡的数据集。意思是,我们得到的阳性

架构师眼中的高并发架构

前言高并发经常发生在有大活跃用户量和用户高聚集的业务场景中,如:秒杀活动、定时领取红包等。为了让业务可以流畅的运行并且给用户一个好的交互体验,我们需要根据业务场景预估达到的并发量等因素,来设计适合自己

基于JS的高性能Flutter动态化框架MXFlutter

导语:18年10月份,手机QQ看点团队尝试使用Flutter,做为iOS开发,一接触到Flutter就马上感受到,Flutter虽然强大,但不能像RN一样动态化是阻碍我们使用她的唯一障碍了。看Goog

js中如何引入css文件以及路径问题

js中如何引入css文件以及路径问题一、在js中引入css文件的方法:1、通过document.createElement方法创建link标签;2、通过setAttribute方法设置link标签的c

js中如何移除css样式?

js中如何移除css样式?dom元素应用css有两种方式:●通过class类名和id名应用样式●通过指定style属性应用样式我们可以针对以上两种方式写移除css样式的方法(相关课程推荐:JS视频教程

Kafka 优秀的架构设计!它的高性能是如何保证的?

应大部分的小伙伴的要求,今天这篇咱们用大白话带你认识Kafka。Kafka 基础消息系统的作用大部分小伙伴应该都清楚,这里用机油装箱举个例子:所以消息系统就是如上图我们所说的仓库,能在中间过程作为缓存

探秘K1 Power:如何打造一台坚若磐石的高性能小型机?

熟悉服务器领域的朋友,必然对浪潮K1小型机或多或少有所了解。在当年关键业务主机市场寡头垄断的格局下,浪潮400多位工程师耗费4年时间,于2010年成功研制出了K1小型机,为市场注入一股新的血液。使得中

2019全球PostgreSQL生态报告出炉,PG为何从RDBMS中脱颖而出?

墨墨导读:本文是近期ScaleGrid发布的2019PG趋势报告,从不同的角度解读了PostgreSQL如何在众多优秀的RDBMS中脱颖而出,原文:https://scalegrid.io/blog/

数据科学家的高级能力:“讲故事”

在不算太遥远的过去,业界对数据科学家的评判主要依据于他们发现、理解、管理和综合信息的能力。随着数据环境的不断发展和计算能力的不断提高,编码技能变得越来越重要。随着时间的推移,又出现了更加细致入微的技能

技术峰会归来,AWS中国赢在何处?

摘要:以『即刻构建』为主题的AWS技术峰会2019,其目的是为了推进企业上云,让企业上云不再只是一个想法,而是立即行动起来变成事实。这与此前结束的阿里云峰会,阿里云喊出“全面上云的拐点到来”异曲同工。

腾讯林晓斌:数据库的高易用性如何实现?

腾讯云基于QQ、微信、腾讯游戏等海量业务的技术锤炼,从基础架构到精细化运营,从平台实力到生态能力建设,腾讯云将之整合并面向市场,使之能够为企业和创业者提供集云计算、云数据、云运营于一体的云端服务体验。

css中怎么把图片颜色反转

css中怎么把图片颜色反转css把图片颜色反转可以使用invert滤镜效果,invert滤镜就是为了设置元素的反色效果,它的值设置范围为:0-100%,100%为完全反色,0为显示正常的颜色。.nor

css中Position属性图文详解

1.介绍1.1说明Position属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。1.2主要的值①absolute:绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。

css中怎么设置没有内容时高度为0

css中怎么设置没有内容时高度为0默认情况下HTML元素没有内容时,高度就是0,不需要手动设置。但这时有些元素仍然具有margin属性,这会对其他元素造成影响,如p标签。(相关课程推荐:css视频教程

css中ul怎么定位

css中ul怎么定位css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的cssposition属性即可。关于定位的几种方式1、static定位(普通流定位)--默认定

css中背景透明的图片不透明怎么解决

css中背景透明的图片不透明怎么解决一、使用滤镜解决img{ background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft

asp怎么调用css中样式

asp怎么调用css中样式asp调用外部css文件有以下三种方式:1、link链接方式在需要调用的asp文件中写入一下语句:(相关课程推荐:css视频教程)2、@import导入方式在需要调用的asp

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格