将另一个函数作为参数的函数,或者定义一个函数作为返回值的函数,被称为高阶函数。

JavaScript可以接受高阶函数。这种处理高阶函数的能力以及其他特点,使JavaScript成为非常适合函数式编程的编程语言之一。

JavaScript将函数视为一等公民

你也许听说过,JavaScript函数是一等公民。这意味着,在JavaScript中函数是对象。

它们的类型是Object,它们可以作为一个变量的值被分配,而且它们可以像其他引用变量一样被传递和返回。

一等函数赋予了JavaScript特殊的能力,使我们能够从高阶函数中获益。

由于函数是对象,且JavaScript是流行的编程语言之一,因此其支持函数式编程的原生方法。

事实上,一等函数是JavaScript的原生方法。我敢打赌你在使用他们的时候甚至都没有想过正在使用函数。

高阶函数接收函数作为参数

如果你做过很多JavaScript开发,你可能遇到过使用回调函数的情况。

回调函数是一个在操作结束时执行的函数,一旦所有其他操作完成后便会执行。

通常情况下,我们把这个函数作为最后的参数传递,在其他参数之后。它通常被定义为内联的匿名函数。回调函数依靠的是JavaScript处理高阶函数的能力。

JavaScript是一个单线程语言。这意味着同一时间只有一个操作会被执行。

为了避免操作或系统的主线程互相阻塞(这将导致死锁),引擎会确保所有操作按顺序执行。它们沿着这个单线程排队,直到安全产生另一个代码事务。

将一个函数作为参数传入,并在父函数的其他操作完成后运行该函数的能力,对于支持高阶函数的语言来说是至关重要的。

JavaScript中的回调函数允许异步行为,因此脚本可以在等待结果的同时继续执行其他函数或操作。

在处理可能在不确定的时间段后返回结果的资源时,传递回调函数的能力至关重要。

这种高阶函数模式在网络开发中非常有用。一个脚本可以向服务器发送一个请求,然后需要在响应到来时进行处理,而不需要了解服务器的网络延迟或处理时间。

Node.js经常使用回调函数来有效地利用服务器资源。这种异步方法对于等待用户输入后再执行函数的应用程序来说也很有用。

考虑一下这个简单的JavaScript片段,它为一个按钮添加了一个事件监听器。

document.getElementById("clicker").addEventListener("click", function() {
alert("you triggered " + this.id);
});

这段脚本使用内联匿名函数来显示一个alert

但它也可以很容易地使用一个单独定义的函数,并将这个命名函数传递给addEventListener方法。

var proveIt = function() {
alert("you triggered " + this.id);
}; document.getElementById("clicker").addEventListener("click", proveIt);

我们这样做不仅仅是展示了高阶函数。我们使代码更可读,更有弹性,并为不同的任务分离了功能(监听点击事件与提醒用户)。

代码可重用性

我们的proveIt()函数在结构上独立于它周围的代码,总是返回被触发的元素的id。这种函数设计的方法是函数式编程的核心。

这段代码可以存在于任何你用元素的id显示alert的上下文中,并且可以被任何事件监听器调用。

用一个单独定义和命名的函数取代内联函数的能力为我们提供了无限可能。

在函数式编程中,我们试图开发不改变外部数据的纯函数,并且每次对相同的输入返回相同的结果。

现在我们有了一个基本的工具,可以帮助我们开发一个小型的、有针对性的高阶函数库,你可以在任何应用程序中使用。

请注意,我们把 proveIt 而不是 proveIt() 传递给我们的 addEventListener 函数。

  • 当你不带括号传递一个函数的名字时,你传递的是函数对象本身。
  • 当你用圆括号传递函数时,你是在传递执行该函数的结果。

返回函数

除了将函数作为参数之外,JavaScript还允许函数将其他函数作为结果返回。

这是说得通的,因为函数是简单的对象。对象(包括函数)可以被定义为一个函数的返回值,就像字符串、数组或其他值。

但是函数作为结果返回是什么意思呢?

函数是分解问题和创建可重用代码片断的一种强大方式。当我们将一个函数定义为一个高阶函数的返回值时,它可以作为新函数的模板。

假如你读了太多关于"千禧一代"的文章,感到厌烦。你决定每当出现"千禧一代"这个词时,你都要用 "蛇人"这个短语来代替它。

你可能是简单地写一个函数,在你传递给它的任何文本上执行该文本替换。

var snakify = function(text) {
return text.replace(/millenials/ig, "Snake People");
};
console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.

这种写法是有效的,但不够通用。你可能想为其他情况写一个替换函数:

