JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析


Posted in Javascript onMay 22, 2019

本文实例讲述了JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法。分享给大家供大家参考,具体如下:

高阶函数(higher-order functions),就是返回其它函数的函数,或者使用其它函数作为它的参数的函数。

使用函数作为参数

因为函数本身就是一个值,所以可以让函数作为参数传递给其它的函数。JavaScript 有些函数就需要用到函数类型的参数,比如 Array.map。

比如我有一组数据:

const names = ['小猫', '小狗', '小刺猬']

我要分别问候一下这组数据里的每个项目:

const greetings = names.map(function(name) {
 return `hi ~ ${name}`
})
console.log(greetings)
// ["hi ~ 小猫", "hi ~ 小狗", "hi ~ 小刺猬"]

上面的 map 方法里用了一个匿名函数作为它的参数。在这个函数里面,我们在数组里的每个项目的前面都加上了一个 “hi ~” ,map 会返回一个新的数组,这个数组我交给了 greetings 变量。

用箭头函数会更简洁一些:

const greetings = names.map(name => `hi ~ ${name}`)

高阶函数

高阶函数(higher-order functions)。在 JavaScript 里面,函数跟普通的对象没啥大区别,所以你可以让函数作为参数传递到其它的函数里面,你也可以在函数里返回函数。使用函数作为参数的函数,或者返回函数的函数,这些函数被称为高阶函数(higher-order functions)。

比如刚才我们用的 map 就是一个高阶函数,因为它会用到一个函数作为它的参数。

再看一个例子:

const robot = (name, action) => {
 return action(name)
}
const greet = (name) => {
 return `hello, ${name}`
}
const greeting = robot(' 您好 ', greet)
// 返回 “ hello, 您好 ”

robot 是个函数,它支持两个参数,name 与 action,这里的 action 参数的类型是一个函数。在 robot 里面返回了 action ,并且把 name 参数的值交给了 action。接下面我们又定义了一个函数叫 greet,它接受一个参数是 name ,这个函数会返回一个字符串。

然后我们用了一下 robot 这个函数,设置了一下它的两个参数的值,name 参数的值是 ' 您好 ‘,action 参数的值是我们定义的 greet 这个函数。执行的结果就会是:

hello, 您好

我们可以再去定义一下函数:

const goodbye = (name) => {
 return `bye, ${name}`
}

然后再用一下 robot 函数:

const byeBye = robot(' 您好 ', goodbye)

这次会返回:

bye, 您好

完整的例子:

const robot = (name, action) => {
 return action(name)
}
const greet = (name) => {
 return `hello, ${name}`
}
const greeting = robot(' 您好 ', greet)
console.log(greeting)
const goodbye = (name) => {
 return `bye, ${name}`
}
const byeBye = robot(' 您好 ', goodbye)
console.log(byeBye)

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
jquery 插件学习(三)
Aug 06 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
javascript解析json实例详解
Nov 05 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
vue-router源码之history类的浅析
May 21 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 #Javascript
详解在React-Native中持久化redux数据
May 22 #Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 #Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 #Javascript
jQuery Migrate 插件用法实例详解
May 22 #jQuery
自定义Vue组件打包、发布到npm及使用教程
May 22 #Javascript
Vue中的组件及路由使用实例代码详解
May 22 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
PHP伪静态页面函数附使用方法
2008/06/20 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
IBatis持久层技术
2016/07/18 面试题
2015年房产经纪人工作总结
2015/05/15 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记