摘要：而數(shù)組里則是為每一個(gè)值運(yùn)行一次映射函數(shù)，無論這個(gè)值何時(shí)加入，然后把它返回到里。上一章翻譯連載第章異步的函數(shù)式上輕量級(jí)函數(shù)式編程你不知道的姊妹篇原創(chuàng)新書移動(dòng)前端高效開發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。

原文地址：Functional-Light-JS

原文作者：Kyle Simpson－《You-Dont-Know-JS》作者

關(guān)于譯者：這是一個(gè)流淌著滬江血液的純粹工程：認(rèn)真，是 HTML 最堅(jiān)實(shí)的梁柱；分享，是 CSS  里最閃耀的一瞥；總結(jié)，是 JavaScript 中最嚴(yán)謹(jǐn)?shù)倪壿?。?jīng)過捶打磨練，成就了本書的中文版。本書包含了函數(shù)式編程之精髓，希望可以幫助大家在學(xué)習(xí)函數(shù)式編程的道路上走的更順暢。比心。
譯者團(tuán)隊(duì)（排名不分先后）：阿希、blueken、brucecham、cfanlife、dail、kyoko-df、l3ve、lilins、LittlePineapple、MatildaJin、冬青、pobusama、Cherry、蘿卜、vavd317、vivaxy、萌萌、zhouyao

為了理解如何在2個(gè)值之間創(chuàng)建和使用惰性的映射，我們需要去抽象我們對(duì)列表（數(shù)組）的想法。

讓我們來想象一個(gè)智能的數(shù)組，不只是簡(jiǎn)單地獲得值，還是一個(gè)懶惰地接受和響應(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 之后，定時(shí)器在 a 里面添加隨機(jī)的值。

但是這個(gè)虛構(gòu)的 LazyArray 有點(diǎn)不同，它假設(shè)了值可以隨時(shí)的一個(gè)一個(gè)添加進(jìn)去。就像隨時(shí)可以 push(..) 你想要的值一樣?？梢哉f b 就是一個(gè)惰性映射 a 最終值的數(shù)組。

此外，當(dāng) a 或者 b 改變時(shí)，我們不需要確切地保存里面的值，這個(gè)特殊的數(shù)組將會(huì)保存它所需的值。所以這些數(shù)組不會(huì)隨著時(shí)間而占用更多的內(nèi)存，這是 惰性數(shù)據(jù)結(jié)構(gòu)和懶操作的重要特點(diǎn)。事實(shí)上，它看起來不像數(shù)組，更像是buffer（緩沖區(qū)）。

普通的數(shù)組是積極的，所以它會(huì)立馬保存所有它的值。"惰性數(shù)組" 的值則會(huì)延遲保存。

由于我們不一定要知道 a 什么時(shí)候添加了新的值，所以另一個(gè)關(guān)鍵就是我們需要有去監(jiān)聽 b 并在有新值的時(shí)候通知它的能力。我們可以想象下監(jiān)聽器是這樣的：

b.listen( function onValue(v){
    console.log( v );
} );

b 是反應(yīng)性的，因?yàn)樗辉O(shè)置為當(dāng) a 有值添加時(shí)進(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)。我故意避開這個(gè)術(shù)語(yǔ)是因?yàn)橐粋€(gè)有關(guān)于 FP + Reactive 是否真的構(gòu)成 FRP 的辯論。我們不會(huì)全面深入了解 FRP 的所有含義，所以我會(huì)繼續(xù)稱之為響應(yīng)式函數(shù)式編程?；蛘?，如果你不會(huì)感覺那么困惑，也可以稱之為事件機(jī)制函數(shù)式編程。

我們可以認(rèn)為 a 是生成值的而 b 則是去消費(fèi)這些值的。所以為了可讀性，我們得重新整理下這段代碼，讓問題歸結(jié)于 生產(chǎn)者 和 消費(fèi)者。

// 生產(chǎn)者:

var a = new LazyArray();

setInterval( function everySecond(){
    a.push( Math.random() );
}, 1000 );


// **************************
// 消費(fèi)者:

var b = a.map( function double(v){
    return v * 2;
} );

b.listen( function onValue(v){
    console.log( v );
} );

a 是一個(gè)行為本質(zhì)上很像數(shù)據(jù)流的生產(chǎn)者。我們可以把每個(gè)值賦給 a 當(dāng)作一個(gè)事件。map(..) 操作會(huì)觸發(fā) b 上面的 listen(..) 事件來消費(fèi)新的值。

我們分離 生產(chǎn)者 和 消費(fèi)者 的相關(guān)代碼，是因?yàn)槲覀兊拇a應(yīng)該各司其職。這樣的代碼組織可以很大程度上提高代碼的可讀性和維護(hù)性。

