隨之ECMAScript 標準規範不斷更新，現在已經更新到ES7,不久ES8規範即將面世，為了是JS 語法對函數編程更加友好，諸如 RxJS (ReactiveX) 等函數式框架的不斷流行。函數式編程則應該是以函數做為艦載主體，然後對函數進行拆分封裝、更加抽象，可擴展性極強。

與傳統命令式函數相比存在那些優勢？

1. 語法精簡清晰
2. 通用性更好
3. 維護及可擴展性更好
4. 限制作用域

以下列舉函數對比

// 數組中每個單詞，首字母大寫
// 一般寫法
const arr = [‘apple‘, ‘pen‘, ‘apple-pen‘];
for(const i in arr){
const c 
 
= arr[i][0];
arr[i] = c.toUpperCase() + arr[i].slice(1);
}

console.log(arr);
// 函數式寫法一
function upperFirst(word) {
return word[0].toUpperCase() + word.slice(1);
}
function wordToUpperCase(arr) {
return arr.map(upperFirst);
}
console.log(wordToUpperCase([‘apple‘, ‘pen‘, ‘apple-pen‘]));
// 函數式寫法二
console.log(arr.map([‘apple‘, ‘pen‘, ‘apple-pen‘], word => word[0].toUpperCase() + word.slice(1)));

當情況變得更加復雜時，表達式的寫法會遇到幾個問題：

1. 表意不明顯，逐漸變得難以維護
2. 復用性差，會產生更多的代碼量
3. 會產生很多中間變量

函數式編程很好的解決了上述問題。首先參看 函數式寫法一，它利用了函數封裝性將功能做拆解（粒度不唯一），並封裝為不同的函數，而再利用組合的調用達到目的。這樣做使得表意清晰，易於維護、復用以及擴展。其次利用 高階函數，Array.map 代替 for…of 做數組遍歷，減少了中間變量和操作。

而 函數式寫法一 和 函數式寫法二 之間的主要差別在於，可以考慮函數是否後續有復用的可能，如果沒有，則後者更優。

鏈式優化

從上面 函數式寫法二 中我們可以看出，函數式代碼在寫的過程中，很容易造成 橫向延展

// 計算數字之和
// 一般寫法
console.log(1 + 2 + 3 - 4)
// 函數式寫法
function sum(a, b) {
  return a + b;
}
function sub(a, b) {
  return a - b;
}
console.log(sub(sum(sum(1, 2), 3), 4);

// 優化寫法 (嗯，你沒看錯，這就是 lodash 的鏈式寫法)
const utils = {
  chain(a) {
    this._temp = a;
    return this;
  },
  sum(b) {
    this._temp += b;
    return this;
  },
  sub(b) {
    this._temp -= b;
    return this;
  },
  value() {
    const _temp = this._temp;
    this._temp = undefined;
    return _temp;
  }
};
console.log(utils.chain(1).sum(2).sum(3).sub(4).value());

本例僅為展示 橫向延展 的比較極端的情況，隨著函數的嵌套層數不斷增多，導致代碼的可讀性大幅下降，還很容易產生錯誤。

在這種情況下，我們可以考慮多種優化方式，比如下面的 鏈式優化 。

（PHP開發、web前端、UI設計、VR開發專業培訓機構--V客IT學院版權所有，轉載請註明出處，謝謝合作！）

Js 函數式編程思想 （V客學院知識分享）