自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript函數(shù)式真正的淺析

作者：mrcode
開(kāi)發(fā) 前端
最近兩年你要說(shuō)函數(shù)式編程不火的話(huà), 那是不可能的, 是人都知道函數(shù)式編程很火.為什么函數(shù)式編程會(huì)火呢, 在于它的思想, 很強(qiáng)大, 很強(qiáng)勢(shì)!尤其是前端的redux更是在reducer上完全使用純函數(shù), 函數(shù)式的好處漸漸被發(fā)掘出來(lái), 筆者最近看了一些函數(shù)式方面的東東, 現(xiàn)在發(fā)出來(lái)給大家學(xué)習(xí)學(xué)習(xí), 順便我也學(xué)習(xí)學(xué)習(xí)怎么寫(xiě)文章。

[[173843]]

JS函數(shù)式淺析

0x00 入門(mén)的導(dǎo)語(yǔ)(廢話(huà))

最近兩年你要說(shuō)函數(shù)式編程不火的話(huà), 那是不可能的, 是人都知道函數(shù)式編程很火.為什么函數(shù)式編程會(huì)火呢, 在于它的思想, 很強(qiáng)大, 很強(qiáng)勢(shì)!尤其是前端的redux更是在reducer上完全使用純函數(shù), 函數(shù)式的好處漸漸被發(fā)掘出來(lái), 筆者最近看了一些函數(shù)式方面的東東, 現(xiàn)在發(fā)出來(lái)給大家學(xué)習(xí)學(xué)習(xí), 順便我也學(xué)習(xí)學(xué)習(xí)怎么寫(xiě)文章... :P

常用的函數(shù)式庫(kù):

  • ramda 設(shè)計(jì)很棒的一個(gè)庫(kù)
  • lodash 比較常用的一個(gè)庫(kù)
  • underscore 應(yīng)該也不錯(cuò)的一個(gè)庫(kù)

0x01 純函數(shù)

定義: 相同輸入一定得到相同輸出且運(yùn)行過(guò)程中不修改,不讀取外部環(huán)境的變量的函數(shù)

說(shuō)出來(lái)肯定不好理解, 還是要看看代碼. 就好像你不看國(guó)足比賽永遠(yuǎn)不知道國(guó)足為什么會(huì)輸給月薪幾百塊的敘利亞.

  1. // Array.slice 對(duì)于固定輸入一定是固定輸出, 且不依賴(lài)外部變量, 啥? 依賴(lài)了arr變量嗎? 
  2. // 其實(shí)這種寫(xiě)法和Array.prototype.slice(arr, 0, 3); 是一樣的. 這樣就理解了, 
  3. // 你還學(xué)到一個(gè)東西 Array.slice是不會(huì)修改原數(shù)組滴! 
  4. var arr = [1,2,3,4,5]; 
  5. arr.slice(0,3); 
  6.  
  7.  // Array.splice 會(huì)修改xs, 所以是不純的, 所以相同的輸入不會(huì)有相同的輸出! 
  8. var xs.splice(0,3); 
  9. //=> [1,2,3] 
  10. xs.splice(0,3); 
  11. //=> [4,5] 
  12. xs.splice(0,3); 
  13. //=> []  

純函數(shù)的好處: 不會(huì)去修改外部變量就不會(huì)產(chǎn)生線(xiàn)程安全問(wèn)題.可以極大的減少系統(tǒng)復(fù)雜程度

0x02 函數(shù)的柯里化

看! 代碼!

  1. // 調(diào)用 doWht('我', '家里', '飯'); 
  2. let doWhat = (who, where, what) => { 
  3.   return who + '在' + where + '做' + what 
  4. } 
  5.  
  6. // 柯里化后的等價(jià)效果 
  7. // 調(diào)用 doWhat('我')('家里')('飯') 
  8. let doWhat = who => where => what => { 
  9.   return who + '在' + where + '做' + what 
  10. } 
  11.  
  12. // 假設(shè)現(xiàn)在知道是'我'在'家', 至于做什么是不知道的 
  13. // tmp函數(shù)就已經(jīng)幫我們保存了值, 這樣是非常靈活的. 
  14. let doWhatCurry = doWhat('我')('家里')  

上面提到的庫(kù)里都有一個(gè)叫curry的函數(shù)會(huì)將一個(gè)普通的函數(shù)柯里化.

0x03 函數(shù)的組合

函數(shù)組合是將函數(shù)組合在一起, 生成一個(gè)新的函數(shù)

  1. // h(g(f(x))) 這是以前調(diào)用函數(shù)的方式 
  2. var add1 = x => x + 1 
  3. var mul5 = x => x * 5 
  4. // compose會(huì)生成一個(gè)新的函數(shù), 接收的參數(shù)全部傳給add1, 然后add1的返回值傳給mul5(注意注意!, mul5的參數(shù)個(gè)數(shù)只能有一個(gè)!!!), 然后compose生成的新的函數(shù)的返回值就是mul5的返回值. 
  5. compose(mul5, add1)(2)  

函數(shù)組合非常強(qiáng)大, 能夠通過(guò)組合的方式來(lái)生成新的函數(shù), 這是非常爽的. 如果你運(yùn)用靈活, 會(huì)極大的減少你的代碼量(如果不能減少別噴我啊), compose的實(shí)現(xiàn)在上面提到的三個(gè)庫(kù)中都有實(shí)現(xiàn).

0x04 聲明式與命令式風(fēng)格

命令式的風(fēng)格讓我們通過(guò)代碼引導(dǎo)機(jī)器, 讓機(jī)器一步一步完成我們要的任務(wù); 而聲明式則是直接告訴機(jī)器我要做啥, 更直觀(guān).

  1. //命令式 
  2. var persons = [...] 
  3. for (var i = 0; persons.length; ++i) { 
  4.   persons[i] = persons[i].toUppercase() 
  5. } 
  6.  
  7. //聲明式 
  8. var persons = [...] 
  9. persons.map(person => person.toUppercase())  

0x05 Point free風(fēng)格

  1. // 假定如果  
  2. let map = fn => list => list.map(fn); 
  3. let add = (a, b) => a + b; 
  4.  
  5. // 函數(shù)incrementAll不是point free 風(fēng)格 
  6. // 因?yàn)檫@里提到了numbers參數(shù), 需要給出一個(gè)命名. 
  7. // 這樣定義函數(shù)會(huì)導(dǎo)致我們需要多命名一個(gè)變量. 麻煩! 
  8. let incrementAll = (numbers) => map(add(1))(numbers); 
  9.  
  10. // Point free風(fēng)格的定義方法 
  11. // 假設(shè)add被柯里化過(guò)了 
  12. let incrementAll = map(add(1))  

現(xiàn)在是推薦使用point free風(fēng)格的代碼(定義函數(shù)時(shí)), 這會(huì)減少我們不必要的命名. 多用這種風(fēng)格哦!

0x06 容器(Functor)

容器代表了一個(gè)值, 一個(gè)任意值. 他就好像是函數(shù)式編程里的變量,函數(shù)的一個(gè)鎧甲.可以讓你的變量,函數(shù)在工程的戰(zhàn)場(chǎng)中所向披靡!

  1. var Container = function(x) { 
  2.   this.__value = x; 
  3. } 
  4.  
  5. Container.of = x => new Container(x); 
  6.  
  7. Container.prototype.map = function(f){ 
  8.   return Container.of(f(this.__value)) 
  9. } 
  10.  
  11. Container.of(3).map(x => x+1).map(x => x*5) 
  12. // of用來(lái)構(gòu)建容器, map用來(lái)變換容器 
  13. // Functor可以做很多很多事情, 具體的? 往下介紹.  
  1. // Maybe就是在普通容器上新增了一個(gè)檢查空值的行為.  
  2. var Maybe = function(x) { 
  3.   this.__value = x; 
  4. } 
  5.  
  6. Maybe.of = function(x) { 
  7.   return new Maybe(x); 
  8. } 
  9.  
  10. Maybe.prototype.map = function(f) { 
  11.   return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value)); 
  12. } 
  13.  
  14. Maybe.prototype.isNothing = function() { 
  15.   return (this.__value === null || this.__value === undefined); 
  16. } 
  17.  
  18. // 例子, 如果name是空的話(huà)就會(huì)輸出空了 
  19. var functor = Maybe.of({name: ‘mrcode'}) 
  20. functor 
  21.     .map(value => value.age) 
  22.     .map(String.prototype.upperCase) 
  23.     .map(value => console.log(value))  

這個(gè)Maybe到底有啥用呢? 就是空值檢測(cè), 看上面的例子, 如果不進(jìn)行判空的話(huà), 第二個(gè)map就會(huì)調(diào)用String.prototype.upperCase函數(shù), 會(huì)拋出異常的, 怕了吧? :P, 而且, 現(xiàn)在很多語(yǔ)言,swift等都添加了類(lèi)似的支持. optional

Maybe只能判空, 但是Either才是真正的處理錯(cuò)誤的容器, Either有兩個(gè)子類(lèi), Left和Right.

  1. // Promise是通過(guò)catch方法來(lái)接收錯(cuò)誤的 如: 
  2. doSomething() 
  3.     .then(async1) 
  4.     .then(async2) 
  5.     .catch(e => console.log(e)); 
  6.  
  7. // 完全一樣     
  8. var Left = function(x) { 
  9.   this.__value = x; 
  10. } 
  11. var Right = function(x) { 
  12.   this.__value = x; 
  13. } 
  14.  
  15. // 完全一樣 
  16. Left.of = function(x) { 
  17.   return new Left(x); 
  18. } 
  19. Right.of = function(x) { 
  20.   return new Right(x); 
  21. } 
  22.  
  23. // 這里不同！??！ 
  24. Left.prototype.map = function(f) { 
  25.   return this; 
  26. } 
  27. Right.prototype.map = function(f) { 
  28.   return Right.of(f(this.__value)); 
  29. } 
  30.  
  31. // 應(yīng)用: 
  32. var getAge = user => user.age ? Right.of(user.age) : Left.of("ERROR!") 
  33. getAge({name: 'stark', age: '21'}).map(age => 'Age is ' + age); 
  34. //=> Right('Age is 21') 
  35.  
  36. getAge({name: 'stark'}).map(age => 'Age is ' + age); 
  37. //=> Left('ERROR!')  

Left會(huì)跳過(guò)所有執(zhí)行過(guò)程, 直達(dá)結(jié)果, 這就好像Right是流程圖里一個(gè)又一個(gè)指向下一個(gè)任務(wù)的箭頭, 而Left直接指向了結(jié)果, 是錯(cuò)誤的結(jié)果.

0x07 IO

誒, 函數(shù)式編程里, 涉及到IO總是讓人尷尬的, 藍(lán)瘦的很..幸好, 有一種叫做IO的東西專(zhuān)門(mén)處理IO這種東西(別嫌繞哈), 看代碼,

  1. // 沒(méi)毛病 
  2. var IO = function(f) { 
  3.     this.__value = f; 
  4. } 
  5.  
  6. // ??? 看不懂, 待會(huì)解釋.. 
  7. IO.of = x => new IO(_ => x); 
  8.  
  9. // ??? 這是啥子鬼???? 
  10. IO.prototype.map = function(f) { 
  11.     return new IO(compose(f, this.__value)) 
  12. };  

權(quán)威解答: 這里的IO里存的是一個(gè)函數(shù), 包裹了外部環(huán)境變量的函數(shù), 我們傳入了一個(gè)函數(shù), 這個(gè)函數(shù)里包含了實(shí)際的值,會(huì)進(jìn)行IO操作. 我們把不純的IO操作放到了這個(gè)函數(shù)里, 總體上看, 我們的IO對(duì)象, 是不會(huì)執(zhí)行這些不純的操作的. 它依然是純的, 因?yàn)镮O操作壓根就沒(méi)執(zhí)行內(nèi)部包含的函數(shù), 這個(gè)函數(shù)是外部調(diào)用者去執(zhí)行的. 也就是說(shuō), 不純的操作是外部的人干的, 和我們的IO對(duì)象一丟丟關(guān)系都木有!(干得漂亮!) 看一個(gè)例子.

  1. var io_document = new IO(_ => window.document); 
  2. io_document.map(function(doc){ return doc.title }); 
  3. // 得到IO(documen.title)  

科普: 這里你沒(méi)有得到document.title, 你得到的僅僅是一個(gè)會(huì)返回document.title的一個(gè)函數(shù), 這個(gè)函數(shù)是不純的, 但是執(zhí)行不是由上面的代碼執(zhí)行的, 鍋在調(diào)用函數(shù)的人身上! 上面的代碼依然是'純'的!

0x08 Monad

看這個(gè)部分的時(shí)候建議看一下IO的實(shí)現(xiàn), 好好理解一下, 我知道有點(diǎn)燒腦, 但是看一下沒(méi)壞處!玩過(guò)Promise的都知道, Promise.then傳進(jìn)去的函數(shù)可以返回一個(gè)新的Promise. Promise就是Monad.

0x09 函數(shù)式編程的應(yīng)用

react中的純組件

  1. // 固定的輸入得到固定的輸出 純組件極大的增加了react的靈活程度 
  2. // app 的狀態(tài)交給一些狀態(tài)機(jī)管理 比如redux 
  3. var Text = props => ( 
  4.     <div style={props.style}>{props.text}</div> 
  5. )  

redux中的reducer

  1. // 輸入當(dāng)前狀態(tài)和action, 輸出nowState 
  2. reducer(currentState, action) => newState  

0x10 總結(jié)一下

確實(shí)是這樣, 不總結(jié)的話(huà)就不像是一篇文章了, 還是總結(jié)下吧:

  • 純函數(shù)的概念以及函數(shù)柯里化和函數(shù)的組合
  • 容器概念, Container和Maybe, Either的派生Left,Right, IO作用.
  • 函數(shù)式編程的應(yīng)用

參考文章

JavaScript函數(shù)式編程3

責(zé)任編輯：龐桂玉 來(lái)源： segmentfault
JavaScript函數(shù)式編程
相關(guān)推薦

2017-06-08 14:25:46

Kotlin函數(shù)

2009-09-14 19:21:36

Javascript透

2010-06-22 13:32:26

函數(shù)式編程JavaScript

2017-03-22 11:22:04

JavaScript函數(shù)式編程

2017-10-26 08:53:38

前端JavaScript函數(shù)式編程

2016-08-11 10:11:07

JavaScript函數(shù)編程

2016-08-11 10:34:37

Javascript函數(shù)編程

2023-10-07 00:01:02

Java函數(shù)

2021-07-27 22:56:00

JavaScript編程開(kāi)發(fā)

2017-10-10 15:45:51

OOP開(kāi)發(fā)JavaScript

2012-03-21 09:30:11

ibmdw

2020-09-23 16:07:52

JavaScript函數(shù)柯里化

2021-03-03 10:00:52

Python函數(shù)Python基礎(chǔ)

2021-03-29 15:32:31

Python函數(shù)參數(shù)

2025-03-19 10:26:12

Python參數(shù)開(kāi)發(fā)

2016-09-06 21:37:41

2011-03-07 09:41:10

JavaScript

2009-07-24 17:30:37

Javascript閉

2021-02-07 22:59:55

JavaScript編程方法鏈

2025-04-23 08:55:00

函數(shù)編程JavaScript
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)