5个JavaScript中高阶函数的示例

英文 | https://medium.com/better-programming/5-examples-of-higher-order-functions-in-javascript-21aabb4c00ac

翻译 | web前端开发（ID：web_qdkf）

高阶函数可以说是JavaScript语言有史以来最好的事情之一。你有充分的理由广泛使用它们。

高阶函数就是指，函数可以作为参数被传递或者函数可以作为返回值输出的函数。

当我刚接触JavaScript时，我花了一段时间来了解它们的含义，因此，如果你处于这个位置，那么我希望你可以在阅读完这篇文章之后，你将对它们有更清晰的了解。

话虽如此，在这篇文章中，我列举了5个更好地理解的JavaScript的高阶函数的示例。希望对你理解高阶函数有帮助。

1、 .map，.forEach，etc.

如果你仅是第一次使用JavaScript的话，就很可能已经通过本机JavaScript数组方法（例如.map）使用了高阶函数。

下面的代码段循环遍历数组，并在每个项目上调用一个函数，直到到达最后一个项目为止。 采取它可以调用的功能的能力是使其成为高阶函数的原因：

function prefixWordWithUnderscore(word) {
return `_${word}`
}


const words = ['coffee', 'apple', 'orange', 'phone', 'starbucks']
const prefixedWords = words.map(prefixWordWithUnderscore)


// result: ["_coffee", "_apple", "_orange", "_phone", "_starbucks"]

2、使用高阶函数支持操作的多种变体

有时我们最终决定创建一个高阶函数，因此我们可以使用它来创建所需操作的更多变体。

在下面的示例中，基本的exploitPrefixer函数是一个高阶函数，该函数返回一个函数，该函数将文本作为参数并将前缀应用于要返回的值。

function utilizePrefixer(prefix) {
return function(word) {
return `${prefix}${word}`
  }
}


const withMoneySign = utilizePrefixer('$')
const withCompanyName = utilizePrefixer('Fandango')
const tenDollars = withMoneySign('9.99')
const formHeader = withCompanyName(
' is the company you will be applying for today',
)
console.log(tenDollars)
console.log(formHeader)

3、反转控制

每当你需要重构指向一个功能的一堆代码时，你都可以创建一个增强函数，该函数可以反转代码通过的方向。

我将复制并粘贴旧文章中的一个示例，因为这是一个很好的例子，可以说明这一点：

在我之前的工作中，我们使用react-toastify来显示通知。我们到处使用它。此外，它们还为紧急情况下的最新UX决策提供了很好的解决方法：“我们应如何处理此错误？只是显示了通知！”，然后就做完了。

但是，我们开始注意到当应用程序变大并且复杂性不断提高时，我们的通知变得频繁了。但是，我们没有防止重复的方法。这意味着一些通知在屏幕上多次显示，使它们与上方的通知内容完全相同。

因此，我们最终利用了该库提供的API，以帮助使用toast.dismiss（）通过ID删除活动Toast通知。

为了解释前面的部分，在继续操作之前，先显示我们要从中导入文件可能是个好主意：

import React from 'react'
import { GoCheck, GoAlert } from 'react-icons/go'
import { FaInfoCircle } from 'react-ic