輕鬆玩轉函數式編程

時間 2020-09-25

標籤輕鬆函數編程简体版

原文原文鏈接

最近和一些同窗討論了函數式編程，不少同窗總以爲聽起來很高大上，但用起來卻無從下手。因而我抽時間捋了捋，將平時工做中用到的函數式編程案例和思想整理了出來，相信閱讀本文後，你們都能快速上手函數式編程。javascript

函數式編程目前使用範圍很是廣，經常使用的框架，語言幾乎都能看到它的身影。css

前端框架：react、vue 的 hooks 用法。
打包工具：webpack 的 webpack-chain 用法。
工具庫：underscore、lodash、ramda。
部署方式：serverless。
後端：java、c# 中的 lamda 表達式。

本文將經過如下 3 個部分來深刻函數式編程。html

編程範式
函數式編程
函數式編程常見案例

編程範式

編程範式 指的是一種編程風格，它描述了程序員對程序執行的見解。在編程的世界中，同一個問題，能夠站在多個角度去分析解決，這些不一樣的解決方案就對應了不一樣的編程風格。前端

常見的編程範式有：vue

命令式編程java
- 面向過程編程react
  - C
- 面向對象編程webpack
  - C++、C#、Java
聲明式編程程序員
- 函數式編程web
  - Haskell

命令式編程

命令式編程 是使用最廣的一種編程風格，它是站在計算機的角度去思考問題，主要思想是 關注計算機執行的步驟，即一步一步告訴計算機先作什麼再作什麼。

因爲存在不少須要控制的步驟，因此命令式編程廣泛存在如下特色：

控制語句
循環語句：while、for
條件分支語句：if else、switch
無條件分支語句：return、break、continue
變量
賦值語句

根據這些特色，咱們來分析一個命令式編程案例：

// 需求：篩選出數組中爲奇數的子集合
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 步驟1：定義執行結果變量
let reult = [];
// 步驟2：控制程序循環調用
for (let i = 0; i < array.length; i++) {
// 步驟3：判斷篩選條件
if (array[i] % 2 !== 0) {
// 步驟4：加入執行結果
reult.push(array[i]);
}
}
// 步驟5：獲得最終的結果 result

以上代碼經過 5 個步驟，實現了數組的篩選，這並無什麼問題，但細心的同窗可能會感到疑惑：這樣寫的代碼量太長了，並且並不語義化，只有閱讀完每一行的代碼，才知道具體執行的是什麼邏輯。

沒錯，這就是命令式編程的典型特色，除此以外，還有如下幾點：

命令式編程的每個步驟均可以由程序員定義，這樣能夠更精細化、更嚴謹地控制代碼，從而提升程序的性能。
命令式編程的每個步驟均可以記錄中間結果，方便調試代碼。
命令式編程須要大量的流程控制語句，在處理多線程狀態同步問題時，容易形成邏輯混亂，一般須要加鎖來解決。

聲明式編程

聲明式編程 一樣是一種編程風格，它經過定義具體的規則，以便系統底層能夠自動實現具體功能。主要思想是 告訴計算機應該作什麼，但不指定具體要怎麼作。

因爲須要定義規則來表達含義，因此聲明式編程廣泛存在如下特色：

代碼更加語義化，便於理解。
代碼量更少。
不須要流程控制代碼，如：for、while、if 等。

接下來，咱們將上文中的數組篩選，用聲明式的方式重構一下：

// 篩選出數組中爲奇數的子集合
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const reult = array.filter((item) => item % 2 !== 0);

能夠看到，聲明式編程沒有冗餘的操做步驟，代碼量很是少，而且很是語義化，當咱們讀到 filter 的時候，天然而然就知道是在作篩選。

咱們再看一個案例：

# 使用 sql 語句，查詢 id 爲 25 的學生
select * from students where id=25

在上述代碼中，咱們只是告訴計算機，我想查找 id 爲 25 的同窗，計算機就能給咱們返回對應的數據了，至因而怎麼查找出來的，咱們並不須要關心，只要結果是正確的便可。

