摘要：源起函數(shù)式編程近幾年非常流行經(jīng)常可以在網(wǎng)上看到別人討論相關(guān)話題我機(jī)緣巧合之下在上看到有人提到一個(gè)講函數(shù)式編程的視頻看過(guò)之后突然茅塞頓開(kāi)瞬間把之前零碎的關(guān)于函數(shù)式編程的知識(shí)一下子都聯(lián)系了起來(lái)于是自己希望趁有空把這些知識(shí)總結(jié)一下這樣既可以回顧下

函數(shù)式編程近幾年非常流行,經(jīng)?？梢栽诰W(wǎng)上看到別人討論相關(guān)話題. 我機(jī)緣巧合之下在github上看到有人提到一個(gè)講js函數(shù)式編程的視頻,看過(guò)之后突然茅塞頓開(kāi),瞬間把之前零碎的關(guān)于函數(shù)式編程的知識(shí)一下子都聯(lián)系了起來(lái), 于是自己希望趁有空把這些知識(shí)總結(jié)一下, 這樣既可以回顧下知識(shí)耶沒(méi)準(zhǔn)能幫到一些對(duì)函數(shù)式編程感興趣的朋友們.

其實(shí)千萬(wàn)別被這看似高深的名字嚇怕了, 其實(shí)我們碼農(nóng)用這種編程思想無(wú)非是為了能更爽的寫(xiě)好代碼. 總結(jié)一下函數(shù)式編程的優(yōu)點(diǎn)有以下兩個(gè)優(yōu)點(diǎn):

Less bug: 可讀性高, 邏輯上更容易理解.

less Time: 更高的抽象層級(jí), 代碼高度可復(fù)用.

這里又一個(gè)炫酷屌的名字: "高階函數(shù)". 別怕, 本文并不涉及高等數(shù)學(xué)的知識(shí)就可以讓你了解高階函數(shù)的概念. 但是等等! 高階函數(shù)跟函數(shù)式編程又有毛關(guān)系? 其實(shí)簡(jiǎn)單的說(shuō)就是高階函數(shù)的特性讓我們可以實(shí)現(xiàn)函數(shù)式編程.
廢話不多說(shuō), 下面就簡(jiǎn)單說(shuō)下什么是高階函數(shù):

Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.

從定義可以知道高階函數(shù)就是可以把函數(shù)作為變量傳入別的函數(shù), 或者一個(gè)函數(shù)的返回值是一個(gè)函數(shù)的函數(shù). 如果上面的話把你繞暈了那么我來(lái)簡(jiǎn)單的概括下就是函數(shù)可以被當(dāng)作變量在程序中傳來(lái)傳去. 下面舉幾個(gè)例子:

//把函數(shù)當(dāng)成變量
var foo = (x) => console.log(x)
//把函數(shù)當(dāng)作參數(shù)傳入另一個(gè)函數(shù)
var bar = (y, fn) => fn(y)
foo("FP is good") // FP is good
bar("FP is great", foo) //FP is great

下面這個(gè)例子更能體現(xiàn)高階函數(shù)的便利性, 如果我們要遍歷數(shù)組并且打印數(shù)組元素的信息, 你會(huì)怎么做?

var arr = [1,1,2,3,5,8]
function traverseArray(arr) {
  for (let i = 0; i < arr.length; i++) {
    console.log(`index: ${i}, value: ${arr[i]}`)
  }
}
traverseArray(arr)

Easy enough! 如果用函數(shù)式編程的思維重寫(xiě)上面的代碼應(yīng)該是這個(gè)樣子的:

function forEach(arr, fn) {
  for (let i = 0; i < arr.length; i++) {
    fn(i, arr[i], arr)
  }
}

forEach(arr, (index, value) => console.log(`index: ${index}, value: ${value}`))

WTF!? 說(shuō)好的函數(shù)式編程更簡(jiǎn)潔代碼量更少呢! 明顯第二種寫(xiě)法寫(xiě)的代碼更多啊. 別急, 其實(shí)es5的時(shí)候JS已經(jīng)把一系列高階函數(shù)設(shè)置好了,比如forRach, map, reduce, filter, every.. 讓我們用js的array.forEach重寫(xiě)上面的代碼:

arr.forEach((v, k) => console.log(`index: ${k}, value: ${v}`))

怎么樣, 一樣代碼解決戰(zhàn)斗。 也許看到這里你還是覺(jué)得沒(méi)什么意思,畢竟雖然代碼量少了些,但也沒(méi)感覺(jué)有什么本質(zhì)性的變化. 下面我會(huì)舉幾個(gè)比較常見(jiàn)的例子,通過(guò)例子讓我們一起體會(huì)這種有趣的編程思想,也許看過(guò)之后你的想法會(huì)有所改變.

先介紹下幾個(gè)常用的函數(shù), filter, map, reduce:

var animals = [
  {name: "a" , species: "dog", weight: 11},
  {name: "b", species: "cat", weight: 10},
  {name: "c", species: "fish", weight: 1},
  {name: "d", species: "cat", weight: 8},
  {name: "e", species: "rabbit", weight: 3}
]
// 找到所有種類(lèi)為貓的動(dòng)物
animals.filter((animal) => animal.species === "cat")
// [ { name: "b", species: "cat" }, { name: "d", species: "cat" } ]

// 返回所有動(dòng)物的名字
animals.map((animal) => animal.name)
// [ "a", "b", "c", "d", "e" ]

// 動(dòng)物總重
animals.reduce((pre, animal) => pre + animal.weight, 0)
//33

怎么樣? 如果用循環(huán)來(lái)寫(xiě)肯定不可能一行代碼就搞定吧. 讓我們看一些更深入更有意思的例子吧.
比如這道比較經(jīng)典的算法題: 給定一個(gè)字符串"abcdaabc"統(tǒng)計(jì)每個(gè)字符的出現(xiàn)次數(shù).

// 一般做法是這樣的
var str="abcdaabc"
var count = {};
var i;

for(i=0;i (pre[cur]++ || (pre[cur] = 1), pre), {})

由上面的例子可見(jiàn), 高階函數(shù)的特性讓我們?cè)谔幚磉@類(lèi)問(wèn)題時(shí)比普通的方法要方便的多. 在更實(shí)際的應(yīng)用場(chǎng)景中函數(shù)式編程的便利性更能充分的體現(xiàn), 其中一個(gè)經(jīng)典的例子是統(tǒng)計(jì)文本中出現(xiàn)頻率最高的十個(gè)單詞:

var fs = require("fs");
var content = fs.readFileSync("words.txt").toString();
var words = content.split(/[s.,/:
]+/);
// 把單詞全部變?yōu)樾?xiě)并利用上一個(gè)例子的方法統(tǒng)計(jì)單詞出現(xiàn)的次數(shù)
var tally = words.map((word) => word.toLowerCase())
                 .reduce((pre, cur) => (pre[cur]++ || (pre[cur]=1), pre), {})
//把object的key變成數(shù)組并進(jìn)行排序
var top10 = Object.keys(tally)
                  .map((key) => {
                    return {word: key, count: tally[key]}
                  })
                  .sort((a, b) => b.count - a.count)
                  .slice(0, 10)
console.log(top10)

上面這個(gè)例子充分體現(xiàn)了函數(shù)式編程思想的魅力,代碼精簡(jiǎn)并且可讀性高! 想一想如果你要用循環(huán)來(lái)寫(xiě)有多多少行代碼!
好了, 總結(jié)完畢, 最后附上參考資料.

Functional programming in JavaScript
Functional Programming By Example
Eloquent javascript - chapter6