摘要：這就是積極的函數(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

閱讀到這里，你已經(jīng)學(xué)習(xí)了我所說的所有輕量級(jí)函數(shù)式編程的基礎(chǔ)概念，在本章節(jié)中，我們將把這些概念應(yīng)有到不同的情景當(dāng)中，但絕對(duì)不會(huì)有新的知識(shí)點(diǎn)。

到目前為止，我們所說的一切都是同步的，意味著我們調(diào)用函數(shù)，傳入?yún)?shù)后馬上就會(huì)得到返回值。大部分的情況下是沒問題的，但這幾乎滿足不了現(xiàn)有的 JS 應(yīng)用。為了能在當(dāng)前的 JS 環(huán)境里使用上函數(shù)式編程，我們需要去了解異步的函數(shù)式編程。

本章的目的是拓展我們對(duì)用函數(shù)式編程管理數(shù)據(jù)的思維，以便之后我們?cè)诟嗟臉I(yè)務(wù)上應(yīng)用。

在你所有的應(yīng)用里，最復(fù)雜的狀態(tài)就是時(shí)間。當(dāng)你操作的數(shù)據(jù)狀態(tài)改變過程比較直觀的時(shí)候，是很容易管理的。但是，如果狀態(tài)隨著時(shí)間因?yàn)轫憫?yīng)事件而隱晦的變化，管理這些狀態(tài)的難度將會(huì)成幾何級(jí)增長。

我們?cè)诒疚闹薪榻B的函數(shù)式編程可以讓代碼變得更可讀，從而增強(qiáng)了可靠性和可預(yù)見性。但是當(dāng)你添加異步操作到你的項(xiàng)目里的時(shí)候，這些優(yōu)勢(shì)將會(huì)大打折扣。

必須明確的一點(diǎn)是：并不是說一些操作不能用同步來完成，或者觸發(fā)異步行為很容易。協(xié)調(diào)那些可能會(huì)改變應(yīng)用程序的狀態(tài)的響應(yīng)，這需要大量額外的工作。

所以，作為作者的你最好付出一些努力，或者只是留給閱讀你代碼的人一個(gè)難題，去弄清楚如果 A 在 B 之前完成，項(xiàng)目中狀態(tài)是什么，還有相反的情況是什么？這是一個(gè)浮夸的問題，但以我的觀點(diǎn)來看，這有一個(gè)確切的答案：如果可以把復(fù)雜的代碼變得更容易理解，作者就必須花費(fèi)更多心思。

異步編程最為重要的一點(diǎn)是通過抽象時(shí)間來簡化狀態(tài)變化的管理。

為說明這一點(diǎn)，讓我們先來看下一種有競爭狀態(tài)（又稱，時(shí)間復(fù)雜度）的糟糕情況，且必須手動(dòng)去管理里面的狀態(tài)：

var customerId = 42;
var customer;

lookupCustomer( customerId, function onCustomer(customerRecord){
    var orders = customer ? customer.orders : null;
    customer = customerRecord;
    if (orders) {
        customer.orders = orders;
    }
} );

lookupOrders( customerId, function onOrders(customerOrders){
    if (!customer) {
        customer = {};
    }
    customer.orders = customerOrders;
} );

回調(diào)函數(shù) onCustomer(..) 和 onOrders(..) 之間是互為競爭關(guān)系。假設(shè)他們都在運(yùn)行，兩者都有可能先運(yùn)行，那將無法預(yù)測到會(huì)發(fā)生什么。

如果我們可以把 lookupOrders(..) 寫到 onCustomer(..) 里面，那我們就可以確認(rèn) onOrders(..) 會(huì)在 onCustomer(..) 之后運(yùn)行，但我們不能這么做，因?yàn)槲覀冃枰?2 個(gè)查詢同時(shí)執(zhí)行。

所以，為了讓這個(gè)基于時(shí)間的復(fù)雜狀態(tài)正?；?，我們用相應(yīng)的 if-聲明在各自的回調(diào)函數(shù)里來檢查外部作用域的變量 customer。當(dāng)各自的回調(diào)函數(shù)被執(zhí)行，將會(huì)去檢測 customer 的狀態(tài)，從而確定各自的執(zhí)行順序，如果 customer 在回調(diào)函數(shù)里還沒被定義，那他就是先運(yùn)行的，否則則是第二個(gè)運(yùn)行的。

這些代碼可以運(yùn)行，但是他違背了可讀性的原則。時(shí)間復(fù)雜度讓這個(gè)代碼變得難以閱讀。

