JavaScript函數式編程

1：基本概念

函數式編程是一種編程思惟方式，並非一些語法規則，對於複用性高的功能代碼進行必定的函數封裝，實現了代碼的高可複用性（主要目的）。

函數式編程的特色：

• 函數是第一等公民，由於叫函數式編程，所以函數的地位是最高的，也就是說比起變量函數的地位更高一點。

• 只用表達式而不用語句，表達式就是聲明式的意思，語句就是命令式的，儘可能使用表達式或者是聲明式的代碼來組織邏輯。

• 沒有反作用的代碼，也叫作純函數或者在一些開發框架中也叫做純主鍵，純的意思是輸入必定那麼輸出也必定。

• 不修改狀態。

• 引用透明。

2：函數是一等公民

理解：函數在整個JavaScript代碼裏面通常來說有四種，第一種叫作聲明函數、而後是表達式函數、匿名函數以及自執行函數。

爲何函數是一等公民？

• 函數聲明優先級高於變量聲明和函數表達式

  console.log(getName);
  ​
  getName();
  ​
  var getName;
  getName = 'Eric';
  function getName(){
      console.log('function getName');
  }
  ​
  console.log(getName);
  ​
  //ƒ getName(){
      console.log('function getName');
    }
  // function getName
  // Eric

• 函數應用

  //聲明函數
  function getName(){
  }
  ​
  //表達式函數(直接賦給一個變量)
  var getName = function(){
  }
  ​
  //匿名函數(沒有名字)
  setTimeout(function(){
  },1000);
  ​
  //自執行函數(IIFE)
  (function(){
  })();

3：純函數

特色：

• 對於相同的輸入，永遠會獲得相同的輸出

  function getNumber(num){
      return num + Math.random();
  }

• 不改變輸入值

  function getGirlGift(list){
      // 輸入值改變
      list = list.map(girl => {
          girl.gift = girl.age > 18 ? 'big' : 'small';
      });
      return list;
  }

• 不包含反作用（網絡、I/O）

  var array = \[1,2,3,4,5\];
  array.slice(0,3);
  array.slice(0,3);
  // \[1, 2, 3\]
  ​
  // 改變原數組
  array.splice(0,3);
  array.splice(0,3);
  // \[4, 5\]
  ​
  //網絡請求
  asiox.get('https://www.xxxx.com').then(res => {
      
  })
  ​
  //時間
  function getDate(){
      return new Date();
  }

• Array函數舉例

  以數組爲例，純與不純函數有哪些：
  //不純：調用數組以後改變了原數組。
  array.push();       數組尾部插入
  array.pop();        刪除並返回數組最後一個元素
  array.unshift();    數組頭部插入
  array.shift();      刪除並返回數組第一元素
  array.splice();     刪除元素，並向數組添加元素
  array.reverse();    顛倒數組元素的順序
  array.sort();       排序數組元素
  ​
  ​
  //數組純函數：調用數組的方法不改變原數組。
  array.slice();      數組中返回選定的元素
  array.concat();     鏈接數組，併發揮新數組
  array.join();       按分隔符鏈接數組，返回字符串

4：函數柯里化

定義：傳遞給函數的一部分參數來調用它，讓它返回一個函數去處理剩下的參數。

柯里化是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數，而且返回接受餘下的參數並且返回結果的新函數的技術。例如：

// 普通的add函數
function add(x, y) {
    return x + y
}
add(1,2);
// 3
​
// 柯里化改編後
function addX(y) {
    return function (x) {
        return x + y;
    }
}
addX(2)(1);
// 3
​
// 函數不純 \- 硬編碼 \- 依賴min參數 
var min = 90; 
var isWell = score => score > min;
​
// 柯里化改編 
var min = 90; 
var chekoLevel = baseLine => (score => score > baseLine);
var isWell = chekoLevel(90);
// isWell(90)
   false
// isWell(940)
   true
​
​
實際上就是把add函數的x，y兩個參數變成了先用一個函數接收x而後返回一個函數去處理y參數。如今思路應該就比較清晰了，就是隻傳遞給函數一部分參數來調用它，讓它返回一個函數去處理剩下的參數。

一種對參數的緩存

• 用在一些區分環境的函數預緩存

• 已獲取某些耗時操做結果緩存

5：函數組合

在函數式編程思想以前，出現過一個函數嵌套的現象，函數嵌套是一個函數的執行結果它是另一個函數的入參，通常來說是兩層，可是兩層以上或者更多也是可能的。好比下面的代碼，它的意思是function13的結果做爲function2的入參，而後function2的結果又做爲function1的入參。這樣的寫法不太好理解並且容易混亂，所以在這個基礎上，衍生了函數式編程的另一個思想，叫作函數組合。

函數組合是經過另一個函數去組合嵌套函數，可是函數自己的嵌套關係，依賴關係是不會改變的。只不過是經過另一個函數完成一個組裝。

• 函數嵌套

  function1(function2(function13(x)));

• 函數組合

  var compose = (function1, function2) => (x => function1(function2(x)));
  ​
  var function1 = param => param + 1;
  var function2 = param => param + 2;
  var final = compose(function1, function2);
  final(1);
  ​
  // 4

6：Point Free

不要命名轉瞬即逝的中間變量。

var getSplitWord = str => str.toUpperCase().split(' ');

//柯里化封裝
var toUpperCase = word => word.toUpperCase();
var split = x => str => str.split(x);
var getSplitWord = compose(split(' '), toUpperCase);

7：聲明式代碼

var students = \[{
    name: 'Eric',
    score: 99,
    },
    {
        name: 'Iven',
        score: 59,
    }
}\];
​
//命令式
const getWell =students => {
    let result = \[\];
    for (let i = 0; i < students.length; i++){
        if (students\[i\].score >= 90){
            result.push(students\[i\])
        }
    }
    return result;
}
​
//聲明式
const getWell = students => return students.filler(student => students.score >= 90);

8：高階函數

把函數當參數，把傳入的函數作一個封裝。

function add(x,y,f){
    return f(x) + f(y);
}

高階函數是對其餘函數進行操做的函數，能夠將它們做爲參數或返回它們。 簡單來講，高階函數是一個函數，它接收函數做爲參數或將函數做爲輸出返回。

常見的高階函數有：

• Array.map

  var array = \[1,2,3\];
  array.map(s => s + 1);
  // \[2, 3, 4\]

• Array.sort（排序）

• Array.filter（過濾）