翻譯連載 | 第 10 章：異步的函數式（上）－《JavaScript輕量級函數式編程》 |《你不知

Lucky_Boy 發布于2019-08-21 16:50 / 1953人閱讀

摘要：這就是積極的函數式編程。上一章翻譯連載第章遞歸下輕量級函數式編程你不知道的姊妹篇原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。

原文地址：Functional-Light-JS

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

關于譯者：這是一個流淌著滬江血液的純粹工程：認真，是 HTML 最堅實的梁柱；分享，是 CSS 里最閃耀的一瞥；總結，是 JavaScript 中最嚴謹的邏輯。經過捶打磨練，成就了本書的中文版。本書包含了函數式編程之精髓，希望可以幫助大家在學習函數式編程的道路上走的更順暢。比心。

譯者團隊（排名不分先后）：阿希、blueken、brucecham、cfanlife、dail、kyoko-df、l3ve、lilins、LittlePineapple、MatildaJin、冬青、pobusama、Cherry、蘿卜、vavd317、vivaxy、萌萌、zhouyao

第 10 章：異步的函數式（上）

閱讀到這里，你已經學習了我所說的所有輕量級函數式編程的基礎概念，在本章節中，我們將把這些概念應有到不同的情景當中，但絕對不會有新的知識點。

到目前為止，我們所說的一切都是同步的，意味著我們調用函數，傳入參數后馬上就會得到返回值。大部分的情況下是沒問題的，但這幾乎滿足不了現有的 JS 應用。為了能在當前的 JS 環境里使用上函數式編程，我們需要去了解異步的函數式編程。

本章的目的是拓展我們對用函數式編程管理數據的思維，以便之后我們在更多的業務上應用。

時間狀態

在你所有的應用里，最復雜的狀態就是時間。當你操作的數據狀態改變過程比較直觀的時候，是很容易管理的。但是，如果狀態隨著時間因為響應事件而隱晦的變化，管理這些狀態的難度將會成幾何級增長。

我們在本文中介紹的函數式編程可以讓代碼變得更可讀，從而增強了可靠性和可預見性。但是當你添加異步操作到你的項目里的時候，這些優勢將會大打折扣。

必須明確的一點是：并不是說一些操作不能用同步來完成，或者觸發異步行為很容易。協調那些可能會改變應用程序的狀態的響應，這需要大量額外的工作。

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

減少時間狀態

異步編程最為重要的一點是通過抽象時間來簡化狀態變化的管理。

為說明這一點，讓我們先來看下一種有競爭狀態（又稱，時間復雜度）的糟糕情況，且必須手動去管理里面的狀態：

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;
} );

回調函數 onCustomer(..) 和 onOrders(..) 之間是互為競爭關系。假設他們都在運行，兩者都有可能先運行，那將無法預測到會發生什么。

如果我們可以把 lookupOrders(..) 寫到 onCustomer(..) 里面，那我們就可以確認 onOrders(..) 會在 onCustomer(..) 之后運行，但我們不能這么做，因為我們需要讓 2 個查詢同時執行。

所以，為了讓這個基于時間的復雜狀態正常化，我們用相應的 if-聲明在各自的回調函數里來檢查外部作用域的變量 customer。當各自的回調函數被執行，將會去檢測 customer 的狀態，從而確定各自的執行順序，如果 customer 在回調函數里還沒被定義，那他就是先運行的，否則則是第二個運行的。

這些代碼可以運行，但是他違背了可讀性的原則。時間復雜度讓這個代碼變得難以閱讀。

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

var customerId = 42;

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

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

現在 onOrders(..) 回調函數存在 onCustomer(..) 回調函數里，所以他們各自的執行順序是可以保證的。在各自的 then(..) 運行之前 lookupCustomer(..) 和 lookupOrders(..) 被分別的調用，兩個查詢就已經并行的執行完了。

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

這里的東西和我們之前討論過的時間復雜度類似。但我們不必去擔心這些復雜性，無論是編碼或者是讀（更為重要）這些代碼的時候，因為對我們來說，promise 所處理的就是時間復雜度上的問題。

promise 以時間無關的方式來作為一個單一的值。此外，獲取 promise 的返回值是異步的，但卻是通過同步的方法來賦值。或者說， promise 給 = 操作符擴展隨時間動態賦值的功能，通過可靠的（時間無關）方式。

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

積極的 vs 惰性的

