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

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. ASPNET Core笔试题

    1.如何在ASP.NET Core中激活Session功能? 首先要添加session包. 其次要在configservice方法里面添加session.然后又在configure方法里面调用 use ...

  2. 自定义 systemd service

    Red Hat Linux 自 7 版本后 采用systemd 形式取代原先 init ,用户可以参考 系统service 创建自己的service ,以便于日常统一管理,系统service 存储路径 ...

  3. Pytorch从0开始实现YOLO V3指南 part1——理解YOLO的工作

    本教程翻译自https://blog.paperspace.com/how-to-implement-a-yolo-object-detector-in-pytorch/ 视频展示:https://w ...

  4. JDBCTools 第一个版本

    JDBCToolV1: package com.dgd.test; import com.alibaba.druid.pool.DruidDataSourceFactory; import javax ...

  5. Python中print()函数的用法详情

    描述 print() 方法用于打印输出,最python中常见的一个函数. 在交互环境中输入help(print)指令,可以显示print()函数的使用方法. >>> help(pri ...

  6. 云ATM架构设计

    云ATM架构设计 启动程序(Start.java) public class Start { public static void main(String[] args) { MainView vie ...

  7. 【干货】MySQL底层架构设计,你了解多少?

    很多开发同学对SQL优化如数家珍,却对MySQL架构一知半解.岂不是只见树叶,不见森林,终将陷入细节中不能自拔. 今天就一块学习MySQL分层架构,深入了解MySQL底层实现原理,以及每层的作用,我们 ...

  8. 我有 7种 实现web实时消息推送的方案,7种!

    技术交流,公众号:程序员小富 大家好,我是小富- 我有一个朋友- 做了一个小破站,现在要实现一个站内信web消息推送的功能,对,就是下图这个小红点,一个很常用的功能. 不过他还没想好用什么方式做,这里 ...

  9. jdbc 12: 悲观锁

    jdbc连接mysql,简单演示行级锁 通过debug模式进行演示 在Test1程序设置断点,让程序1,查询并锁定数据,且程序不执行完(此时停在debug断点处) 这时启动Test2程序,去修改已经被 ...

  10. 使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js ...