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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 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
Cygwin中安装PHP方法步骤
2015/07/04 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
python字符类型的一些方法小结
2016/05/16 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python操作excel的方法
2018/08/16 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python 获取等间隔的数组实例
2019/07/04 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python使用配置文件过程详解
2019/12/28 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
Servlet方面面试题
2016/09/28 面试题
初中新生军训方案
2014/05/13 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2014年纠风工作总结
2014/12/08 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python