文章說明:本文是個人學習拉勾大前端高薪訓練營的學習筆記和思考總結,學徒之心,分享之意,如若有誤,敬請指正,
一:認識函式式編程
1.什么是函式式編程?
(1):函式式編程是一種編程范式
函式式編程(Functional Programming, FP)是編程范式之一,我們常聽說的編程范式還有面向程序編程、面向物件編程,我們在分別使用這三種編程范式進行思考和編碼時,思維方式和編碼結果都會非常的不同,如下案例:
// 1.面向程序(關注點:step1、step2、...、stepN)
let num1 = 2
let num2 = 3
let sum = num1 + num2
console.log(sum)
// 2.函式式編程(關注點:輸入input、輸出output、映射關系f)
function add (n1, n2) {
return n1 + n2
}
let sum = add(2, 3)
console.log(sum)
// 3.面向物件(關注點:物件object、屬性Attribute、行為behavior)
class Math {
add (n1, n2) {
return n1 + n2
}
}
let math = new Math()
let sum = math.add(2, 3)
console.log(sum)
(2):函式式編程這種編程范式的思維方式
把現實世界的事物和事物之間的聯系抽象到程式世界(對運算程序進行抽象),
- 程式的本質:根據輸入通過某種運算獲得相應的輸出,程式開發程序中會涉及很多有輸入和輸出的函式
- x -> f(聯系、映射) -> y,y=f(x)
函式式編程中的函式指的不是程式中的函式(方法),而是數學中的函式即映射關系,例如:y= sin(x),x和y的關系 - 相同的輸入始終要得到相同的輸出(純函式)
- 函式式編程用來描述資料(函式)之間的映射
二:函式的相關復習
安利一波我的另一篇博客,JavaScript函式,從入門到精通,
1.函式是一等公民
簡單來說,在JavaScript中,函式是物件,它可以:
- 存盤在變數中
- 作為引數
- 作為回傳值
2.高階函式
如果我們把只能接收原始型別(也叫 值型別 / 基本型別)和一般型別物件(非函式型別)作為引數或者回傳值的函式稱為普通函式,那么我們就可以把可以接收函式型別物件的函式作為引數或者回傳值的函式稱之為比普通函式更高階的高階函式,高階函式之高階也就在于此,“ 普通函式 ”只能把資料作為函式的輸入輸出,而高階函式除了可以把資料作為函式的輸入輸出之外,還可以把處理邏輯(函式)作為函式的輸入輸出,
原理上也就是因為JavaScript語言擁有頭等函式,函式是物件,可以作為變數傳遞,可以作為引數和回傳值,
說明示例
// 高階函式,fn函式作為引數
function filter (array, fn) {
let results = []
for (let i = 0; i < array.length; i++) {
if (fn(array[i])) {
results.push(array[i])
}
}
return results
}
3.閉包
閉包是JavaScript亙古不變的話題,訓練營中講的對,但不夠深入,想深入理解閉包的小伙伴推薦可以看看《JavaScript忍者秘籍(第二版)》函式篇章,當然也可以先閱讀我在學習完該篇章之后做的學習筆記JavaScript函式,從入門到精通,
這里簡單來說閉包的本質:函式在執行的時候會放到一個執行堆疊上,但奇葩的是JavaScript會把其區域變數放到堆里,在函式執行完畢后,函式會從執行堆疊上彈出,如果其存盤在堆上的區域變數未被外部變數參考則會被回收,但如果被參考了,則無法被回收,此時就形成了閉包Closure,如下簡單說明案例:
function makePower (power) {
return function (x) {
return Math.pow(x, power)
}
}
let power2 = makePower(2)
// makePower函式執行完后從呼叫堆疊中彈出,但power2指向內部函式,內部函式又指向power變數,這導致了makePower函式在堆中存盤變數的物件不能被回收,進而形成了閉包,就是這么簡單,
let power3 = makePower(3)
三:函式式編程的基礎
1.純函式
純函式概念
概念
相同的輸入永遠會得到相同的輸出,而且沒有任何可觀察的副作用,
個人理解
- 純函式是編碼時符合數學函式 f( input ) = output 的函式,
- 它的輸入可控,只依賴于傳遞的引數(意味著不能讀外部資料),
- 它的輸出可控,純函式運行結束后,除了回傳值外,不會對運行環境產生其它的影響(意味著不能寫外部資料),
- 它的輸入輸出之間的映射關系可控,相同的輸入永遠會得到相同的輸出(意味著不能使用亂數等,此處留個疑惑 ?),
純函式和不純函式示例
let numbers = [1, 2, 3, 4, 5]
// 陣列的slice方法是一個純函式
numbers.slice(0, 3) // => [1, 2, 3]
numbers.slice(0, 3) // => [1, 2, 3]
numbers.slice(0, 3) // => [1, 2, 3]
// 陣列的splice方法是一個不純的函式
numbers.splice(0, 3) // => [1, 2, 3]
numbers.splice(0, 3) // => [4, 5]
numbers.splice(0, 3) // => []
// 相同的輸入,產生了不同的輸出,不純原因具體分析:
// 1.輸入不可控,讀了外部變數numbers,
// 2.輸出不可控,寫了外部變數numbers,
純函式優點
由以上純函式的特征,我們可以很容易的得出使用純函式的優點:
- 可快取
- 易測驗
- 利于并行處理
可快取
相同的輸入始終得到相同的輸出,意味著可以使用 key = input,value = output 的鍵值對把輸出存盤起來,
易測驗
純函式的運行不會讀寫外部資料,不依賴背景關系環境,意味著很容易撰寫單元測驗,
并行處理
純函式的運行不會讀寫外部資料,意味著多執行緒運行時( ES6的Web Worker能為JavaScript創造多執行緒環境)不會互相干擾,有利于程式的并行處理,
2.函式的柯里化
什么是函式的柯里化?
函式的柯里化是指當一個函式有多個引數的時候先傳遞一部分引數呼叫它(這部分引數以后永遠不變),然后回傳一個新的函式接收剩余的引數,它并不是一個復雜的東西,其實很好理解,直接看個示例吧:
// 普通純函式
function checkAge(min, age) {
return age >= min
}
checkAge(18, 24)
// checkAge函式柯里化
function checkAge(min) {
return function (age) {
return age >= min
}
}
let checkAge18 = checkAge(18)
let checkAge = min => (age => age >= min)// checkAge柯里化,ES6 寫法
由上示例我們可以這樣理解,函式的柯里化其實就是利用閉包的原理對原函式進行引數提取,把一個帶有多個引數的函式變成一個由引數拆分然后嵌套的嵌套函式,就像番薯(一層皮)變成了洋蔥(很多層皮),
函式柯里化的作用
(1)可以從具有“ 配置型 ”引數的函式中獲取具體配置的函式
由于函式的柯里化可以對引數進行提取,那么我們就可以利用函式的柯里化把一些函式的配置型引數給提取出來,這樣新得到的函式由于閉包的原理就可以實作原函式的配置型引數被持久化并且外部不能更改的效果,案例就如上示例中,由checkAge函式獲得checkAge18這個函式,,
(2)獲取一元函式,以備函式的組合
這里指的一元函式指一個引數的函式,這一條可以算是1的特殊情況,就是把最后一個引數之前的所有引數都視為最后一個引數的配置項,通常使用目的是為了配合函式的組合,把原函式柯里化成一元函式以便對一個資料進行流式處理,案例會在下述的函陣列合中給出,
3.函式的組合
什么是函式的組合?
如果一個函式要經過多個函式處理才能得到最終值,這個時候可以把中間程序的函式合并成一個函式(符合Point free模式),這個合并的程序我們就叫做函式的組合,簡單說明示例如下:
- 需求:獲取陣列的最后一個元素再轉換成大寫字母
- 定義公用的資料和基本函式
const arr = [1, 2, 3, 4];
function first (arr) {
return arr[0]
}
function reverse (arr) {
return arr.reverse()
}
function toUpper (arr) {
return arr.toUpperCase();
}
- 實作需求方式1:函式不組合實作
console.log(toUpper(first(reverse(arr))))
- 實作需求方式2:函陣列合實作
// 定義組合函式
function compose (f, g, h) {
return function (arr) {
return f(g(h(arr))
}
}
// 從右到左運行
let last = compose(toUpper, first, reverse)
console.log(last(arr))
除錯組合函式
由上可知,我們在對一個資料進行流式處理時把中間程序給屏蔽了,這時如果我們呼叫組合函式出了問題時,我們就會需要找出問題出在哪一步,所以我們需要封裝一個trace函式來提供這些資訊,實作和使用示例如下:
// 這也可以視為trace(step, data)函式柯里化后的函式
const trace = function(step) {
return function(data) {
console.log(`${step} error, data = ${data}`)
}
}
let last = compose(toUpper, first, trace('reverse之后'), reverse)
什么時候使用函式的組合?
在我們對某一個資料進行流式處理,只需要關注總的運算結果,而不需要關注中間運算結果時,我們就可以使用函式的組合,
4.函式式編程庫
lodash
lodash是一個一致性、模塊化、高性能的 JavaScript 實用工具庫,提供了封裝好的柯里化、組合函式等函式,對一個庫此處不多BB,自行搜索查看檔案,
folktale
Folktale是一個JavaScript函式式編程的標準庫,提供了封裝好的Task函子等函式,對一個庫此處不多BB,自行搜索查看檔案,
四:函子
1.認識函子
認識函子
- 它是一個容器:包含值和值的變形關系(這個變形關系就是函式)
- 它是一個特殊的容器:它通過一個普通的物件來實作,該物件具有map方法,map方法可以運行一個函式對值進行處理,
理解函子
根據上述函子的概念,我們通過以下四個步驟來模擬函子的發展史進而逐步實作一個函子,
step1:需要把變形關系作為引數
在使用函式式編程時,碰到這么一種場景,我們對一個資料會有很多種變形關系,想到要想把這個變形關系作為一個可控制的動態輸入項,我們可能會寫出這樣的代碼:
function container( fn ){
const value = 'xx';
return fn(value);
}
step2:抽取value
function Container( value ){
return function (fn) {
return fn(value)
}
}
step3:能夠讀取當前值
加上一個getVlaue函式來獲取閉包的值,
function Container( value ){
const getValue = () => {
return value
}
const map = (fn) => {
return fn(value)
}
return {
getValue,
map
}
}
是不是恍然大悟,這就是函子的靈魂,Container的實體,它是一個特殊的容器物件,能夠讀取值(getValue),能夠變形(map),
step4:使用class封裝
既然上面都是對一個資料有不同的行為,那么完全可以使用面向物件思維并使用class封裝,
class Container {
constructor(value){
this._value = value
}
map(fn){
this._value = fn(_value)
}
}
這不就來了嗎,所謂的函子,難嗎?不難!
規范化和增強函子
為了更符合規范,更好的使用,接下來對上面這個函子進行規范化和增強:
Pointed函子
- Pointed 函子是實作了 of 靜態方法的函子,
- of 方法是為了避免使用 new 來創建物件,更深層的含義是 of 方法用來把值放到背景關系Context(把值放到容器中,使用 map 來處理值)
class Container {
static of (value) {
return new Container(value)
}
constructor(value){
this._value = value
}
map(fn){
this._value = fn(_value)
}
}
// 測驗
const container = Container.of(2)
console.log(container.map(x => x+2))
console.log(container.map(x => x-1))
支持鏈式呼叫
- 作用:支持鏈式呼叫后,函子就可以用來做容器所管理的那個資料的處理流水線了,
- 實作方式:map方法回傳一個新的函子
class Container {
static of (value) {
return new Container(value)
}
constructor(value){
this._value = value
}
map(fn){
return Container.of(this._value)
}
}
// 測驗
const container = Container.of(2)
container.map(x => x+2)// => container._value = 4
.map(x => x-1)// => container._value = 3
2.管理一般資料的函子
函子既然是一個容器,最基本的功能就是管理一個一般資料(原始型別 / 非函式型別物件)了,上面的示例也是一個管理一般資料的函子,下面再說說管理一般資料時,兩種對普通函子增強的函子,
MayBe函子
- 優點:可以對外部的空值情況做處理,
- 缺點:函子在鏈式呼叫時,我們很難確認是哪一步產生的空值問題,
實作示例
class MayBe{
static of (value) {
return new MayBe(value)
}
constructor(value){
this._value = value
}
map(fn){
// 函子管理的資料出現空值時視為例外出現,不再呼叫傳入的變形關系對資料進行變形而是直接把空值傳遞下去,
return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value)) :
}
isNothing () {
return this._value === null || this._value === undefined
}
}
// 測驗
const container = MayBe.of(null)
container.map(x => null)// => null
.map(x => x-1)// => null
Either函子
- 優點1:map(fn)中的fn如果做了例外處理則會顯得不純,交給Either函子之后,fn就可以撰寫為純函式,
- 優點2:在鏈式呼叫時,Either函子對這條資料處理流水線做統一的例外處理, 同時由于記錄了例外資訊,可以找到是哪一步出了問題方便除錯解決,
實作示例
class Stop{
static of (value) {
return new Stop(value)
}
constructor (value) {
this._value = value
}
map (fn) {
return this
}
}
class GoAhead{
static of (value) {
return new GoAhead(value)
}
constructor (value) {
this._value = value
}
map(fn) {
return GoAhead.of(fn(this._value))
}
}
function Either(data){
try{
return GoAhead.of(data)
}catch(e){
return Stop({error: e.message})
}
}
const either = Either(2)
either.map(x => x + 2) // either._value = 4
.map(x => x / 0) // either._value = errorObj
.map(x => x - 1) // either._value = errorObj
3.管理函式物件的函子
函子作為一個容器可以管理一般資料,也可以管理一個函式物件,
這時候很容易會跑偏,我們可能會想到,通過管理一個函式物件我們就可以實作傳入函式運行時的切面aop,此時可以對map(fn)中的這個fn函式物件運行前做前處理和或者后處理,比如驗證權限,列印日志等,
但是通常實作這類需求,我們使用函子只會是多此一舉,因為我們始終要認清一點,封裝成函子的初心就是管理一個資料及其未知的變換,在這里我們完全沒必要對驗證權限或者列印日志的函式進行變換,所以使用函子做函式運行aop的思想是錯誤的,
因為我們通常不必要對一個函式做變換,之所以會有管理函式物件的函子,是因為有時我們需要呼叫一個函式才能獲取函子管理的資料,而我們又希望它能惰性執行,這時才產生了這么一個函子,它表面上看起來是管理一個函式物件,實際上管理的是其運行后的值,通常這時候會和map函式傳進來的函式一起進行函陣列合,如下IO函子:
IO函子
const fp = require('lodash/fp')
class IO {
static of (x) {
return new IO(function () {
return x
}
)
}
constructor (fn) {
this._value = fn
}
map (fn) {
return new IO(fp.flowRight(fn, this._value)) // flowRight是lodash提供的函陣列合方法
}
}
let io = IO.of(process)
io.map(p => p.execPath)
console.log(io._value())// 實際運行是io._value() -> fp.flowRight(p => p.execPath, process)()
如上IO函子,管理的就是fp.flowRight(p => p.execPath, process)()這么一個資料流,它能把process這個函式延期執行,而后再把資料傳遞給p => p.execPath這個箭頭函式處理,至于process延遲執行的好處,1是把不純的操作交給了呼叫者來處理(?),2是具備了類似延遲加載的好處(畢竟是IO處理),
4.管理函子的函子
1.嵌套函子
在使用 IO 函子的時候,如果我們寫出如下代碼:
const fs = require('fs')
const fp = require('lodash/fp')
let readFile = function (filename) {
return new IO(function() {
return fs.readFileSync(filename, 'utf-8')
})
}
let print = function(x) {
return new IO(function() {
console.log(x)
return x
})
}
let cat = fp.flowRight(print, readFile)
let r1 = cat('package.json')
let r2 = r1._value()
let data= r2._value()
console.log(data)
上述代碼分析如下:
-
let cat = fp.flowRight(print, readFile):函陣列合獲得cat,
-
let r1 = cat(‘package.json’):組合函式呼叫,按照從右到左的順序,print函式呼叫回傳一個管理readFile函式呼叫回傳一個管理同步讀取檔案內容的這個函式物件的IO函子的IO函子,r1用偽代碼表示即:printIO( readFileIO ( readFile(‘package.json’) ) ),
-
let r2 = r1._value():獲取printIO管理的_value,也就是函式function() {console.log(x)return x},這里使用了閉包,x指readFile傳過來的IO函子,呼叫后回傳x獲得其管理的IO函子,r2用偽代碼表示即:readFileIO ( readFile(‘package.json’) ) ,
-
let data= r2._value():獲取readFileIO管理的_value,也就是函式function() {return fs.readFileSync(filename, ‘utf-8’)},呼叫后獲得后得到檔案內容,
缺點
我們使用函子以及函子嵌套都是對一個資料進行變換,需要的是最終變換后的值而不關注其中變換程序中的各個函子管理的值,所以上述取值方式不可取,
2.把嵌套函子拍平 -> 單子Monad
- Monad 函子是可以變扁的 Pointed 函子,IO(IO(x))
- 一個函子如果具有 join 和 of 兩個方法并遵守一些定律就是一個 Monad
const fp = require('lodash/fp')
// IO Monad
class IO {
static of (x) {
return new IO(function () {
return x
})
}
constructor (fn) {
this._value = fn
}
map (fn) {
return new IO(fp.flowRight(fn, this._value))
}
join () {
return this._value()
}
flatMap (fn) {
return this.map(fn).join()
}
}
let readFile = function (filename) {
return new IO(function() {
return fs.readFileSync(filename, 'utf-8')
})
}
let print = function(x) {
return new IO(function() {
console.log(x)
return x
})
}
let r = readFile('package.json')
.map(fp.toUpper)
.flatMap(print)
.join()
使用Monad單子后,就沒有了上面說的函子嵌套問題導致的取值困難,可以直接拿到最終值,這里的分析沒有上一例嵌套時的復雜,就不多做贅述了(寫累了),如果看官有問題,歡迎評論區提問交流,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/193143.html
標籤:其他
