[[343694]]

本文轉載自微信公眾號「前端日志」，作者前端日志。轉載本文請聯系前端日志公眾號。  

 最近和一些同學討論了函數式編程，很多同學總覺得聽起來很高大上，但用起來卻無從下手。于是我抽時間捋了捋，將平時工作中用到的函數式編程案例和思想整理了出來，相信閱讀本文后，大家都能快速上手函數式編程。

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

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

本文將通過以下 3 個部分來深入函數式編程。

• 編程范式
• 函數式編程
• 函數式編程常見案例

編程范式

編程范式 指的是一種編程風格，它描述了程序員對程序執行的看法。在編程的世界中，同一個問題，可以站在多個角度去分析解決，這些不同的解決方案就對應了不同的編程風格。

常見的編程范式有：

• 命令式編程
  • 面向過程編程
    • C
• 面向對象編程
  • C++、C#、Java
• 聲明式編程
  • 函數式編程
    • 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 的學生

# 使用 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 配置文件，找出需要修改的點，才能進行修改，這無疑就大大減少了我們的工作量。

函數式編程的特點

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

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

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

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

這些應用場景都大量存在于我們的日常工作中，接下來我們通過幾個案例來實戰一下。

函數式編程常見案例

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

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

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

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! 

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

// 柯里化 
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 

3、偏函數，緩存一部分參數，然后讓另一些參數在使用時傳入。

// 偏函數 
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 

4、惰性求值，預先定義多個操作，但不立即求值，在需要使用值時才去求值，可以避免不必要的求值，提升性能。

// 這里使用 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 項，程序的運行效率也就自然而然地得到了提升。

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'