摘要：前言在學(xué)習(xí)前端的時候，我總是能聽到很多高級詞匯，比如今天會聊到的函數(shù)式編程高階函數(shù)。接下來我們看看，高階函數(shù)有可能會遇到的問題，又如何去解決。

在學(xué)習(xí)前端的時候，我總是能聽到很多高級詞匯，比如今天會聊到的 函數(shù)式編程(Functional Programming) & 高階函數(shù) (Higher-order function) 。
但是當(dāng)你真正的理解什么是 函數(shù)式編程 & 高階函數(shù) 的時候，也許會發(fā)現(xiàn)，你幾乎每天都會用到它，只是你不知道那就是高階函數(shù) / 函數(shù)式編程。

在 javascript 中，函數(shù)是一種值，舉個例子：

const double = function (x) {
  return x * 2
}

我們把一個函數(shù)作為值，賦給了變量 double ,這在我們的代碼中很常見對嗎？

你是不是經(jīng)常會聽到或者看到這樣一句話：“在 JavaScript 中函數(shù)是一等公民”

粗看很不好理解，但是它的意思很簡單：函數(shù)和 字符串/number 沒有什么不一樣，它可以聲明為變量，也可以作為參數(shù)傳入到其他函數(shù)中。

什么是高階函數(shù)？其實上一段我們已經(jīng)說過了，我們可以把函數(shù)A作為參數(shù)傳入到另一個函數(shù)B中，那么接收函數(shù)作為參數(shù)的函數(shù)B，就是 高階函數(shù) ,這只是方便大家理解，高階函數(shù)的定義是：

"一個函數(shù)的參數(shù)是另一個函數(shù)，或者一個函數(shù)的返回值是另一個函數(shù)"

說到 filter() 你肯定不陌生，他接收一個回調(diào)函數(shù)作為它的參數(shù)，所以它是一個典型的高階函數(shù)，舉個例子：

我們有這么一個數(shù)組，要篩選出對應(yīng) category 為 html&css 的書籍。

const books = [
  {name:"gitbook",category:"git"},
  {name:"reactbook",category:"react"},
  {name:"vuebook",category:"vue"},
  {name:"cssbook",category:"html&css"},
  {name:"htmlbook",category:"html&css"},
  ]

傳統(tǒng)的寫法是這樣:

let html_css_books = []
for (let i = 0; i < books.length; i++) {
  if(books[i].category === "html&css"){
    html_css_books.push(books[i])
  }
}
console.log(html_css_books)

我相信幾乎沒有人會選擇上面的方式，大部分人都會用 filter

const html_css_books = books.filter(function(item){return item.category === "html&css"})

當(dāng)然我們還可以用箭頭函數(shù)來縮減一些代碼：

const html_css_books = books.filter(item => item.category === "html&css")

我知道這是一個大家都明白的例子，從這里你能看到幾個高階函數(shù)的好處？

更短的代碼

更少的錯誤

更多的復(fù)用

第三點你可能不同意，因為你可能會說，我們沒有復(fù)用任何代碼啊？但如果我們把傳入的filter的回調(diào)函數(shù)抽離出來呢？因為真正決定要過濾哪些數(shù)據(jù)的是這個部分。

const is_html_css_books = item => item.category === "html&css"
const is_git_books = item => item.category === "git"
const is_not_git_books = item => item.category !== "git"

const html_css_books = books.filter(is_html_css_books)
const git_books = books.filter(is_git_books)
const not_git_books = books.filter(is_not_git_books)

清晰又簡潔不是嗎？

這些都是我們常見的高階函數(shù)，但是它們的用法各不相同

reduce 有很多玩法，甚至它可以取代我們剛剛說的三種高階函數(shù)，下一篇我們會聊聊 reduce 的內(nèi)容。接下來我們看看，高階函數(shù)有可能會遇到的問題，又如何去解決。

我們一起來看這樣一個場景

比如我們需要計算 a, b 兩個值的和的兩倍再加3，我們可能會定義兩個函數(shù)

function double(a, b) {
    return (a + b) * 2
  }

function add3(a) {
  return a + 3
}

那么我們會這樣調(diào)用：

add3(double(1,3))

但是如果我們需要多加幾次3呢？

add3(add3(add3(add3(add3(double(1,3))))))

是的，雖然計算沒有錯誤，但是我們的可讀性大大降低了，那面對這樣的情況如何處理呢？

解決嵌套的第一種方法，就是拆解嵌套，鏈?zhǔn)秸{(diào)用，就像一條鏈子一樣，一環(huán)套一環(huán)，將上次的結(jié)果，作為下次的參數(shù)。

const chainObj = {
  double(a,b) {
    this.temp = (a + b) * 2;
    return this;
  },
  add3() {
    this.temp += 3;
    return this;
  },
  getValue() {
    const value = this.temp;
    // 記得這里要初始化temp值
    this.temp = undefined;
    return value;
  }
};

所以我們上面的嵌套現(xiàn)在可以這樣寫:

chainObj.double().add3().add3().add3().add3().getValue()

上節(jié)的這段代碼

chainObj.double().add3().add3().add3().add3().getValue()

對比 Promise 的代碼

promise.then(fn).then(fn)...

是不是很像呢？是的沒錯，我們平時寫的 promise 其實都是在處理我們的 高階函數(shù) 的執(zhí)行順序。

那么 Promise 又是如何實現(xiàn)這樣的鏈?zhǔn)秸{(diào)用的呢？下一次和大家分享~

這里是 Dendoink

奇舞周刊原創(chuàng)作者

掘金 [聯(lián)合編輯 / 小冊作者]

segmentfault [漫談前端 / 系列作者]

公眾號 [前端惡霸 / 主筆]

對于技術(shù)人而言：技 是單兵作戰(zhàn)能力，術(shù) 則是運用能力的方法。得心應(yīng)手，出神入化就是 藝 。在前端娛樂圈，我想成為一名出色的人民藝術(shù)家。

掃碼關(guān)注公眾號 前端惡霸 我在這里等你: