天天看點

幫你精通JS: 學習函數式程式設計

一、什麼是函數式程式設計

從FP函數式程式設計的眼中看來,世界的萬事萬物就是處理資料流:

input --> process -- output

幫你精通JS: 學習函數式程式設計

比如非函數式,會這樣寫程式:

var name = "gaowei"; 
var greeting = "Hello,I'm ";;
console.log(greeting + name)
Hello,I'm gaowei
           

複制

而函數範式程式設計則會這樣寫程式:

function greet(name) {
... return "Hi, I'm " + name;
... }
greet("Gaowei");
"Hi, I'm Gaowei"
複制代碼           

複制

二、 用純函數 pure-function,避免 副作用 side-effects

舉例說明“非純函數”:

let name = "Gaowei";
function greet() {
... console.log("Hi, I'm " + name);
... }
greet()
Hi, I'm gaowei
複制代碼           

複制

這就不是一個純函數,因為沒有傳回結果。 而純函數則是:

function greet(name) {
... return "Hi, I'm " + name;
... }
複制代碼           

複制

三、使用高階函數 higher-order-function,函數本身可作為輸入或者輸出

在高階函數中,函數本身又可作為輸入與輸出。

function setAdjectifier(adjective) {
... return function(description) {
..... return adjective + " " + description;
..... }
... }
let greatifier = setAdjectifier("great");
greatifier("meeting")
'great meeting'
複制代碼           

複制

四、不要疊代,用 map, reduce 和 filter

map與filter之間的關聯與差別,可以參見下面這張圖:

幫你精通JS: 學習函數式程式設計

五、不要更改輸入資料,用不可變更的資料結構

舉例,我們慣常的做法常常為:

let fruits = ['apple', 'banana', 'peach'];
 fruits[2] = 'orange'
'orange'
 fruits
[ 'apple', 'banana', 'orange' ]
           

複制

上面的mutation的處理方法,将會修改原始資料。 嘗試 functional-programming的方式為:

> newFruits = fruits.map( rm => rm == "orange" ? "peach" : rm)
[ 'apple', 'banana', 'peach' ]
> fruits
[ 'apple', 'banana', 'orange' ]
複制代碼           

複制

而能夠高效處理 immutable 資料的常用庫為:Mori, immutable.js, Underscor, Lodash, Ramda 等