輕松玩轉(zhuǎn)函數(shù)式編程
最近和一些同學(xué)討論了函數(shù)式編程，很多同學(xué)總覺(jué)得聽(tīng)起來(lái)很高大上，但用起來(lái)卻無(wú)從下手。于是我抽時(shí)間捋了捋，將平時(shí)工作中用到的函數(shù)式編程案例和思想整理了出來(lái)，相信閱讀本文后，大家都能快速上手函數(shù)式編程。
函數(shù)式編程目前使用范圍非常廣，常用的框架，語(yǔ)言幾乎都能看到它的身影。
前端框架：react、vue 的 hooks 用法。 打包工具：webpack 的 webpack-chain 用法。 工具庫(kù)：underscore、lodash、ramda。 部署方式：serverless。 后端：java、c# 中的 lamda 表達(dá)式。
本文將通過(guò)以下 3 個(gè)部分來(lái)深入函數(shù)式編程。
編程范式 函數(shù)式編程 函數(shù)式編程常見(jiàn)案例
編程范式
編程范式 指的是一種編程風(fēng)格，它描述了程序員對(duì)程序執(zhí)行的看法。在編程的世界中，同一個(gè)問(wèn)題，可以站在多個(gè)角度去分析解決，這些不同的解決方案就對(duì)應(yīng)了不同的編程風(fēng)格。
常見(jiàn)的編程范式有：
命令式編程 面向過(guò)程編程 C 面向?qū)ο缶幊?/section> C++、C#、Java 聲明式編程 函數(shù)式編程 Haskell
命令式編程
命令式編程 是使用最廣的一種編程風(fēng)格，它是站在計(jì)算機(jī)的角度去思考問(wèn)題，主要思想是 關(guān)注計(jì)算機(jī)執(zhí)行的步驟，即一步一步告訴計(jì)算機(jī)先做什么再做什么。
由于存在很多需要控制的步驟，所以命令式編程普遍存在以下特點(diǎn)：
控制語(yǔ)句 循環(huán)語(yǔ)句：while、for 條件分支語(yǔ)句：if else、switch 無(wú)條件分支語(yǔ)句：return、break、continue 變量 賦值語(yǔ)句
根據(jù)這些特點(diǎn)，我們來(lái)分析一個(gè)命令式編程案例：
//?需求：篩選出數(shù)組中為奇數(shù)的子集合
const?array?=?[1,?2,?3,?4,?5,?6,?7,?8,?9];
//?步驟1：定義執(zhí)行結(jié)果變量
let?reult?=?[];
//?步驟2：控制程序循環(huán)調(diào)用
for?(let?i?=?0;?i???//?步驟3：判斷篩選條件
??if?(array[i]?%?2?!==?0)?{
????//?步驟4：加入執(zhí)行結(jié)果
????reult.push(array[i]);
??}
}
//?步驟5：得到最終的結(jié)果 result
以上代碼通過(guò) 5 個(gè)步驟，實(shí)現(xiàn)了數(shù)組的篩選，這并沒(méi)有什么問(wèn)題，但細(xì)心的同學(xué)可能會(huì)感到疑惑：這樣寫(xiě)的代碼量太長(zhǎng)了，而且并不語(yǔ)義化，只有閱讀完每一行的代碼，才知道具體執(zhí)行的是什么邏輯。
沒(méi)錯(cuò)，這就是命令式編程的典型特點(diǎn)，除此之外，還有以下幾點(diǎn)：
命令式編程的每一個(gè)步驟都可以由程序員定義，這樣可以更精細(xì)化、更嚴(yán)謹(jǐn)?shù)乜刂拼a，從而提高程序的性能。 命令式編程的每一個(gè)步驟都可以記錄中間結(jié)果，方便調(diào)試代碼。 命令式編程需要大量的流程控制語(yǔ)句，在處理多線程狀態(tài)同步問(wèn)題時(shí)，容易造成邏輯混亂，通常需要加鎖來(lái)解決。
聲明式編程
聲明式編程 同樣是一種編程風(fēng)格，它通過(guò)定義具體的規(guī)則，以便系統(tǒng)底層可以自動(dòng)實(shí)現(xiàn)具體功能。主要思想是 告訴計(jì)算機(jī)應(yīng)該做什么，但不指定具體要怎么做。
由于需要定義規(guī)則來(lái)表達(dá)含義，所以聲明式編程普遍存在以下特點(diǎn)：
代碼更加語(yǔ)義化，便于理解。 代碼量更少。 不需要流程控制代碼，如：for、while、if 等。
接下來(lái)，我們將上文中的數(shù)組篩選，用聲明式的方式重構(gòu)一下：
//?篩選出數(shù)組中為奇數(shù)的子集合
const?array?=?[1,?2,?3,?4,?5,?6,?7,?8,?9];
const?reult?=?array.filter((item)?=>?item?%?2?!==?0);
可以看到，聲明式編程沒(méi)有冗余的操作步驟，代碼量非常少，并且非常語(yǔ)義化，當(dāng)我們讀到 filter 的時(shí)候，自然而然就知道是在做篩選。
我們?cè)倏匆粋€(gè)案例：
#?使用?sql?語(yǔ)句，查詢?id?為?25?的學(xué)生
select?*?from?students?where?id=25
在上述代碼中，我們只是告訴計(jì)算機(jī)，我想查找 id 為 25 的同學(xué)，計(jì)算機(jī)就能給我們返回對(duì)應(yīng)的數(shù)據(jù)了，至于是怎么查找出來(lái)的，我們并不需要關(guān)心，只要結(jié)果是正確的即可。
除了上述例子之外，還有很多聲明式編程的案例：
html 用來(lái)聲明了網(wǎng)頁(yè)的內(nèi)容。 css 用來(lái)聲明網(wǎng)頁(yè)中元素的外觀。 正則表達(dá)式，聲明匹配的規(guī)則。
有了以上幾個(gè)案例，我們來(lái)總結(jié)一下聲明式編程的優(yōu)缺點(diǎn)：
聲明式編程不需要編寫(xiě)復(fù)雜的操作步驟，可以大大減少開(kāi)發(fā)者的工作量。 聲明式編程的具體操作都是底層統(tǒng)一管理，可以降低重復(fù)工作。 聲明式編程底層實(shí)現(xiàn)的邏輯并不可控，不適合做更精細(xì)化的優(yōu)化。
函數(shù)式編程
函數(shù)式編程 屬于聲明式編程中的一種，它的主要思想是 將計(jì)算機(jī)運(yùn)算看作為函數(shù)的計(jì)算，也就是把程序問(wèn)題抽象成數(shù)學(xué)問(wèn)題去解決。
函數(shù)式編程中，我們可以充分利用數(shù)學(xué)公式來(lái)解決問(wèn)題。也就是說(shuō)，任何問(wèn)題都可以通過(guò)函數(shù)（加減乘除）和數(shù)學(xué)定律（交換律、結(jié)合律等），一步一步計(jì)算，最終得到答案。
函數(shù)式編程中，所有的變量都是唯一的值，就像是數(shù)學(xué)中的代數(shù) x、y，它們要么還未解出來(lái)，要么已經(jīng)被解出為固定值，所以對(duì)于：x=x+1 這樣的自增是不合法的，因?yàn)樾薷牧舜鷶?shù)值，不符合數(shù)學(xué)邏輯。
除此之外，嚴(yán)格意義上的函數(shù)式編程也不包括循環(huán)、條件判斷等控制語(yǔ)句，如果需要條件判斷，可以使用三元運(yùn)算符代替。
文章開(kāi)頭我們提到了 webpack-chain，我們一起來(lái)看一下：
//?使用 webpack-chain 來(lái)編寫(xiě) webpack 配置。
const?Config?=?require('webpack-chain');
const?config?=?new?Config();
config.
????.entry('index')
????????.add('src/index.js')
????????.end()
????.output
?????????.path('dist')
?????????filename('my-first-webpack.bundle.js');
config.module
????.rule('compile')
????????.test(/\.js$/)
????????.use('babel')
????????.loader('babel-loader')
module.exports?=?config;
可以看到，webpack-chain 可以通過(guò)鏈?zhǔn)降暮瘮?shù) api 來(lái)創(chuàng)建和修改 webpack 配置，從而更方便地創(chuàng)建和修改 webpack 配置。試想一下，如果一份 webpack 配置需要用于多個(gè)項(xiàng)目，但每個(gè)項(xiàng)目又有一些細(xì)微的不同配置，這個(gè)應(yīng)該怎么處理呢？
如果使用 webpack-chain 去修改配置，一個(gè)函數(shù) api 就搞定了，而使用命令式的編程，則需要去逐步遍歷整個(gè) webpack 配置文件，找出需要修改的點(diǎn)，才能進(jìn)行修改，這無(wú)疑就大大減少了我們的工作量。
函數(shù)式編程的特點(diǎn)
根據(jù)維基百科權(quán)威定義，函數(shù)式編程有以下幾個(gè)特點(diǎn)：
函數(shù)是一等公民 函數(shù)可以和變量一樣，可以賦值給其他變量，也可以作為參數(shù)，傳入一個(gè)函數(shù)，或者作為別的函數(shù)返回值。 只用表達(dá)式，不用語(yǔ)句： 表達(dá)式是一段單純的運(yùn)算過(guò)程，總是有返回值。 語(yǔ)句是執(zhí)行某種操作，沒(méi)有返回值。 也就是說(shuō)，函數(shù)式編程中的每一步都是單純的運(yùn)算，而且都有返回值。 無(wú)副作用 不會(huì)產(chǎn)生除運(yùn)算以外的其他結(jié)果。 同一個(gè)輸入永遠(yuǎn)得到同一個(gè)數(shù)據(jù)。 不可變性 不修改變量，返回一個(gè)新的值。 引用透明 函數(shù)的運(yùn)行不依賴于外部變量，只依賴于輸入的參數(shù)。
以上的特點(diǎn)都是函數(shù)式編程的核心，基于這些特點(diǎn)，又衍生出了許多應(yīng)用場(chǎng)景：
純函數(shù)：同樣的輸入得到同樣的輸出，無(wú)副作用。 函數(shù)組合：將多個(gè)依次調(diào)用的函數(shù)，組合成一個(gè)大函數(shù)，簡(jiǎn)化操作步驟。 高階函數(shù)：可以加工函數(shù)的函數(shù)，接收一個(gè)或多個(gè)函數(shù)作為輸入、輸出一個(gè)函數(shù)。 閉包：函數(shù)作用域嵌套，實(shí)現(xiàn)的不同作用域變量共享。 柯里化：將一個(gè)多參數(shù)函數(shù)轉(zhuǎn)化為多個(gè)嵌套的單參數(shù)函數(shù)。 偏函數(shù)：緩存一部分參數(shù)，然后讓另一些參數(shù)在使用時(shí)傳入。 惰性求值：預(yù)先定義多個(gè)操作，但不立即求值，在需要使用值時(shí)才去求值，可以避免不必要的求值，提升性能。 遞歸：控制函數(shù)循環(huán)調(diào)用的一種方式。 尾遞歸：避免多層級(jí)函數(shù)嵌套導(dǎo)致的內(nèi)存溢出的優(yōu)化。 鏈?zhǔn)秸{(diào)用：讓代碼更加優(yōu)雅。
這些應(yīng)用場(chǎng)景都大量存在于我們的日常工作中，接下來(lái)我們通過(guò)幾個(gè)案例來(lái)實(shí)戰(zhàn)一下。
函數(shù)式編程常見(jiàn)案例
基于函數(shù)式編程的應(yīng)用場(chǎng)景，我們來(lái)實(shí)現(xiàn)幾個(gè)具體的案例。
函數(shù)組合 柯里化 偏函數(shù) 高階函數(shù) 尾遞歸 鏈?zhǔn)秸{(diào)用
1、函數(shù)組合，組合多個(gè)函數(shù)步驟。
function?compose(f,?g)?{
??return?function?()?{
????return?f.call(this,?g.apply(this,?arguments));
??};
}
function?toLocaleUpperCase(str)?{
??return?str.toLocaleUpperCase();
}
function?toSigh(str)?{
??return?str?+?"!";
}
//?將多個(gè)函數(shù)按照先后執(zhí)行順序組合成一個(gè)函數(shù)，簡(jiǎn)化多個(gè)調(diào)用步驟。
const?composedFn?=?compose(toSigh,?toLocaleUpperCase);
console.log("函數(shù)組合：",?composedFn("msx"));
//?函數(shù)組合：MSX!
2、柯里化，將一個(gè)多參數(shù)函數(shù)轉(zhuǎn)化為多個(gè)嵌套的單參數(shù)函數(shù)。
//?柯里化
function?curry(targetfn)?{
??var?numOfArgs?=?targetfn.length;
??return?function?fn(...rest)?{
????if?(rest.length???????return?fn.bind(null,?...rest);
????}?else?{
??????return?targetfn.apply(null,?rest);
????}
??};
}
//?加法函數(shù)
function?add(a,?b,?c,?d)?{
??return?a?+?b?+?c?+?d;
}
//?將一個(gè)多參數(shù)函數(shù)轉(zhuǎn)化為多個(gè)嵌套的單參數(shù)函數(shù)
console.log("柯里化：",?curry(add)(1)(2)(3)(4));
//?柯里化：10
3、偏函數(shù)，緩存一部分參數(shù)，然后讓另一些參數(shù)在使用時(shí)傳入。
//?偏函數(shù)
function?isTypeX(type)?{
??return?function?(obj)?{
????return?Object.prototype.toString.call(obj)?===?`[object?${type}]`;
??};
}
//?緩存一部分參數(shù)，然后讓另一些參數(shù)在使用時(shí)傳入。
const?isObject?=?isTypeX("Object");
const?isNumber?=?isTypeX("Number");
console.log("偏函數(shù)測(cè)試：",?isObject({?a:?1?},?123));?//?true
console.log("偏函數(shù)測(cè)試：",?isNumber(1));?//?true
4、惰性求值，預(yù)先定義多個(gè)操作，但不立即求值，在需要使用值時(shí)才去求值，可以避免不必要的求值，提升性能。
//?這里使用?C#?中的?LINQ?來(lái)演示
//?假設(shè)數(shù)據(jù)庫(kù)中有這樣一段數(shù)據(jù)?db.Gems?[4,15,20,7,3,13,2,20];
var?q?=
????db.Gems
????.Select(c?=>?c?10)
???.Take(3)
???//?只要不調(diào)用?ToList?就不會(huì)求值
???//?在具體求值的時(shí)候，會(huì)將預(yù)先定義的方法進(jìn)行優(yōu)化整合，以產(chǎn)生一個(gè)最優(yōu)的解決方案，才會(huì)去求值。
????.ToList();
上述代碼中，傳統(tǒng)的求值會(huì)遍歷 2 次，第一次遍歷整個(gè)數(shù)組（8 項(xiàng)），篩選出小于 10 的項(xiàng)，輸出 [4,7,3,2]，第二次遍歷這個(gè)數(shù)組（4 項(xiàng)），輸出 [4,7,3]。
如果使用惰性求值，則會(huì)將預(yù)先定義的所有操作放在一起進(jìn)行判斷，所以只需要遍歷 1 次就可以了。在遍歷的同時(shí)判斷 是否小于 10 和 小于 10 的個(gè)數(shù)是否為 3，當(dāng)遍歷到第 5 項(xiàng)時(shí)，就能輸出 [4,7,3]。
相比傳統(tǒng)求值遍歷的 8+4=12 項(xiàng)，使用惰性求值則只需遍歷 5 項(xiàng)，程序的運(yùn)行效率也就自然而然地得到了提升。
5、高階函數(shù)，可以加工函數(shù)的函數(shù)（接收一個(gè)或多個(gè)函數(shù)作為輸入、輸出一個(gè)函數(shù)）。
// React 組件中，將一個(gè)組件，封裝為帶默認(rèn)背景色的新組件。
//?styled-components?就是這個(gè)原理
function?withBackgroundRedColor?(wrapedComponent)?{
??return?class?extends?Component?{
????render?()?{
??????return?(<div?style={backgroundColor:?'red}?>
?????????????????<wrapedComponent?{...this.props}?/>
?????????????div>)
????}
??}
}
6、遞歸和尾遞歸。
//?普通遞歸，控制函數(shù)循環(huán)調(diào)用的一種方式。
function?fibonacci(n)?{
??if?(n?===?0)?{
????return?0;
??}
??if?(n?===?1)?{
????return?1;
??}
??return?fibonacci(n?-?1)?+?fibonacci(n?-?2);
}
console.log("沒(méi)有使用尾遞歸，導(dǎo)致棧溢出",?fibonacci(100));
//?尾遞歸，避免多層級(jí)函數(shù)嵌套導(dǎo)致的內(nèi)存溢出的優(yōu)化。
function?fibonacci2(n,?result,?preValue)?{
??if?(n?==?0)?{
????return?result;
??}
??return?fibonacci2(n?-?1,?preValue,?result?+?preValue);
}
//?result?=?0,?preValue?=?1
console.log("使用了尾遞歸，不會(huì)棧溢出",?fibonacci2(100,?0,?1));
6、鏈?zhǔn)秸{(diào)用
// lodash 中，一個(gè)方法調(diào)用完成之后，可以繼續(xù)鏈?zhǔn)秸{(diào)用其他的方法。
var?users?=?[
??{?user:?"barney",?age:?36?},
??{?user:?"fred",?age:?40?},
??{?user:?"pebbles",?age:?1?},
];
var?youngest?=?_.chain(users)
??.sortBy("age")
??.map(function?(o)?{
????return?o.user?+?"?is?"?+?o.age;
??})
??.head()
??.value();
//?=>?'pebbles?is?1'
思考與總結(jié)
本文從編程范式開(kāi)始，分析了函數(shù)式編程的定位，進(jìn)一步引申出函數(shù)式編程的概念，然后基于一些工作中的案例，實(shí)戰(zhàn)了函數(shù)式編程的應(yīng)用場(chǎng)景，希望大家都能輕松地認(rèn)識(shí)函數(shù)式編程。
最后，如果你對(duì)此有任何想法，歡迎留言評(píng)論！
推薦閱讀