我們應(yīng)該非常謹(jǐn)慎地討論如何介紹時(shí)間狀態(tài)。具體來說，正如 promise 從單個(gè)異步操作中抽離出我們所擔(dān)心的時(shí)間狀態(tài)，響應(yīng)式函數(shù)式編程從一系列的值/操作中抽離（分割）了時(shí)間狀態(tài)。

從 a （生產(chǎn)者）的角度來說，唯一與時(shí)間相關(guān)的就是我們手動(dòng)調(diào)用的 setInterval(..) 循環(huán)。但它只是為了示范。

想象下 a 可以被綁定上一些其他的事件源，比如說用戶的鼠標(biāo)點(diǎn)擊事件和鍵盤按鍵事件，服務(wù)端來的 websocket 消息等。在這些情況下，a 沒必要關(guān)注自己的時(shí)間狀態(tài)。每當(dāng)值準(zhǔn)備好，它就只是一個(gè)與值連接的無時(shí)態(tài)管道。

從 b （消費(fèi)者）的角度來說，我們不用知道或者關(guān)注 a 里面的值在何時(shí)何地來的。事實(shí)上，所有的值都已經(jīng)存在。我們只關(guān)注是否無論何時(shí)都能取到那些值。或者說，map(..) 的轉(zhuǎn)換操作是一個(gè)無時(shí)態(tài)（惰性）的建模過程。

時(shí)間 與 a 和 b 之間的關(guān)系是聲明式的，不是命令式的。

以 operations-over-time 這種方式來組織值可能不是很有效。讓我們來對(duì)比下相同的功能如何用命令式來表示：

// 生產(chǎn)者:

var a = {
    onValue(v){
        b.onValue( v );
    }
};

setInterval( function everySecond(){
    a.onValue( Math.random() );
}, 1000 );


// **************************
// 消費(fèi)者:

var b = {
    map(v){
        return v * 2;
    },
    onValue(v){
        v = this.map( v );
        console.log( v );
    }
};

這似乎很微妙，但這就是存在于命令式版本的代碼和之前聲明式的版本之間一個(gè)很重要的不同點(diǎn)，除了 b.onValue(..) 需要自己去調(diào)用 this.map(..) 之外。在之前的代碼中， b 從 a 當(dāng)中去拉取，但是在這個(gè)代碼中，a 推送給 b。換句話說，把 b = a.map(..) 替換成 b.onValue(v)。

在上面的命令式代碼中，以消費(fèi)者的角度來說它并不清楚 v 從哪里來。此外命令式強(qiáng)硬的把代碼 b.onValue(..) 夾雜在生產(chǎn)者 a 的邏輯里，這有點(diǎn)違反了關(guān)注點(diǎn)分離原則。這將會(huì)讓分離生產(chǎn)者和消費(fèi)者變得困難。

相比之下，在之前的代碼中，b = a.map(..) 表示了 b 的值來源于 a ，對(duì)于如同抽象事件流的數(shù)據(jù)源 a，我們不需要關(guān)心。我們可以 確信 任何來自于 a 到 b 里的值都會(huì)通過 map(..) 操作。

為了方便，我們已經(jīng)說明了通過隨著時(shí)間一次一次的用 map(..) 來綁定 a 和 b 的概念。其實(shí)我們?cè)S多其他的函數(shù)式編程操作也可以做到這種效果。

思考下：

var b = a.filter( function isOdd(v) {
    return v % 2 == 1;
} );

b.listen( function onlyOdds(v){
    console.log( "Odd:", v );
} );

這里可以看到 a 的值肯定會(huì)通過 isOdd(..) 賦值給 b。

即使是 reduce(..) 也可以持續(xù)的運(yùn)行：

var b = a.reduce( function sum(total,v){
    return total + v;
} );

b.listen( function runningTotal(v){
    console.log( "New current total:", v );
} );

