• 原文地址：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)過(guò)捶打磨練，成就了本書(shū)的中文版艺栈。本書(shū)包含了函數(shù)式編程之精髓英岭，希望可以幫助大家在學(xué)習(xí)函數(shù)式編程的道路上走的更順暢。比心湿右。

譯者團(tuán)隊(duì)（排名不分先后）：阿希诅妹、blueken、brucecham毅人、cfanlife吭狡、dail、kyoko-df丈莺、l3ve划煮、lilins、LittlePineapple缔俄、MatildaJin弛秋、冬青、pobusama俐载、Cherry蟹略、蘿卜、vavd317遏佣、vivaxy挖炬、萌萌、zhouyao

JavaScript 輕量級(jí)函數(shù)式編程

附錄 A：Transducing

Transducing 是我們這本書(shū)要講到的更為高級(jí)的技術(shù)贼急。它繼承了第 8 章數(shù)組操作的許多思想茅茂。

我不會(huì)把 Transducing 嚴(yán)格的稱為“輕量級(jí)函數(shù)式編程”，它更像是一個(gè)頂級(jí)的技巧太抓。我把這個(gè)技術(shù)留到附錄來(lái)講意味著你現(xiàn)在很可能并不需要關(guān)心它空闲，當(dāng)你確保你已經(jīng)非常熟悉整本書(shū)的主要內(nèi)容，你可以再回頭看看這一章節(jié)走敌。

說(shuō)實(shí)話碴倾，即使我已經(jīng)教過(guò) transducing 很多次了，在寫(xiě)這一章的時(shí)候掉丽，我仍然需要花很多腦力去理清楚這個(gè)技術(shù)跌榔。所以，如果你看這一章看的很疑惑也沒(méi)必要感到沮喪捶障。把這一章加個(gè)書(shū)簽僧须，等你覺(jué)得你差不多能理解時(shí)再回頭看看。

Transducing 就是通過(guò)減少來(lái)轉(zhuǎn)換项炼。

我知道這聽(tīng)起來(lái)很令人費(fèi)解担平。但是讓我們來(lái)看看它有多強(qiáng)大。實(shí)際上锭部，我認(rèn)為這是你掌握了輕量級(jí)函數(shù)式編程后可以做的最好的例證之一暂论。

和這本書(shū)的其他部分一樣，我的方法是先解釋為什么使用這個(gè)技術(shù)拌禾，然后如何使用取胎，最后歸結(jié)為簡(jiǎn)單的這個(gè)技術(shù)到底是什么樣的。這通常會(huì)有多學(xué)很多東西湃窍，但是我覺(jué)得用這種方式你會(huì)更深入的理解它闻蛀。

首先，為什么

讓我們從擴(kuò)展我們?cè)诘?3 章中介紹的例子開(kāi)始您市，測(cè)試單詞是否足夠短和/或足夠長(zhǎng)：

function isLongEnough(str) {
    return str.length >= 5;
}

function isShortEnough(str) {
    return str.length <= 10;
}

在第 3 章中循榆，我們使用這些斷言函數(shù)來(lái)測(cè)試一個(gè)單詞。然后在第 8 章中墨坚，我們學(xué)習(xí)了如何使用像 filter(..) 這樣的數(shù)組操作來(lái)重復(fù)這些測(cè)試秧饮。例如:

var words = [ "You", "have", "written", "something", "very", "interesting" ];

words
.filter( isLongEnough )
.filter( isShortEnough );
// ["written","something"]

這個(gè)例子可能并不明顯，但是這種分開(kāi)操作相同數(shù)組的方式具有一些不理想的地方泽篮。當(dāng)我們處理一個(gè)值比較少的數(shù)組時(shí)一切都還好盗尸。但是如果數(shù)組中有很多值，每個(gè) filter(..) 分別處理數(shù)組的每個(gè)值會(huì)比我們預(yù)期的慢一點(diǎn)帽撑。