積極的和惰性的在計算機科學的領域并不是表揚或者批評的意思，而是描述一個操作是否立即執行或者是延時執行。

我們在本例子中看到的函數式編程操作可以被稱為積極的，因為它們同步（即時）地操作著離散的即時值或值的列表/結構上的值。

回憶下：

var a = [1,2,3]

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

b;            // [2,4,6]

這里 a 到 b 的映射就是積極的，因為它在執行的那一刻映射了數組 a 里的所有的值，然后生成了一個新的數組 b 。即使之后你去修改 a ，比如說添加一個新的值到數組的最后一位，也不會影響到 b 的內容。這就是積極的函數式編程。

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

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(..) 本質上 “監聽” 了數組 a，只要一個新的值添加到數組的末端（使用 push(..)），它都會運行映射函數 v => v * 2 并把改變后的值添加到數組 b 里。

注意： mapLazy(..) 的實現沒有被寫出來，是因為它是虛構的方法，是不存在的。如果要實現 a 和 b 之間的惰性的操作，那么簡單的數組就需要變得更加聰明。

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

【上一章】翻譯連載 | 第 9 章：遞歸（下）－《JavaScript輕量級函數式編程》 |《你不知道的JS》姊妹篇

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。

iKcamp官網：http://www.ikcamp.com

GPU云服務器云服務器 javascript函數式編程函數式編程函數式編程指針函數式編程語言?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88802.html

翻譯連載 | 第 10 章：異步的函數式（下）－《JavaScript輕量級函數式編程》 |《你不知

摘要：而數組里則是為每一個值運行一次映射函數，無論這個值何時加入，然后把它返回到里。上一章翻譯連載第章異步的函數式上輕量級函數式編程你不知道的姊妹篇原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者關于譯者：這是一個流淌著滬江血液的純粹工程：認真，是 ...

魏明 2019-08-21 17:00 評論0 收藏0
翻譯連載 |《你不知道的JS》姊妹篇 |《JavaScript 輕量級函數式編程》- 引言＆前言

摘要：我稱之為輕量級函數式編程。序眾所周知，我是一個函數式編程迷。函數式編程有很多種定義。本書是你開啟函數式編程旅途的絕佳起點。事實上，已經有很多從頭到尾正確的方式介紹函數式編程的書了。原文地址：Functional-Light-JS 原文作者：Kyle Simpson　－　《You-Dont-Know-JS》作者譯者團隊（排名不分先后）：阿希、blueken、brucecham、...

2bdenny 2019-08-20 19:00 評論0 收藏0
前端_JavaScript

摘要：為此決定自研一個富文本編輯器。例如當要轉化的對象有環存在時子節點屬性賦值了父節點的引用，為了關于函數式編程的思考作者李英杰，美團金融前端團隊成員。只有正確使用作用域，才能使用優秀的設計模式，幫助你規避副作用。 JavaScript 專題之惰性函數 JavaScript 專題系列第十五篇，講解惰性函數需求我們現在需要寫一個 foo 函數，這個函數返回首次調用時的 Date 對象，注意...

Benedict Evans 2019-08-26 11:39 評論0 收藏0
翻譯連載 |《你不知道的JS》姊妹篇 |《JavaScript 輕量級函數式編程》- 第 1 章：

摘要：所以我覺得函數式編程領域更像學者的領域。函數式編程的原則是完善的，經過了深入的研究和審查，并且可以被驗證。函數式編程是編寫可讀代碼的最有效工具之一可能還有其他。我知道很多函數式編程編程者會認為形式主義本身有助于學習。原文地址：Functional-Light-JS 原文作者：Kyle Simpson　－　《You-Dont-Know-JS》作者關于譯者：這是一個流淌著滬江血液...

omgdog 2019-08-20 19:03 評論0 收藏0
翻譯連載 | 第 11 章：融會貫通－《JavaScript輕量級函數式編程》 |《你不知道的JS

摘要：譯者團隊排名不分先后阿希冬青蘿卜萌萌輕量級函數式編程第章融會貫通現在你已經掌握了所有需要掌握的關于輕量級函數式編程的內容。回頭想想我們用到的函數式編程原則。這兩個函數組合成一個映射函數通過，這就是融合見第章。原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者關于譯者：這是一個流淌著滬江血液的純粹工程：...

codeKK 2019-08-21 17:40 評論0 收藏0