var hippify = function(text) {
return text.replace(/baby boomers/ig, "Aging Hippies");
};
console.log(hippify("The Baby Boomers just look the other way."));
// The Aging Hippies just look the other way.

但是,如果你决定要做一些更复杂的事情来保留原始字符串中的大小写呢?你将不得不修改你的两个新函数来做到这一点。

这很麻烦,而且会使你的代码更加脆弱,也更难阅读。在这样的情况下,我们可以使用高阶函数作为解决方案。

高阶函数模板

你真正想要的是能够在模板函数中用任何其他术语替换任何术语的灵活性,并将该行为定义为一个基础函数,你可以在此基础上建立新的自定义函数。

有了将函数指定为返回值的能力,JavaScript提供了让这种情况更便捷的方法:

var attitude = function(original, replacement, source) {
return function(source) {
return source.replace(original, replacement);
};
}; var snakify = attitude(/millenials/ig, "Snake People");
var hippify = attitude(/baby boomers/ig, "Aging Hippies"); console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.
console.log(hippify("The Baby Boomers just look the other way."));
// The Aging Hippies just look the other way.

我们所做的是把做实际工作的代码隔离到一个通用的、可扩展的attitude函数中。它封装了所有需要修改任何输入字符串的工作:使用原始短语作为初始值,并输出一个具有某种态度的替换短语。

当我们将这个新函数定义为对attitude高阶函数的引用,并预先填入它所接收的前两个参数时,我们会得到什么?它允许新函数接收你传递给它的任何文本,并在我们定义的返回函数中使用该参数作为attitude函数的输出。

JavaScript函数不关心传递给它们的参数的数量。

如果缺少第二个参数,函数将把它视为undefined。当我们选择不提供第三个参数,或任何数量的额外参数时,它也会这样做。

此外,你可以在以后再传入那个额外的参数。你可以在定义了你想调用的高阶函数后这样做,就像刚才演示的那样。

我们正在创建一个模板高阶函数来返回另一个函数。然后,我们把这个新返回的函数,除去一个属性,定义为模板函数的一个自定义实现。

你以这种方式创建的所有函数将继承高阶函数的工作代码。然而,你可以用不同的默认参数预先定义它们。

正在使用高阶函数

高阶函数对于JavaScript的工作方式来说是起码的,你已经在使用它们了。

每当你传递一个匿名函数或回调函数时,你实际上是把所传递的函数返回的值,作为另一个函数的参数(如箭头函数)使用。

开发人员在学习JavaScript的早期就熟悉高阶函数。它是JavaScript设计中固有的,所以以后才需要学习驱动箭头函数或回调的概念。

为返回其他函数的函数赋值的能力扩展了JavaScript的便利性。高阶函数允许我们创建自定义命名的函数,用一阶函数的共享模板代码执行专门的任务。

这些函数中的每一个都可以继承高阶函数中的任何改进。这可以协助我们避免代码重复,并保持我们的源代码的整洁和可读性。

如果你确保你的函数是纯净的(它们不改变外部值,并且对于任何给定的输入总是返回相同的值),你可以创建测试来验证当你更新一阶函数时,你的代码变化不会破坏任何东西。

总结

现在你知道了高阶函数的工作原理,你可以开始考虑如何在自己的项目中利用这个概念了。

JavaScript的一个好处是,你可以将函数技术与你已经熟悉的代码混合在一起。

即便你一开始只是为了使用高阶函数而使用,你也会很快熟悉它们所提供的额外灵活性。

现在使用高阶函数的一点工作可以在未来几年内改善你的代码。

以上就是本文的全部内容,感谢阅读~

