位置：首页-资讯-前端开发

在JavaScript中使用高阶函数的方法

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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。当我们选择不提供第三个参数，或任何数量的额外参数时，它也会这样做。

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

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

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