關(guān)于譯者：這是一個流淌著滬江血液的純粹工程：認(rèn)真，是 HTML 最堅實的梁柱；分享，是 CSS 里最閃耀的一瞥；總結(jié)，是 JavaScript 中最嚴(yán)謹(jǐn)?shù)倪壿?。?jīng)過捶打磨練，成就了本書的中文版。本書包含了函數(shù)式編程之精髓，希望可以幫助大家在學(xué)習(xí)函數(shù)式編程的道路上走的更順暢。比心。
譯者團(tuán)隊（排名不分先后）：阿希、blueken、brucecham、cfanlife、dail、kyoko-df、l3ve、lilins、LittlePineapple、MatildaJin、冬青、pobusama、Cherry、蘿卜、vavd317、vivaxy、萌萌、zhouyao
第 10 章：異步的函數(shù)式（下）
響應(yīng)式函數(shù)式編程
為了理解如何在2個值之間創(chuàng)建和使用惰性的映射，我們需要去抽象我們對列表（數(shù)組）的想法。
讓我們來想象一個智能的數(shù)組，不只是簡單地獲得值，還是一個懶惰地接受和響應(yīng)（也就是“反應(yīng)”）值的數(shù)組?？紤]下：
var a = new LazyArray();
var b = a.map( function double(v){
return v * 2;
} );
setInterval( function everySecond(){
a.push( Math.random() );
}, 1000 );
至此，這段代碼的數(shù)組和普通的沒有什么區(qū)別。唯一不同的是在我們執(zhí)行 map(..) 來映射數(shù)組 a 生成數(shù)組 b 之后，定時器在 a 里面添加隨機(jī)的值。
但是這個虛構(gòu)的 LazyArray 有點不同，它假設(shè)了值可以隨時的一個一個添加進(jìn)去。就像隨時可以 push(..) 你想要的值一樣?？梢哉f b 就是一個惰性映射 a 最終值的數(shù)組。
此外，當(dāng) a 或者 b 改變時，我們不需要確切地保存里面的值，這個特殊的數(shù)組將會保存它所需的值。所以這些數(shù)組不會隨著時間而占用更多的內(nèi)存，這是 惰性數(shù)據(jù)結(jié)構(gòu)和懶操作的重要特點。事實上，它看起來不像數(shù)組，更像是buffer（緩沖區(qū)）。
普通的數(shù)組是積極的，所以它會立馬保存所有它的值。"惰性數(shù)組" 的值則會延遲保存。
由于我們不一定要知道 a 什么時候添加了新的值，所以另一個關(guān)鍵就是我們需要有去監(jiān)聽 b 并在有新值的時候通知它的能力。我們可以想象下監(jiān)聽器是這樣的：
b.listen( function onValue(v){
console.log( v );
} );
b 是反應(yīng)性的，因為它被設(shè)置為當(dāng) a 有值添加時進(jìn)行反應(yīng)。函數(shù)式編程操作當(dāng)中的 map(..) 是把數(shù)據(jù)源 a 里面的所有值轉(zhuǎn)移到目標(biāo) b 里。每次映射操作都是我們使用同步函數(shù)式編程進(jìn)行單值建模的過程，但是接下來我們將讓這種操作變得可以響應(yīng)式執(zhí)行。
注意： 最常用到這些函數(shù)式編程的是響應(yīng)式函數(shù)式編程(FRP)。我故意避開這個術(shù)語是因為一個有關(guān)于 FP + Reactive 是否真的構(gòu)成 FRP 的辯論。我們不會全面深入了解 FRP 的所有含義，所以我會繼續(xù)稱之為響應(yīng)式函數(shù)式編程?；蛘?，如果你不會感覺那么困惑，也可以稱之為事件機(jī)制函數(shù)式編程。
我們可以認(rèn)為 a 是生成值的而 b 則是去消費這些值的。所以為了可讀性，我們得重新整理下這段代碼，讓問題歸結(jié)于 生產(chǎn)者 和 消費者。
// 生產(chǎn)者:
var a = new LazyArray();
setInterval( function everySecond(){
a.push( Math.random() );
}, 1000 );
// **************************
// 消費者:
var b = a.map( function double(v){
return v * 2;
} );
b.listen( function onValue(v){
console.log( v );
} );
a 是一個行為本質(zhì)上很像數(shù)據(jù)流的生產(chǎn)者。我們可以把每個值賦給 a 當(dāng)作一個事件。map(..) 操作會觸發(fā) b 上面的 listen(..) 事件來消費新的值。
我們分離 生產(chǎn)者 和 消費者 的相關(guān)代碼，是因為我們的代碼應(yīng)該各司其職。這樣的代碼組織可以很大程度上提高代碼的可讀性和維護(hù)性。
聲明式的時間
我們應(yīng)該非常謹(jǐn)慎地討論如何介紹時間狀態(tài)。具體來說，正如 promise 從單個異步操作中抽離出我們所擔(dān)心的時間狀態(tài)，響應(yīng)式函數(shù)式編程從一系列的值/操作中抽離（分割）了時間狀態(tài)。
從 a （生產(chǎn)者）的角度來說，唯一與時間相關(guān)的就是我們手動調(diào)用的 setInterval(..) 循環(huán)。但它只是為了示范。
想象下 a 可以被綁定上一些其他的事件源，比如說用戶的鼠標(biāo)點擊事件和鍵盤按鍵事件，服務(wù)端來的 websocket 消息等。在這些情況下，a 沒必要關(guān)注自己的時間狀態(tài)。每當(dāng)值準(zhǔn)備好，它就只是一個與值連接的無時態(tài)管道。
從 b （消費者）的角度來說，我們不用知道或者關(guān)注 a 里面的值在何時何地來的。事實上，所有的值都已經(jīng)存在。我們只關(guān)注是否無論何時都能取到那些值?；蛘哒f，map(..) 的轉(zhuǎn)換操作是一個無時態(tài)（惰性）的建模過程。
時間 與 a 和 b 之間的關(guān)系是聲明式的，不是命令式的。
以 operations-over-time 這種方式來組織值可能不是很有效。讓我們來對比下相同的功能如何用命令式來表示：
// 生產(chǎn)者:
var a = {
onValue(v){
b.onValue( v );
}
};
setInterval( function everySecond(){
a.onValue( Math.random() );
}, 1000 );
// **************************
// 消費者:
var b = {
map(v){
return v * 2;
},
onValue(v){
v = this.map( v );
console.log( v );
}
};
這似乎很微妙，但這就是存在于命令式版本的代碼和之前聲明式的版本之間一個很重要的不同點，除了 b.onValue(..) 需要自己去調(diào)用 this.map(..) 之外。在之前的代碼中， b 從 a 當(dāng)中去拉取，但是在這個代碼中，a 推送給 b。換句話說，把 b = a.map(..) 替換成 b.onValue(v)。
在上面的命令式代碼中，以消費者的角度來說它并不清楚 v 從哪里來。此外命令式強(qiáng)硬的把代碼 b.onValue(..) 夾雜在生產(chǎn)者 a 的邏輯里，這有點違反了關(guān)注點分離原則。這將會讓分離生產(chǎn)者和消費者變得困難。
相比之下，在之前的代碼中，b = a.map(..) 表示了 b 的值來源于 a ，對于如同抽象事件流的數(shù)據(jù)源 a，我們不需要關(guān)心。我們可以 確信 任何來自于 a 到 b 里的值都會通過 map(..) 操作。
映射之外的東西
為了方便，我們已經(jīng)說明了通過隨著時間一次一次的用 map(..) 來綁定 a 和 b 的概念。其實我們許多其他的函數(shù)式編程操作也可以做到這種效果。
思考下：
var b = a.filter( function isOdd(v) {
return v % 2 == 1;
} );
b.listen( function onlyOdds(v){
console.log( "Odd:", v );
} );
這里可以看到 a 的值肯定會通過 isOdd(..) 賦值給 b。
即使是 reduce(..) 也可以持續(xù)的運行：
var b = a.reduce( function sum(total,v){
return total + v;
} );
b.listen( function runningTotal(v){
console.log( "New current total:", v );
} );
因為我們調(diào)用 reduce(..) 是沒有給具體 initialValue 的值，無論是 sum(..) 或者 runningTotal(..) 都會等到有 2 個來自 a 的參數(shù)時才會被調(diào)用。
這段代碼暗示了在 reduction 里面有一個 內(nèi)存空間， 每當(dāng)有新的值進(jìn)來的時候，sum(..) 才會帶上第一個參數(shù) total 和第二個參數(shù) v被調(diào)用。
其他的函數(shù)式編程操作會在內(nèi)部作用域請求一個緩存區(qū)，比如說 unique(..) 可以追蹤每一個它訪問過的值。
Observables
希望現(xiàn)在你可以察覺到響應(yīng)式，事件式，類數(shù)組結(jié)構(gòu)的數(shù)據(jù)的重要性，就像我們虛構(gòu)出來的 LazyArray 一樣。值得高興的是，這類的數(shù)據(jù)結(jié)構(gòu)已經(jīng)存在的了，它就叫 observable。
注意： 只是做些假設(shè)（希望）：接下來的討論只是簡要的介紹 observables。這是一個需要我們花時間去探究的深層次話題。但是如果你理解本文中的輕量級函數(shù)式編程，并且知道如何通過函數(shù)式編程的原理來構(gòu)建異步的話，那么接著學(xué)習(xí) observables 將會變得得心應(yīng)手。
現(xiàn)在已經(jīng)有各種各樣的 Observables 的庫類， 最出名的是 RxJS 和 Most。在寫這篇文章的時候，正好有一個直接向 JS 里添加 observables 的建議，就像 promise。為了演示，我們將用 RxJS 風(fēng)格的 Observables 來完成下面的例子。
這是我們一個較早的響應(yīng)式的例子，但是用 Observables 來代替 LazyArray：
// 生產(chǎn)者:
var a = new Rx.Subject();
setInterval( function everySecond(){
a.next( Math.random() );
}, 1000 );
// **************************
// 消費者:
var b = a.map( function double(v){
return v * 2;
} );
b.subscribe( function onValue(v){
console.log( v );
} );
在 RxJS 中，一個 Observer 訂閱一個 Observable。如果你把 Observer 和 Observable 的功能結(jié)合到一起，那就會得到一個 Subject。因此，為了保持代碼的簡潔，我們把 a 構(gòu)建成一個 Subject，所以我們可以調(diào)用它的 next(..) 方法來添加值（事件）到他的數(shù)據(jù)流里。
如果我們要讓 Observer 和 Observable 保持分離：
// 生產(chǎn)者:
var a = Rx.Observable.create( function onObserve(observer){
setInterval( function everySecond(){
observer.next( Math.random() );
}, 1000 );
} );
在這個代碼里，a 是 Observable，毫無疑問，observer 就是獨立的 observer，它可以去“觀察”一些事件（比如我們的setInterval(..)循環(huán)），然后我們使用它的 next(..) 方法來發(fā)送一些事件到 observable a 的流里。
除了 map(..)，RxJS 還定義了超過 100 個可以在有新值添加時才觸發(fā)的方法。就像數(shù)組一樣。每個 Observable 的方法都會返回一個新的 Observable，意味著他們是鏈?zhǔn)降?。如果一個方法被調(diào)用，則它的返回值應(yīng)該由輸入的 Observable 去返回，然后觸發(fā)到輸出的 Observable里，否則拋棄。
一個鏈?zhǔn)降穆暶魇?observable 的例子：
var b =
a
.filter( v => v % 2 == 1 ) // 過濾掉偶數(shù)
.distinctUntilChanged() // 過濾連續(xù)相同的流
.throttle( 100 ) // 函數(shù)節(jié)流（合并100毫秒內(nèi)的流）
.map( v = v * 2 ); // 變2倍
b.subscribe( function onValue(v){
console.log( "Next:", v );
} );
注意： 這里的鏈?zhǔn)綄懛ú皇且欢ㄒ?observable 賦值給 b 和調(diào)用 b.subscribe(..) 分開寫，這樣做只是為了讓每個方法都會得到一個新的返回值。通常，subscribe(..) 方法都會在鏈?zhǔn)綄懛ǖ淖詈蟊徽{(diào)用。
總結(jié)
這本書詳細(xì)的介紹了各種各樣的函數(shù)式編程操作，例如：把單個值（或者說是一個即時列表的值）轉(zhuǎn)換到另一個值里。
對于那些有時態(tài)的操作，所有基礎(chǔ)的函數(shù)式編程原理都可以無時態(tài)的應(yīng)用。就像 promise 創(chuàng)建了一個單一的未來值，我們可以創(chuàng)建一個積極的列表的值來代替像惰性的observable（事件）流的值。
數(shù)組的 map(..) 方法會用當(dāng)前數(shù)組中的每一個值運行一次映射函數(shù)，然后放到返回的數(shù)組里。而 observable 數(shù)組里則是為每一個值運行一次映射函數(shù)，無論這個值何時加入，然后把它返回到 observable 里。
或者說，如果數(shù)組對函數(shù)式編程操作是一個積極的數(shù)據(jù)結(jié)構(gòu)，那么 observable 相當(dāng)于持續(xù)惰性的。
** 【上一章】翻譯連載 | 第 10 章：異步的函數(shù)式（上）－《JavaScript輕量級函數(shù)式編程》 |《你不知道的JS》姊妹篇 **
iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。
iKcamp官網(wǎng)：http://www.ikcamp.com
訪問官網(wǎng)更快閱讀全部免費分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享》。
包含：文章、視頻、源代碼