如何在JavaScript中使用高阶函数的更多相关文章

  1. JavaScript中的高阶函数

    之前写的<JavaScript学习手册>,客户跟我说有些内容不适合初学者,让我删了,感觉挺可惜的,拿到这里和大家分享. JavaScript中的一切都是对象,这句话同样适用于函数.函数对象 ...

  2. javascript中的高阶函数, 和 类定义Function, 和apply的使用

    参考: http://www.cnblogs.com/delin/archive/2010/06/17/1759695.html js中的类, 也是用function关键字来定义的: function ...

  3. Javascript中的高阶函数介绍

    高阶函数:高阶看上去就像是一种先进的编程技术的一个深奥术语,一开始我看到的时候我也这样认为的. Javascript的高阶函数 然而,高阶函数只是将函数作为参数或返回值的函数.以下面的Hello,Wo ...

  4. Javascript 闭包与高阶函数 ( 二 )

    在上一篇 Javascript 闭包与高阶函数 ( 一 )中介绍了两个闭包的作用. 两位大佬留言指点,下来我会再研究闭包的实现原理和Javascript 函数式编程 . 今天接到头条 HR 的邮件,真 ...

  5. JavaScript进阶之高阶函数篇

    JavaScript进阶之高阶函数篇 简介:欢迎大家来到woo爷说前端:今天给你们带来的是JavaScript进阶的知识,接下来的系列都是围绕着JavaScript进阶进行阐述:首先我们第一篇讲的是高 ...

  6. JS中的高阶函数

    JS中的高阶函数 高阶函数是指以函数作为参数的函数,并且可以将函数作为结果返回的函数. 1. 高阶函数 接受一个或多个函数作为输入 输出一个函数 至少满足以上一个条件的函数 在js的内置对象中同样存在 ...

  7. Python 函数式编程 & Python中的高阶函数map reduce filter 和sorted

    1. 函数式编程 1)概念 函数式编程是一种编程模型,他将计算机运算看做是数学中函数的计算,并且避免了状态以及变量的概念.wiki 我们知道,对象是面向对象的第一型,那么函数式编程也是一样,函数是函数 ...

  8. Python中的高阶函数与匿名函数

    Python中的高阶函数与匿名函数 高阶函数 高阶函数就是把函数当做参数传递的一种函数.其与C#中的委托有点相似,个人认为. def add(x,y,f): return f( x)+ f( y) p ...

  9. Java中的函数式编程(五)Java集合框架中的高阶函数

    写在前面 随着Java 8引入了函数式接口和lambda表达式,Java 8中的集合框架(Java Collections Framework, JCF)也增加相应的接口以适应函数式编程.   本文的 ...

随机推荐

  1. 现代化CSS

    Less Sass less Sass 与Less相比SASS更适合大型,底层的开发 Compass CSS核心技巧 CSS应用 现代化CSS方法论 CSS分层与面向对象 为什么要对CSS分层 CSS ...

  2. Linux操作系统(3):crond 任务调度

    crontab 进行 定时任务的设置.概述: 任务调度:是指系统在某个时间执行的特定的命令或程序. 任务调度分类: 1.系统工作:有些重要的工作必须周而复始地执行.如病毒扫描等 2.个别用户工作:个别 ...

  3. 【cartographer_ros】五: 发布和订阅陀螺仪Imu信息

    上一节介绍了里程计Odometry传感数据的订阅和发布. 本节会介绍陀螺仪Imu数据的发布和订阅.陀螺仪在cartographer中主要用于前端位置预估和后端优化. 目录 1:sensor_msgs/ ...

  4. 初次使用 eolink 感受

    最近总有前端小伙伴来找我抱怨,"后端接口出来太晚,影响我的任务进度"."后端接口改了也不通知我一下,到冒烟测试的时候报一堆的错".我拉后端小伙伴了解情况,结果问 ...

  5. 用cmd命令进行磁盘清理(主要是系统盘)

    作用:清理磁盘(主要是系统盘)中不需要的垃圾文件操作方法: 第一步:Windows键+R键 调出cmd命令窗口(窗口图如下:) 第二步:输入框中输入cmd命令,按下Enter键,进入如下图界面: 第三 ...

  6. day03_3_流程控制练习题

    # 流程控制练习题 # 一.编程题 1.实现一个课程名称和课程代号的转换器:输入下表中的课程代号,输出课程的名称.用户可以循环进行输入,如果输入0就退出系统.(**使用****switch +whil ...

  7. Hadoop-HA 搭建高可用集群Hadoop Zookeeper

    Hadoop Zookeeper 搭建(一) 一.准备工作 VMWARE虚拟机 CentOS 7 系统 虚拟机1:master 虚拟机2:node1 虚拟机3:node2 时间同步 ntpdate n ...

  8. NOI / 2.1基本算法之枚举-8759:火车上的人数

    8759:火车上的人数​​​​​​ 总时间限制: 1000ms 内存限制: 65536kB 描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下 ...

  9. 基于图的深度优先搜索策略(耿7.10)--------西工大noj

    ​ 代码 代码 #include <stdio.h> #include <stdlib.h> #include <string.h> typedef struct ...

  10. 4G巴歇尔槽流量采集网关

    首先向大家展示下拓扑图: 金鸽科技R10物联网网关,带有一个RS485口可以采集巴歇尔槽的液位状态,还提供一个网口用于给摄像头和现场其他的网络设备提供网络传输通道!R10A内置了巴歇尔槽液位换算成流量 ...