當(dāng)我們的數(shù)組是異步/懶惰（也稱為 observables）的泼各，隨著時(shí)間的推移響應(yīng)事件處理（見(jiàn)第 10 章），會(huì)出現(xiàn)類(lèi)似的性能問(wèn)題亏拉。在這種情況下扣蜻，一次事件只有一個(gè)值逆巍，因此使用兩個(gè)單獨(dú)的 filter(..) 函數(shù)處理這些值并不是什么大不了的事情。

但是莽使，不太明顯的是每個(gè) filter(..) 方法都會(huì)產(chǎn)生一個(gè)單獨(dú)的 observable 值锐极。從一個(gè) observable 值中抽出一個(gè)值的開(kāi)銷(xiāo)真的可以加起來(lái)（譯者注：詳情請(qǐng)看第 10 章的“積極的 vs 惰性的”這一節(jié)）。這是真實(shí)存在的芳肌，因?yàn)樵谶@些情況下灵再，處理數(shù)千或數(shù)百萬(wàn)的值并不罕見(jiàn); 所以，即使是這么小的成本也會(huì)很快累加起來(lái)亿笤。

另一個(gè)缺點(diǎn)是可讀性翎迁，特別是當(dāng)我們需要對(duì)多個(gè)數(shù)組（或 observable）重復(fù)相同的操作時(shí)。例如:

zip(
    list1.filter( isLongEnough ).filter( isShortEnough ),
    list2.filter( isLongEnough ).filter( isShortEnough ),
    list3.filter( isLongEnough ).filter( isShortEnough )
)

顯得很重復(fù)净薛，對(duì)不對(duì)汪榔？

如果我們可以將 isLongEnough(..) 斷言與 isShortEnough(..) 斷言組合在一起是不是會(huì)更好一點(diǎn)呢（可讀性和性能）？你可以手動(dòng)執(zhí)行：

function isCorrectLength(str) {
    return isLongEnough( str ) && isShortEnough( str );
}

但這不是函數(shù)式編程的方式肃拜！

在第 8 章中揍异，我們討論了融合 —— 組合相鄰映射函數(shù)”啵回憶一下：

words
.map(
    pipe( removeInvalidChars, upper, elide )
);

不幸的是衷掷，組合相鄰斷言函數(shù)并不像組合相鄰映射函數(shù)那樣容易。為什么呢柿菩？想想斷言函數(shù)長(zhǎng)什么“樣子” —— 一種描述輸入和輸出的學(xué)術(shù)方式戚嗅。它接收一個(gè)單一的參數(shù)，返回一個(gè) true 或 false枢舶。

如果你試著用 isshortenough(islongenough(str))懦胞，這是行不通的。因?yàn)?islongenough(..) 會(huì)返回 true 或者 false 凉泄，而不是返回 isshortenough(..) 所要的字符串類(lèi)型的值躏尉。這可真倒霉。

試圖組合兩個(gè)相鄰的 reducer 函數(shù)同樣是行不通的后众。reducer 函數(shù)接收兩個(gè)值作為輸入胀糜，并返回單個(gè)組合值。reducer 函數(shù)的單一返回值也不能作為參數(shù)傳到另一個(gè)需要兩個(gè)輸入的 reducer 函數(shù)中蒂誉。

此外教藻，reduce(..) 輔助函數(shù)可以接收一個(gè)可選的 initialValue 輸入。有時(shí)可以省略右锨，但有時(shí)候它又必須被傳入括堤。這就讓組合更復(fù)雜了，因?yàn)橐粋€(gè) reduce(..) 可能需要一個(gè) initialValue，而另一個(gè) reduce(..) 可能需要另一個(gè) initialValue悄窃。所以我們?cè)趺纯赡苤挥媚撤N組合的 reducer 來(lái)實(shí)現(xiàn) reduce(..) 呢讥电。

考慮像這樣的鏈：

words
.map( strUppercase )
.filter( isLongEnough )
.filter( isShortEnough )
.reduce( strConcat, "" );
// "WRITTENSOMETHING"

你能想出一個(gè)組合能夠包含 map(strUppercase)， filter(isLongEnough)轧抗，filter(isShortEnough)恩敌， reduce(strConcat) 所有這些操作嗎？每種操作的行為是不同的鸦致，所以不能直接組合在一起潮剪。我們需要把它們修改下讓它們組合在一起涣楷。