除了上述例子以外，還有不少聲明式編程的案例：

html 用來聲明瞭網頁的內容。
css 用來聲明網頁中元素的外觀。
正則表達式，聲明匹配的規則。

有了以上幾個案例，咱們來總結一下聲明式編程的優缺點：

聲明式編程不須要編寫複雜的操做步驟，能夠大大減小開發者的工做量。
聲明式編程的具體操做都是底層統一管理，能夠下降重複工做。
聲明式編程底層實現的邏輯並不可控，不適合作更精細化的優化。

函數式編程

函數式編程 屬於聲明式編程中的一種，它的主要思想是 將計算機運算看做爲函數的計算，也就是把程序問題抽象成數學問題去解決。

函數式編程中，咱們能夠充分利用數學公式來解決問題。也就是說，任何問題均可以經過函數（加減乘除）和數學定律（交換律、結合律等），一步一步計算，最終獲得答案。

函數式編程中，全部的變量都是惟一的值，就像是數學中的代數 x、y，它們要麼還未解出來，要麼已經被解出爲固定值，因此對於：x=x+1 這樣的自增是不合法的，由於修改了代數值，不符合數學邏輯。

除此以外，嚴格意義上的函數式編程也不包括循環、條件判斷等控制語句，若是須要條件判斷，可使用三元運算符代替。

文章開頭咱們提到了 webpack-chain，咱們一塊兒來看一下：

// 使用 webpack-chain 來編寫 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 能夠經過鏈式的函數 api 來建立和修改 webpack 配置，從而更方便地建立和修改 webpack 配置。試想一下，若是一份 webpack 配置須要用於多個項目，但每一個項目又有一些細微的不一樣配置，這個應該怎麼處理呢？

若是使用 webpack-chain 去修改配置，一個函數 api 就搞定了，而使用命令式的編程，則須要去逐步遍歷整個 webpack 配置文件，找出須要修改的點，才能進行修改，這無疑就大大減小了咱們的工做量。

函數式編程的特色

根據維基百科權威定義，函數式編程有如下幾個特色：

函數是一等公民
- 函數能夠和變量同樣，能夠賦值給其餘變量，也能夠做爲參數，傳入一個函數，或者做爲別的函數返回值。
只用表達式，不用語句：
- 表達式是一段單純的運算過程，老是有返回值。
- 語句是執行某種操做，沒有返回值。
- 也就是說，函數式編程中的每一步都是單純的運算，並且都有返回值。
無反作用
- 不會產生除運算之外的其餘結果。
- 同一個輸入永遠獲得同一個數據。
不可變性
- 不修改變量，返回一個新的值。
引用透明
- 函數的運行不依賴於外部變量，只依賴於輸入的參數。

以上的特色都是函數式編程的核心，基於這些特色，又衍生出了許多應用場景：

純函數：一樣的輸入獲得一樣的輸出，無反作用。
函數組合：將多個依次調用的函數，組合成一個大函數，簡化操做步驟。
高階函數：能夠加工函數的函數，接收一個或多個函數做爲輸入、輸出一個函數。
閉包：函數做用域嵌套，實現的不一樣做用域變量共享。
柯里化：將一個多參數函數轉化爲多個嵌套的單參數函數。
偏函數：緩存一部分參數，而後讓另外一些參數在使用時傳入。
惰性求值：預先定義多個操做，但不當即求值，在須要使用值時纔去求值，能夠避免沒必要要的求值，提高性能。
遞歸：控制函數循環調用的一種方式。
尾遞歸：避免多層級函數嵌套致使的內存溢出的優化。
鏈式調用：讓代碼更加優雅。

這些應用場景都大量存在於咱們的平常工做中，接下來咱們經過幾個案例來實戰一下。

函數式編程常見案例

基於函數式編程的應用場景，咱們來實現幾個具體的案例。

函數組合
柯里化
偏函數
高階函數
尾遞歸
鏈式調用

