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

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • 深入理解JavaScript中的箭头函数

    从一开始箭头就是 JavaScript 的一部分,在第一个 JavaScript 中就建议将内联的脚本代码包裹在 HTML 的注释中,这可以防止那些不支持 JavaScript 的浏览器错误滴将你的代码显示为明文.你也许写过下面这样的代码: <script language="javascript"> <!-- document.bgColor = "brown"; // red // --> </script> <scri

  • 详解用函数式编程对JavaScript进行断舍离

    我和JavaScript 从1997年网景的Navigator 3浏览器开始就开始使用JavaScript.当时,JavaScript还只能做一些很简单的事情.我记得最酷的就是用JavaScript实现mouseover特性,在那个时候已经算得上是高科技了!当鼠标移过去之后,文本内容就神奇的改变了.因为当时都是pre-DHTML,你根本不需要隐藏或则显示DOM元素. 关于DHTML DHTML是Dynamic HTML的简称,就是动态的html(标准通用标记语言下的一个应用),是相对传统的静态的

  • 《JavaScript函数式编程》读后感

    本文章记录本人在学习 函数式 中理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习. 在近期看到了<JavaScript函数式编程>这本书预售的时候就定了下来.主要目的是个人目前还是不理解什么是函数式编程.在自己学习的过程中一直听到身边的人说面向过程编程和面向对象编程,而函数式就非常少.为了自己不要落后于其他同学的脚步,故想以写笔记的方式去分享和记录自己阅读中所汲取的知识. js 和函数式编程 书中用了一句简单的话来回答了什么是函数式编程: 函数式编程通过使用函数来将值转换为抽象单元

  • JavaScript中的普通函数和箭头函数的区别和用法详解

    最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答-- 箭头函数中的 this 和调用时的上下文无关,而是取决于定义时的上下文 这并不是很正确的答案--虽然也不是完全错误 箭头函数中的 this 首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关 function make () { return ()=>{ consol

  • JavaScript ES6箭头函数使用指南

    胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性.有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上下文. 箭头函数的产生,主要由两个目的:更简洁的语法和与父作用域共享关键字this.接下来,让我们来看几个详细的例子. 新的函数语法 传统的JavaScript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须

  • JavaScript函数式编程(Functional Programming)声明式与命令式实例分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)声明式与命令式.分享给大家供大家参考,具体如下: 函数式编程属于声明式编程(declarative programming)的范畴,经常跟声明式编程一块儿讨论的是命令式编程(imperative programming),因为它们是两种不太一样的风格. 命令式编程一般就是说清楚具体要怎么样得到一个结果:先这样做,再这样做,然后再这样,如果这样,就这样做 - 声明式编程就是声明(说明)一下你想得到的结果是什

  • JavaScript 函数式编程的原理

    1,JavaScript中函数.方法的调用 在JavaScript中,有两种调用函数的方式.一般的方式是把参数放在括号中,另一种方式是同时把函数和参数都放在括号中.如: 复制代码 代码如下: function test(x) { alert(x); } test("hello"); (test)("hello"); //等同于下面的代码 (function test(x) { alert(x); })("hello"); //也等同于下面的代码

  • JavaScript函数式编程(Functional Programming)纯函数用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)纯函数用法.分享给大家供大家参考,具体如下: 函数式编程鼓励我们多创建纯函数(pure functions),纯函数只依赖你交给它的东西,不使用任何函数以外的东西,也不会影响到函数以外的东西.跟纯函数对应的就是不纯函数(impure functions),也就是不纯函数可能会使用函数以外的东西,比如使用了一个全局变量.也可能会影响到函数以外的东西,比如改变了一个全局变量的值. 多使用纯属函数是因为它更可靠

  • 用函数式编程技术编写优美的 JavaScript_ibm

    因为函数式编程采用了完全不同的组织程序的方式,所以那些习惯于采用命令式范例的程序员可能会发现函数式编程有点难学.在这篇文章中,您将了解一些关于如何采用函数式风格,用 JavaScript 编写良好的.优美的代码的示例.我将讨论: 函数式编程概念,包括匿名函数.调用函数的不同方法,以及将函数作为参数传递给其他函数的方式. 函数式概念的运用,采用的示例包括:扩展数组排序:动态 HTML 生成的优美代码:系列函数的应用. 函数式编程概念 请告诉每个人.请把这个提交给: Digg Slashdot 在那

  • javascript ES6中箭头函数注意细节小结

    前言 ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 但箭头函数带来了些许问题,下面来一起看看吧. 关于{} 第一个问题是关于箭头函数与{}. 箭头函数,乍一看,用法似乎很简单,比如像下面这样用来给数组每一项乘以2: const numbers = [1, 2, 3]; const result

  • JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法.分享给大家供大家参考,具体如下: 箭头函数在 JavaScript 里面,是 ES6(ES2015)才加入进来的.因为函数里有个像箭头一样的符号:=>,所以叫箭头函数,英文经常也会称为 Fat arrow functions,胖乎乎的箭头函数.这种函数也称为 lambda 表达式.箭头函数不能当作构造函数使用. 语法 一个箭头函数看起来像这样: const

随机推荐