快捷導(dǎo)航

JavaScript中的函數(shù)式編程詳解

更新時間：2020年08月22日 22:13:19 作者：蔣鵬飛

這篇文章主要介紹了JavaScript中的函數(shù)式編程詳解,需要的朋友可以參考下

函數(shù)式編程

函數(shù)式編程是一種編程范式，是一種構(gòu)建計算機程序結(jié)構(gòu)和元素的風(fēng)格，它把計算看作是對數(shù)學(xué)函數(shù)的評估，避免了狀態(tài)的變化和數(shù)據(jù)的可變，與函數(shù)式編程相對的是命令式編程。我們有這樣一個需求，給數(shù)組的每個數(shù)字加一：

// 數(shù)組每個數(shù)字加一, 命令式編程
let arr = [1, 2, 3, 4];
let newArr = [];
for(let i = 0; i < arr.length; i++){
 newArr.push(arr[i] + 1);
}

console.log(newArr); // [2, 3, 4, 5]

這段代碼結(jié)果沒有問題，但是沒法重用。我們換一個思維，這里面包含的操作其實就兩個，一個是遍歷數(shù)組，一個是成員加一。我們把這兩個方法拆出來：

// 先拆加一出來
let add1 = x => x +1;

// 然后拆遍歷方法出來，通過遍歷返回一個操作后的新數(shù)組
// fn是我們需要對每個數(shù)組想進行的操作
let createArr = (arr, fn) => {
 const newArr = [];
 for(let i = 0; i < arr.length; i++){
 newArr.push(fn(arr[i]));
 }

 return newArr;
} 

// 用這兩個方法來得到我們期望的結(jié)果
const arr = [1, 2, 3, 4];
const newArr = createArr(arr, add1);
console.log(newArr); // [2, 3, 4, 5], 結(jié)果仍然是對的

這樣拆分后，如果我們下次的需求是對數(shù)組每個元素乘以2，我們只需要寫一個乘法的方法，然后復(fù)用之前的代碼就行：

let multiply2 = x => x * 2;

// 調(diào)用之前的createArr
const arr2 = [1, 2, 3, 4];
const newArr2 = createArr(arr2, multiply2);
console.log(newArr2); // [2, 4, 6, 8], 結(jié)果是對的

事實上我們的加一函數(shù)只能加一，也不好復(fù)用，它還可以繼續(xù)拆：

// 先寫一個通用加法，他接收第一個加數(shù)，返回一個方法
// 返回的這個方法接收第二個加數(shù)，第一個加數(shù)是上層方法的a
// 這樣當(dāng)我們需要計算1+2是，就是add(1)(2)
let add = (a) => {
 return (b) => {
 return a + b;
 }
}

// 我們也可以將返回的函數(shù)賦給一個變量，這個變量也就變成一個能特定加a的一個方法
let add1 = add(1);

let res = add1(4); 
console.log(res); // 5

所以函數(shù)式編程就是將程序分解為一些更可重用、更可靠且更易于理解的部分，然后將他們組合起來，形成一個更易推理的程序整體。

純函數(shù)

純函數(shù)是指一個函數(shù)，如果它的調(diào)用參數(shù)相同，則永遠(yuǎn)返回相同的結(jié)果。它不依賴于程序執(zhí)行期間函數(shù)外部任何狀態(tài)或數(shù)據(jù)的變化，只依賴于其輸入?yún)?shù)。同時函數(shù)的運行也不改變?nèi)魏瓮獠繑?shù)據(jù)，它只通過它的返回值與外部通訊。下面這個函數(shù)就不是純函數(shù)，因為函數(shù)內(nèi)部需要的discount需要從外部獲取：

let discount = 0.8;
const calPrice = price => price * discount;
let price = calPrice(200); // 160

// 當(dāng)discount變了，calPrice傳同樣額參數(shù)，結(jié)果不一樣，所以不純
discount = 0.9;
price = calPrice(200); // 180

要改為純函數(shù)也很簡單，將discount作為參數(shù)傳遞進去就行了

const calPrice = (price, discount) => price * discount;

純函數(shù)可以保證代碼的穩(wěn)定性，因為相同的輸入永遠(yuǎn)會得到相同結(jié)果。不純的函數(shù)可能會帶來副作用。

函數(shù)副作用

函數(shù)副作用是指調(diào)用函數(shù)時除了返回函數(shù)值之外，還對主調(diào)用函數(shù)產(chǎn)生附加的影響，比如修改全局變量或者外部變量，或者修改參數(shù)。這可能會帶來難以查找的問題并降低代碼的可讀性。下面的foo就有副作用，當(dāng)后面有其他地方需要使用a，可能就會拿到一個被污染的值

let a = 5;
let foo = () => a = a * 10;
foo();
console.log(a); // 50

除了我們自己寫的函數(shù)有副作用外，一些原生API也可能有副作用，我們寫代碼時應(yīng)該注意：

我們的目標(biāo)是盡可能的減少副作用，將函數(shù)寫為純函數(shù)，下面這個不純的函數(shù)使用了new Date，每次運行結(jié)果不一樣，是不純的：

要給為純函數(shù)可以將依賴注入進去，所謂依賴注入就是將不純的部分提取出來作為參數(shù)，這樣我們可以讓副作用代碼集中在外部，遠(yuǎn)離核心代碼，保證核心代碼的穩(wěn)定性

// 依賴注入
const foo = (d, log, something) => {
 const dt = d.toISOString();
 return log(`${dt}: ${something}`);
}

const something = 'log content';
const d = new Date();
const log = console.log.bind(console);
foo(d, log, something);

所以減少副作用一般的方法就是：