希望這些例子說(shuō)明了為什么簡(jiǎn)單的組合不能勝任這項(xiàng)任務(wù)分唾。我們需要一個(gè)更強(qiáng)大的技術(shù)，而 transducing 就是這個(gè)技術(shù)狮斗。

如何绽乔，下一步

讓我們談?wù)勎覀冊(cè)撊绾蔚玫揭粋€(gè)能組合映射，斷言和/或 reducers 的框架碳褒。

別太緊張：你不必經(jīng)歷編程過(guò)程中所有的探索步驟折砸。一旦你理解了 transducing 能解決的問(wèn)題，你就可以直接使用函數(shù)式編程庫(kù)中的 transduce(..) 工具繼續(xù)你應(yīng)用程序的剩余部分沙峻！

讓我們開(kāi)始探索吧睦授。

把 Map/Filter 表示為 Reduce

我們要做的第一件事情就是將我們的 filter(..) 和 map(..)調(diào)用變?yōu)?reduce(..) 調(diào)用∷ふ回想一下我們?cè)诘?8 章是怎么做的：

function strUppercase(str) { return str.toUpperCase(); }
function strConcat(str1,str2) { return str1 + str2; }

function strUppercaseReducer(list,str) {
    list.push( strUppercase( str ) );
    return list;
}

function isLongEnoughReducer(list,str) {
    if (isLongEnough( str )) list.push( str );
    return list;
}

function isShortEnoughReducer(list,str) {
    if (isShortEnough( str )) list.push( str );
    return list;
}

words
.reduce( strUppercaseReducer, [] )
.reduce( isLongEnoughReducer, [] )
.reduce( isShortEnough, [] )
.reduce( strConcat, "" );
// "WRITTENSOMETHING"

這是一個(gè)不錯(cuò)的改進(jìn)去枷。我們現(xiàn)在有四個(gè)相鄰的 reduce(..) 調(diào)用，而不是三種不同方法的混合是复。然而删顶，我們?nèi)匀徊荒?compose(..) 這四個(gè) reducer，因?yàn)樗鼈兘邮軆蓚€(gè)參數(shù)而不是一個(gè)參數(shù)淑廊。

在 8 章逗余，我們偷了點(diǎn)懶使用了數(shù)組的 push 方法而不是 concat(..) 方法返回一個(gè)新數(shù)組，導(dǎo)致有副作用〖境停現(xiàn)在讓我們更正式一點(diǎn)：

function strUppercaseReducer(list,str) {
    return list.concat( [strUppercase( str )] );
}

function isLongEnoughReducer(list,str) {
    if (isLongEnough( str )) return list.concat( [str] );
    return list;
}

function isShortEnoughReducer(list,str) {
    if (isShortEnough( str )) return list.concat( [str] );
    return list;
}

在后面我們會(huì)來(lái)頭看看這里是否需要 concat(..)录粱。

參數(shù)化 Reducers

除了使用不同的斷言函數(shù)之外，兩個(gè) filter reducers 幾乎相同画拾。讓我們把這些 reducers 參數(shù)化得到一個(gè)可以定義任何 filter-reducer 的工具函數(shù)：

function filterReducer(predicateFn) {
    return function reducer(list,val){
        if (predicateFn( val )) return list.concat( [val] );
        return list;
    };
}

var isLongEnoughReducer = filterReducer( isLongEnough );
var isShortEnoughReducer = filterReducer( isShortEnough );

同樣的关摇，我們把 mapperFn(..) 也參數(shù)化來(lái)生成 map-reducer 函數(shù)：

function mapReducer(mapperFn) {
    return function reducer(list,val){
        return list.concat( [mapperFn( val )] );
    };
}

var strToUppercaseReducer = mapReducer( strUppercase );

我們的調(diào)用鏈看起來(lái)是一樣的：

words
.reduce( strUppercaseReducer, [] )
.reduce( isLongEnoughReducer, [] )
.reduce( isShortEnough, [] )
.reduce( strConcat, "" );

提取共用組合邏輯

