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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
Table冻结表头示例代码
Aug 20 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
使用Javascript简单计算器
Nov 17 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
解决await在forEach中不起作用的问题
Feb 25 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
使用数据库保存session的方法
2006/10/09 PHP
PHP操作数组相关函数
2011/02/03 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
python实现保存网页到本地示例
2014/03/16 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
建筑公司员工自我鉴定
2014/04/08 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
高考励志标语
2014/06/05 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
教你利用python实现企业微信发送消息
2021/05/23 Python
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