理解 JavaScript 中的高阶函数

原文做者：Sukhjinder Arora

译者：UC 国际研发 Jothy

写在最前：欢迎你来到“UC国际技术”公众号，咱们将为你们提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。

本文将让你们了解什么是高阶函数以及如何在 JavaScript 中使用它们。

若是你正在学习 JavaScript，那么你应该见太高阶函数这个术语。 它虽然听起来很复杂，但其实并不难。

使 JavaScript 适合函数式编程的缘由是它接受高阶函数。

高阶函数在 JavaScript 中普遍使用。 若是你已经用 JavaScript 编程了一段时间，你可能已经在不知不觉中用过它们了。

要彻底理解这个概念，首先必须了解函数式编程以及一等函数（First-Class Functions）的概念。

 什么是函数式编程

在大多数简单的术语中，函数式是一种编程形式，你能够将函数做为参数传递给其余函数，并将它们做为值返回。 在函数式编程中，咱们以函数的形式思考和编程。

JavaScript，Haskell，Clojure，Scala 和 Erlang 是部分实现了函数式编程的语言。

一等函数

若是你在学习 JavaScript，你可能据说过 JavaScript 将函数视为一等公民。 那是由于在 JavaScript 及其余函数式编程语言中，函数是对象。

在 JavaScript 中，函数是一种特殊类型的对象。 它们是 Function objects。例如：

为了证实 JavaScript 中函数是对象，咱们能够这样作：

注意 - 虽然这在 JavaScript 中彻底有效，但这被认为是 harmful 的作法。 你不该该向函数对象添加随机属性，若是不得不这样作，请使用对象。

在 JavaScript 中，你对其余类型（如对象，字符串或数字）执行的全部操做均可以对函数执行。 你能够将它们做为参数传递给其余函数（回调函数），将它们分配给变量并传递它们等等。这就是 JavaScript 中的函数被称为一等函数的缘由。

将函数赋值给变量

咱们能够在 JavaScript 中将函数赋值给变量。 例如：

咱们也能够传递它们。 例如：

将函数做为参数传递

咱们能够将函数做为参数传递给其余函数。 例如：

既然咱们已经知道一等函数是什么了，那就让咱们开始学习 JavaScript 中的高阶函数叭~

高阶函数

高阶函数是对其余函数进行操做的函数，操做能够是将它们做为参数，或者是返回它们。 简单来讲，高阶函数是一个接收函数做为参数或将函数做为输出返回的函数。

例如，Array.prototype.map，Array.prototype.filter 和 Array.prototype.reduce 是语言中内置的一些高阶函数。

动手实践高阶函数

让咱们看看一些内置高阶函数的例子，看看它与不使用高阶函数的方案对好比何。

Array.prototype.map

map() 方法经过调用对输入数组中每一个元素调用回调函数来建立一个新数组。

map() 方法将获取回调函数中的每一个返回值，并使用这些值建立一个新数组。

传递给 map() 方法的回调函数接受 3 个参数：element，index 和 array。

咱们来看一些例子：

例 1：

假设咱们有一个数字数组，咱们想要建立一个新数组，其中包含第一个数组中每一个值的两倍。 让咱们看看如何使用和不使用高阶函数来解决问题。

不使用高阶函数

使用高阶函数 map

使用箭头函数语法将更简短：

例 2：

假设咱们有一个包含不一样人的出生年份的数组，咱们想要建立一个包含其年龄的数组。 例如：

不使用高阶函数

使用高阶函数

Array.prototype.filter

filter() 方法会建立一个新数组，其中包含全部经过回调函数测试的元素。 传递给 filter() 方法的回调函数接受3个参数：element，index 和 array。

让咱们看看一些例子：

例 1：

假设咱们有一个包含名称和年龄属性的对象数组。 咱们想要建立一个只包含成年人（年龄大于或等于18）的数组。

不使用高阶函数

使用高阶函数

Array.prototype.reduce

reduce 方法对调用数组的每一个元素执行回调函数，最后生成一个单一的值并返回。 reduce 方法接受两个参数：1）reducer 函数（回调），2）一个可选的 initialValue。

reducer 函数（回调）接受四个参数：accumulator，currentValue，currentIndex，sourceArray。

若是提供了 initialValue，则累加器将等于 initialValue，currentValue 将等于数组中的第一个元素。

若是没有提供 initialValue，则累加器将等于数组中的第一个元素，currentValue 将等于数组中的第二个元素。

例 1：

假设咱们要对一个数字数组的求和：

使用高阶函数 reduce

每次对数组中的某个值调用 reducer 函数，累加器都会保留上一次 reducer 函数操做返回的结果，并将 currentValue 设置为数组的当前值。 最后把结果存储在 sum 变量中。

咱们还能够为它提供初始值：

不使用高阶函数

能够看到使用高阶函数使咱们的代码更清晰简洁。复制代码

建立咱们本身的高阶函数

到目前为止，咱们看到了语言中内置的各类高阶函数。 如今让咱们建立本身的高阶函数。

咱们假设 JavaScript 没有原生的 map 方法。 咱们能够本身构建它，从而建立咱们本身的高阶函数。 假设咱们有一个字符串数组，咱们但愿把它转换为整数数组，其中每一个元素表明原始数组中字符串的长度。

在上面的例子中，咱们建立了一个高阶函数 mapForEach ，它接受一个数组和一个回调函数 fn。 它循环遍历传入的数组，并在每次迭代时在 newArray.push 方法调用回调函数 fn 。

回调函数 fn 接收数组的当前元素并返回该元素的长度，该元素存储在 newArray 中。 for 循环完成后，newArray 被返回并赋值给 lenArray。

结论

咱们已经了解了高阶函数和一些内置的高阶函数，还学习了如何建立本身的高阶函数。

简而言之，高阶函数是一个能够接收函数做为参数，甚至返回一个函数的函数。 它就像常规函数同样，只是多了接收和返回其余函数的附加能力，即参数和输出。

以上。若是你发现这篇文章有用，请为我点赞~👏

英文原文： https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad

好文推荐：HTTP/3 来啦，你还在等什么？赶忙了解一下 （https://mp.weixin.qq.com/s/ZH5GjB_LjMmfgO6_tYHJdA ）

————————————————————————————————

“UC国际技术”致力于与你共享高质量的技术文章

欢迎微信搜索 UC国际技术 关注咱们的公众号

或者将文章分享给你的好友