讓我們改用 JS promise 來把時(shí)間因素抽離出來：

var customerId = 42;

var customerPromise = lookupCustomer( customerId );
var ordersPromise = lookupOrders( customerId );

customerPromise.then( function onCustomer(customer){
    ordersPromise.then( function onOrders(orders){
        customer.orders = orders;
    } );
} );

現(xiàn)在 onOrders(..) 回調(diào)函數(shù)存在 onCustomer(..) 回調(diào)函數(shù)里，所以他們各自的執(zhí)行順序是可以保證的。在各自的 then(..) 運(yùn)行之前 lookupCustomer(..) 和 lookupOrders(..) 被分別的調(diào)用，兩個(gè)查詢就已經(jīng)并行的執(zhí)行完了。

這可能不太明顯，但是這個(gè)代碼里還有其他內(nèi)在的競爭狀態(tài)，那就是 promise 的定義沒有被體現(xiàn)出來。如果 orders 的查詢?cè)诎?onOrders(..) 回調(diào)函數(shù)被 ordersPromise.then(..) 調(diào)用前完成，那么就需要一些比較智能的 東西 來保存 orders 直到 onOrders(..) 能被調(diào)用。 同理，record （或者說customer）對(duì)象是否能在 onCustomer(..) 執(zhí)行時(shí)被接收到。

這里的 東西 和我們之前討論過的時(shí)間復(fù)雜度類似。但我們不必去擔(dān)心這些復(fù)雜性，無論是編碼或者是讀（更為重要）這些代碼的時(shí)候，因?yàn)閷?duì)我們來說，promise 所處理的就是時(shí)間復(fù)雜度上的問題。

promise 以時(shí)間無關(guān)的方式來作為一個(gè)單一的值。此外，獲取 promise 的返回值是異步的，但卻是通過同步的方法來賦值?；蛘哒f， promise 給 = 操作符擴(kuò)展隨時(shí)間動(dòng)態(tài)賦值的功能，通過可靠的（時(shí)間無關(guān)）方式。

接下來我們將探索如何以相同的方式，在時(shí)間上異步地拓展本書之前同步的函數(shù)式編程操作。

積極的和惰性的在計(jì)算機(jī)科學(xué)的領(lǐng)域并不是表揚(yáng)或者批評(píng)的意思，而是描述一個(gè)操作是否立即執(zhí)行或者是延時(shí)執(zhí)行。

我們?cè)诒纠又锌吹降暮瘮?shù)式編程操作可以被稱為積極的，因?yàn)樗鼈兺剑磿r(shí)）地操作著離散的即時(shí)值或值的列表/結(jié)構(gòu)上的值。

回憶下：

var a = [1,2,3]

var b = a.map( v => v * 2 );

b;            // [2,4,6]

這里 a 到 b 的映射就是積極的，因?yàn)樗趫?zhí)行的那一刻映射了數(shù)組 a 里的所有的值，然后生成了一個(gè)新的數(shù)組 b 。即使之后你去修改 a ，比如說添加一個(gè)新的值到數(shù)組的最后一位，也不會(huì)影響到 b 的內(nèi)容。這就是積極的函數(shù)式編程。

但是如果是一個(gè)惰性的函數(shù)式編程操作呢？思考如下情況：

var a = [];

var b = mapLazy( a, v => v * 2 );

a.push( 1 );

a[0];        // 1
b[0];        // 2

a.push( 2 );

a[1];        // 2
b[1];        // 4

我們可以想象下 mapLazy(..) 本質(zhì)上 “監(jiān)聽” 了數(shù)組 a，只要一個(gè)新的值添加到數(shù)組的末端（使用 push(..)），它都會(huì)運(yùn)行映射函數(shù) v => v * 2 并把改變后的值添加到數(shù)組 b 里。

注意： mapLazy(..) 的實(shí)現(xiàn)沒有被寫出來，是因?yàn)樗翘摌?gòu)的方法，是不存在的。如果要實(shí)現(xiàn) a 和 b 之間的惰性的操作，那么簡單的數(shù)組就需要變得更加聰明。

考慮下把 a 和 b 關(guān)聯(lián)到一起的好處，無論何時(shí)何地，你添加一個(gè)值進(jìn) a 里，它都將改變且映射到 b 里。它比同為聲明式函數(shù)式編程的 map(..) 更強(qiáng)大，但現(xiàn)在它可以隨時(shí)地變化，進(jìn)行映射時(shí)你不用知道 a 里面所有的值。

【上一章】翻譯連載 | 第 9 章：遞歸（下）－《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