理解 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國際技術 關注咱們的公衆號

或者將文章分享給你的好友