ES6 高阶函数的使用详解

news/2023/10/4 2:18:52

高阶函数是ES6提供的新方法。只所以叫高阶函数是因为这些方法参数都是函数,也就是在函数里面传函数。这就是所谓的函数式编程,函数是一等公民。而传统的面向对象编程,对象是第一公民。
主要高阶函数有filter,map和reduce。这三个函数实际上就是用来替代for循环,更加的高效方便。

filter函数

有这样的需求:
1.过滤数组中小于100的数字,arr=[10,99,101,22,33]。
传统做法就是遍历加判断。ES6提供新的方式(可以提供高阶函数)来快速实现这种功能。
这种写法是少很多代码的,也不要for循环了。而且会将结果直接添加到新的数组里面,这个用传统方法写代码还是比较多的。

                let arr=[10,99,101,22,33]let newArrnewArr=arr.filter(function (n) {return n<100})console.log(newArr);

map

2.需求:将数组中的元素乘以二,arr=[10,99,101,22,33]。

 				let arr=[10,99,101,22,33]let newArr=arr.map(function (n) {return n*2})console.log(newArr)

reduce

3.需求将数组中的元素累加,arr=[10,99,101,22,33]
可以实现遍历数组,并且拿到前一个值和当前值,这样我们就可以实现类似累加或者累乘等操作。
下面的代码实现累加,比for还是少一些代码的。需要传两个参数第一个和上面一样,传一个函数,第二个参数实际上是给prevValue一个初值。这里是0。
reduce相对来说难一点,不过他的本质就是拿到前一个值和当前值

				let arr=[10,99,101,22,33]let newArr=arr.reduce(function (prevValue,currentValue) {return prevValue+currentValue},0)console.log(newArr);

整合例子

把上面三个函数一起用。
4.需求:筛选小于100的元素,然后乘以2,然后把数组累加。
就是将上面的写法连在一起。

      		   let arr=[10,99,101,22,33]let total= arr.filter(function (value) {return value<100}).map(function (value) {return value*2}).reduce(function (prev,cur){return prev+cur},0)console.log(total)

通过箭头函数简化(lambda表达式)

实际上就是lambda表达式。

  let arr=[10,99,101,22,33]        let total= arr.filter(n=>n<100).map(n=>n*2).reduce((prev,cur)=>prev+cur)console.log(total)

计算书籍总价实例

下面的例子在实际开发中很常见。计算图书的总价,总价等于单价乘数量,再累加每种类型的书目。使用高阶函数就可以非常简单的实现。

 totalPrice(){return this.books.map(book => book.num*book.price).reduce((prev,cur)=>prev+cur)}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.yaotu.net/news/4722.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt5开发从入门到精通——第六篇四节( 图像与图片——显示SVG格式图片 )

欢迎小伙伴的点评✨✨&#xff0c;相互学习、互关必回、全天在线&#x1f373;&#x1f373;&#x1f373; 博主&#x1f9d1;&#x1f9d1; 本着开源的精神交流Qt开发的经验、将持续更新续章&#xff0c;为社区贡献博主自身的开源精神&#x1f469;‍&#x1f680; 文章目录前…

【云原生】设备入云之FlexManager主流控制器读写

文章目录前言一、主流控制器数据类型1、 SIEMENS S7-200_Network1、位数据2、无符号整数3、单精度浮点2、Mitsubishi FX3U_FX3G1、位数据2、无符号整数3、单精度浮点二、主流控制器数据调用实例1、 SIEMENS S7-200 数据调用1、状态位调用2、浮点数据调用3、无符号整数调用4、辅…

面试必问——什么是BFC问题

什么是BFC问题 面试必会知识BFC 一、什么是BFC BFC即 Block Formatting Contexts (块级格式化上下文)&#xff0c; 是 W3C CSS2.1 规范中的一个概念。BFC是指浏览器中创建了一个独立的渲染区域&#xff0c;并且拥有一套渲染规则&#xff0c;他决定了其子元素如何定位&#x…

基于 attention 机制的 LSTM 神经网络 超短期负荷预测方法学习记录

LSTM&#xff08;long short-term memory)长短期记忆 基础介绍 在标准LSTM体系结构中&#xff0c;有1个记忆单元状态和3个门&#xff0c;即更新门Γu、遗忘门Γf和输出门Γo&#xff0c;标准LSTM的体系结构如图2所示。采用x 1, x 2, …, x T 表示LSTM网络中的典型输入序列&am…

Linux常见命令

一、目录操作命令 1.目录切换 cd 命令&#xff1a;cd 目录 2 .目录查看 ls [-al] 命令&#xff1a;ls [-al] 3 .目录操作【增&#xff0c;删&#xff0c;改&#xff0c;查】 1 .创建目录【增】 mkdir 命令&#xff1a;mkdir 目录 2 删除目录或文件【删】rm 命令&#xff1a;rm …

数仓Hive和分布式计算引擎Spark多整合方式实战和调优方向

Hive与Spark之间整合有3种模式,本篇从Hive on Spark和Spark on Hive的使用出发,hive支持mr、tez和spark三种底层计算引擎,通过部署Hive on Spark环境实现Hive用到Spark的体验,Spark on Hive的使用则比较简单直接通过SQL操作Hive,最后罗列常见的一些大数据性能调优方法。@目…

Javaweb学生信息管理系统(Mysql+JSP+MVC+CSS)