因?yàn)槲覀冋{(diào)用 reduce(..) 是沒有給具體 initialValue 的值，無論是 sum(..) 或者 runningTotal(..) 都會(huì)等到有 2 個(gè)來自 a 的參數(shù)時(shí)才會(huì)被調(diào)用。

這段代碼暗示了在 reduction 里面有一個(gè) 內(nèi)存空間， 每當(dāng)有新的值進(jìn)來的時(shí)候，sum(..) 才會(huì)帶上第一個(gè)參數(shù) total 和第二個(gè)參數(shù) v被調(diào)用。

其他的函數(shù)式編程操作會(huì)在內(nèi)部作用域請(qǐng)求一個(gè)緩存區(qū)，比如說 unique(..) 可以追蹤每一個(gè)它訪問過的值。

希望現(xiàn)在你可以察覺到響應(yīng)式，事件式，類數(shù)組結(jié)構(gòu)的數(shù)據(jù)的重要性，就像我們虛構(gòu)出來的 LazyArray 一樣。值得高興的是，這類的數(shù)據(jù)結(jié)構(gòu)已經(jīng)存在的了，它就叫 observable。

注意： 只是做些假設(shè)（希望）：接下來的討論只是簡(jiǎn)要的介紹 observables。這是一個(gè)需要我們花時(shí)間去探究的深層次話題。但是如果你理解本文中的輕量級(jí)函數(shù)式編程，并且知道如何通過函數(shù)式編程的原理來構(gòu)建異步的話，那么接著學(xué)習(xí) observables 將會(huì)變得得心應(yīng)手。

現(xiàn)在已經(jīng)有各種各樣的 Observables 的庫(kù)類， 最出名的是 RxJS 和 Most。在寫這篇文章的時(shí)候，正好有一個(gè)直接向 JS 里添加 observables 的建議，就像 promise。為了演示，我們將用 RxJS 風(fēng)格的 Observables 來完成下面的例子。

這是我們一個(gè)較早的響應(yīng)式的例子，但是用 Observables 來代替 LazyArray：

// 生產(chǎn)者:

var a = new Rx.Subject();

setInterval( function everySecond(){
    a.next( Math.random() );
}, 1000 );


// **************************
// 消費(fèi)者:

var b = a.map( function double(v){
    return v * 2;
} );

b.subscribe( function onValue(v){
    console.log( v );
} );

在 RxJS 中，一個(gè) Observer 訂閱一個(gè) Observable。如果你把 Observer 和 Observable 的功能結(jié)合到一起，那就會(huì)得到一個(gè) Subject。因此，為了保持代碼的簡(jiǎn)潔，我們把 a 構(gòu)建成一個(gè) 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 );
} );

在這個(gè)代碼里，a 是 Observable，毫無疑問，observer 就是獨(dú)立的 observer，它可以去“觀察”一些事件（比如我們的setInterval(..)循環(huán)），然后我們使用它的 next(..) 方法來發(fā)送一些事件到 observable a 的流里。

除了 map(..)，RxJS 還定義了超過 100 個(gè)可以在有新值添加時(shí)才觸發(fā)的方法。就像數(shù)組一樣。每個(gè) Observable 的方法都會(huì)返回一個(gè)新的 Observable，意味著他們是鏈?zhǔn)降摹Ｈ绻粋€(gè)方法被調(diào)用，則它的返回值應(yīng)該由輸入的 Observable 去返回，然后觸發(fā)到輸出的 Observable里，否則拋棄。

一個(gè)鏈?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(..) 分開寫，這樣做只是為了讓每個(gè)方法都會(huì)得到一個(gè)新的返回值。通常，subscribe(..) 方法都會(huì)在鏈?zhǔn)綄懛ǖ淖詈蟊徽{(diào)用。

這本書詳細(xì)的介紹了各種各樣的函數(shù)式編程操作，例如：把單個(gè)值（或者說是一個(gè)即時(shí)列表的值）轉(zhuǎn)換到另一個(gè)值里。

對(duì)于那些有時(shí)態(tài)的操作，所有基礎(chǔ)的函數(shù)式編程原理都可以無時(shí)態(tài)的應(yīng)用。就像 promise 創(chuàng)建了一個(gè)單一的未來值，我們可以創(chuàng)建一個(gè)積極的列表的值來代替像惰性的observable（事件）流的值。

數(shù)組的 map(..) 方法會(huì)用當(dāng)前數(shù)組中的每一個(gè)值運(yùn)行一次映射函數(shù)，然后放到返回的數(shù)組里。而 observable 數(shù)組里則是為每一個(gè)值運(yùn)行一次映射函數(shù)，無論這個(gè)值何時(shí)加入，然后把它返回到 observable 里。

或者說，如果數(shù)組對(duì)函數(shù)式編程操作是一個(gè)積極的數(shù)據(jù)結(jié)構(gòu)，那么 observable 相當(dāng)于持續(xù)惰性的。

【上一章】翻譯連載 | 第 10 章：異步的函數(shù)式（上）－《JavaScript輕量級(jí)函數(shù)式編程》 |《你不知道的JS》姊妹篇

iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。
iKcamp官網(wǎng)：http://www.ikcamp.com
訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級(jí)培訓(xùn)教程分享》。

包含：文章、視頻、源代碼