一、函數組合，組合多個函數步驟。

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 + "!";
}

// 將多個函數按照前後執行順序組合成一個函數，簡化多個調用步驟。
const composedFn = compose(toSigh, toLocaleUpperCase);
console.log("函數組合：", composedFn("msx"));
// 函數組合：MSX!

二、柯里化，將一個多參數函數轉化爲多個嵌套的單參數函數。

// 柯里化
function curry(targetfn) {
    var numOfArgs = targetfn.length;
    return function fn(...rest) {
    if (rest.length < numOfArgs) {
        return fn.bind(null, ...rest);
    } else {
        return targetfn.apply(null, rest);
    }
};
}

// 加法函數
function add(a, b, c, d) {
    return a + b + c + d;
}

// 將一個多參數函數轉化爲多個嵌套的單參數函數
console.log("柯里化：", curry(add)(1)(2)(3)(4));
// 柯里化：10

三、偏函數，緩存一部分參數，而後讓另外一些參數在使用時傳入。

// 偏函數
function isTypeX(type) {
    return function (obj) {
        return Object.prototype.toString.call(obj) === `[object ${type}]`;
};
}

// 緩存一部分參數，而後讓另外一些參數在使用時傳入。
const isObject = isTypeX("Object");
const isNumber = isTypeX("Number");
console.log("偏函數測試：", isObject({ a: 1 }, 123)); // true
console.log("偏函數測試：", isNumber(1)); // true

四、惰性求值，預先定義多個操做，但不當即求值，在須要使用值時纔去求值，能夠避免沒必要要的求值，提高性能。

// 這裏使用 C# 中的 LINQ 來演示
// 假設數據庫中有這樣一段數據 db.Gems [4,15,20,7,3,13,2,20];
var q =
db.Gems
.Select(c => c < 10)
.Take(3)
// 只要不調用 ToList 就不會求值
// 在具體求值的時候，會將預先定義的方法進行優化整合，以產生一個最優的解決方案，纔會去求值。
.ToList();

上述代碼中，傳統的求值會遍歷 2 次，第一次遍歷整個數組（8 項），篩選出小於 10 的項，輸出 [4,7,3,2]，第二次遍歷這個數組（4 項），輸出 [4,7,3]。

若是使用惰性求值，則會將預先定義的全部操做放在一塊兒進行判斷，因此只須要遍歷 1 次就能夠了。在遍歷的同時判斷 是否小於 10 和 小於 10 的個數是否爲 3，當遍歷到第 5 項時，就能輸出 [4,7,3]。

相比傳統求值遍歷的 8+4=12 項，使用惰性求值則只需遍歷 5 項，程序的運行效率也就天然而然地獲得了提高。

五、高階函數，能夠加工函數的函數（接收一個或多個函數做爲輸入、輸出一個函數）。

// React 組件中，將一個組件，封裝爲帶默認背景色的新組件。
// styled-components 就是這個原理
function withBackgroundRedColor (wrapedComponent) {
    return class extends Component {
        render () {
            return (<div style={backgroundColor: 'red} >
                <wrapedComponent {...this.props} />
            </div>)
        }
    }
}

六、遞歸和尾遞歸。

// 普通遞歸，控制函數循環調用的一種方式。

function fibonacci(n) {
    if (n === 0) {
        return 0;
    }
    if (n === 1) {
        return 1;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log("沒有使用尾遞歸，致使棧溢出", fibonacci(100));

// 尾遞歸，避免多層級函數嵌套致使的內存溢出的優化。
function fibonacci2(n, result, preValue) {
    if (n == 0) {
        return result;
    }
    return fibonacci2(n - 1, preValue, result + preValue);
}
// result = 0, preValue = 1
console.log("使用了尾遞歸，不會棧溢出", fibonacci2(100, 0, 1));

六、鏈式調用

// lodash 中，一個方法調用完成以後，能夠繼續鏈式調用其餘的方法。
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'