仔細(xì)觀察上面的 mapReducer(..) 和 filterReducer(..) 函數(shù)。你發(fā)現(xiàn)共享功能了嗎碾阁？

這部分：

return list.concat( .. );

// 或者
return list;

讓我們?yōu)檫@個(gè)通用邏輯定義一個(gè)輔助函數(shù)输虱。但是我們叫它什么呢？

function WHATSITCALLED(list,val) {
    return list.concat( [val] );
}

WHATSITCALLED(..) 函數(shù)做了些什么呢脂凶，它接收兩個(gè)參數(shù)（一個(gè)數(shù)組和另一個(gè)值）宪睹，將值 concat 到數(shù)組的末尾返回一個(gè)新的數(shù)組愁茁。所以這個(gè) WHATSITCALLED(..) 名字不合適，我們可以叫它 listCombination(..) ：

function listCombination(list,val) {
    return list.concat( [val] );
}

我們現(xiàn)在用 listCombination(..) 來(lái)重新定義我們的 reducer 輔助函數(shù)：

function mapReducer(mapperFn) {
    return function reducer(list,val){
        return listCombination( list, mapperFn( val ) );
    };
}

function filterReducer(predicateFn) {
    return function reducer(list,val){
        if (predicateFn( val )) return listCombination( list, val );
        return list;
    };
}

我們的調(diào)用鏈看起來(lái)還是一樣的（這里就不重復(fù)寫(xiě)了）亭病。

參數(shù)化組合

我們的 listCombination(..) 小工具只是組合兩個(gè)值的一種方式鹅很。讓我們將它的用途參數(shù)化，以使我們的 reducers 更加通用：

function mapReducer(mapperFn,combinationFn) {
    return function reducer(list,val){
        return combinationFn( list, mapperFn( val ) );
    };
}

function filterReducer(predicateFn,combinationFn) {
    return function reducer(list,val){
        if (predicateFn( val )) return combinationFn( list, val );
        return list;
    };
}

使用這種形式的輔助函數(shù)：

var strToUppercaseReducer = mapReducer( strUppercase, listCombination );
var isLongEnoughReducer = filterReducer( isLongEnough, listCombination );
var isShortEnoughReducer = filterReducer( isShortEnough, listCombination );

將這些實(shí)用函數(shù)定義為接收兩個(gè)參數(shù)而不是一個(gè)參數(shù)不太方便組合罪帖，因此我們使用我們的 curry(..) （柯里化）方法：

var curriedMapReducer = curry( function mapReducer(mapperFn,combinationFn){
    return function reducer(list,val){
        return combinationFn( list, mapperFn( val ) );
    };
} );

var curriedFilterReducer = curry( function filterReducer(predicateFn,combinationFn){
    return function reducer(list,val){
        if (predicateFn( val )) return combinationFn( list, val );
        return list;
    };
} );

var strToUppercaseReducer =
    curriedMapReducer( strUppercase )( listCombination );
var isLongEnoughReducer =
    curriedFilterReducer( isLongEnough )( listCombination );
var isShortEnoughReducer =
    curriedFilterReducer( isShortEnough )( listCombination );

這看起來(lái)有點(diǎn)冗長(zhǎng)而且可能不是很有用促煮。

但這實(shí)際上是我們進(jìn)行下一步推導(dǎo)的必要條件。請(qǐng)記住整袁，我們的最終目標(biāo)是能夠 compose(..) 這些 reducers菠齿。我們快要完成了。

附錄 A：Transducing（下）－－－－ 四天后更新

** 【上一章】翻譯連載 | 第 11 章：融會(huì)貫通 －《JavaScript輕量級(jí)函數(shù)式編程》 |《你不知道的JS》姊妹篇
**

image

iKcamp原創(chuàng)新書(shū)《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》已在亞馬遜坐昙、京東绳匀、當(dāng)當(dāng)開(kāi)售。

iKcamp官網(wǎng)：https://www.ikcamp.com
訪問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：
《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享》
《iKcamp出品｜基于Koa2搭建Node.js實(shí)戰(zhàn)項(xiàng)目教程》
包含：文章炸客、視頻疾棵、源代碼