目录 一.项目介绍 二.运行效果 1.登录界面 2.主界面&#xff08;点击学号修改学生信息&#xff09; 3.增加学生界面 ?编辑 三.项目目录结构 ?四.代码展示 1.jsp及css代码 ?①登录界面代码&#xff08;login.jsp&#xff09; ②登录界面css&#xff08;login.css&…

HTTP协议中的“报头”(header)和 “正文“ (body)详解

系列文章目录 Fiddler抓包&#xff1a;下载、安装及使用_crazy_xieyi的博客-CSDN博客 HTTP协议格式、URL格式及URL encode_crazy_xieyi的博客-CSDN博客 GET和POST有什么区别&#xff1f;_crazy_xieyi的博客-CSDN博客 文章目录 一、请求“报头”(header)详解二、请求 "…

springboot校园师生出入登记系统java ssm

后台主要是管理员&#xff0c;管理员功能包括个人中心&#xff0c;通知公告管理&#xff0c;用户管理&#xff0c;工作人员管理&#xff0c;进门登记管理&#xff0c;出门登记管理&#xff0c;出入统计管理&#xff0c;外来登记管理等&#xff1b; 系统对这些功能进行整合 本次…

【操作系统】系统启动流程

文章目录系统启动流程&#xff08;Linux&#xff09;BIOSMBRGRUB2启动引导内核引导systemd固件和BIOSBIOS分类关于legacy关于uefibootloader 启动管理器kernel初始化systemd - 守护进程总结系统启动流程&#xff08;Linux&#xff09; 1. BIOS 加电自检 2. 把 MBR 加载到内存 …

MyBatis的各种查询功能(5种)

MyBatis的各种查询功能(5种) 查询一个实体类对象&#xff1a; 新建一个SelectMapper的接口文件 新建一个SelectMapper.xml的映射文件 新建一个测试类SelectMapperTest.java文件 在接口文件中添加查询一条语句的方法声明 在映射文件中添加sql语句 在测试类中编写查询一条语句…

spark(day04)

数据挖掘 数据挖掘∶也就是data mining&#xff0c;是一个很宽泛的概念&#xff0c;也是一个新兴学科&#xff0c;旨在如何从海量数据中挖掘出有用的信息来。 数据挖掘这个工作Bl&#xff08;商业智能&#xff09;可以做&#xff0c;统计分析可以做&#xff0c;大数据技术可以做…

哈希的使用

文章目录1. 哈希的使用1.1 unordered_set1.2 unordered_map1.3 测试效率2 练习题2.12.21. 哈希的使用 map、set和哈希的区别&#xff1a; map是双向迭代器&#xff0c;哈希表是单向迭代器。map有序&#xff0c;哈希无序。map查找是logn&#xff0c;哈希是O(1); 1.1 unordered…

Java | static关键字的应用【工具类、代码块和单例】

在上一篇文章讲完了static关键字的一些基础知识后&#xff0c;我们就来说一说这个关键字在应用开发中具体可以怎么使用吧&#xff0c;希望看完这篇文章可以对您有帮助&#x1f4d6; static关键字在具体开发中的应用一、工具类1、什么是工具类&#xff1f;2、使用工具类有什么好…

Spring

目录 1、Spring 1.1、简介 1.2、优点 1.3、组成 1.4、拓展 2、IOC理论推导 2.1、原来的实现 2.2、需求变更 2.3、改进 2.4、IOC本质 设计思想 2.5、Spring和IoC的关系 3、HelloSpring 3.1、基础环境 3.2、导包 3.3、编写代码 思考问题&#xff1f; 4、IOC创建…

grpc|protobuf的安装、编译、运行笔记(C++)

一、下载grpc源码 如果你的电脑/服务器可以做代理&#xff0c;然后稳定链接上 GitHub 那么完全可以按照 GitHub 的官方文档来操作&#xff0c;我这里采用 Gitee 镜像来操作 git clone https://gitee.com/jiangxy__loey/grpc.git二、下载依赖库 进入grpc目录&#xff0c;然后…

【数据结构】二叉树的顺序结构及实现,堆,向上调整算法,向下调整算法,数组建堆算法,堆排序

提示&#xff1a;学习本文之前&#xff0c;要先了解一下树的概念及结构&#xff0c;二叉树的概念及结构&#xff0c;详情请至博客。 文章目录1.二叉树的顺序结构2.堆的概念及结构3.堆的实现3.1堆的总实现3.2堆的向上调整算法---O(logN)3.3堆的向下调整算法---O(logN)4.数组建堆…

【JavaWeb】一文搞懂Response

文章目录1 Response继承体系2 Response响应2.1 响应行2.2 响应头2.3 响应体3 Response 重定向3.1 什么是重定向3.1.1 重定向实现的步骤3.1.2 例子3.2 重定向简化3.3 重定向的特点3.4 资源路径&#xff08;要不要加虚拟目录&#xff09;3.4.1 两种情况3.4.2 动态配置虚拟目录4 R…

python的脚本如何执行

运行python脚本的几种方法&#xff1a; 一. 终端命令行下 []$python "name.py" 二. python环境中 若脚本名称为name.py&#xff0c; 其内容为&#xff1a; a"head" b"hehe" print(a,b) 则使用 >>>impport name 针对此种方法我们使用下面…

vue路由传参

今天介绍路由传递参数的方式。首先要明白路由跳转的两种方式一种是声明式导航另一种是编程式导航。 参数的形式&#xff1a; params参数&#xff1a;属于路径中的一部分&#xff0c;需要注意的是在配置路由时需要占位query参数&#xff1a;不属于路径中的一部分&#xff0c;不…
最新文章