我們何其幸運(yùn)!這個(gè)世界上竟然還有幾乎完全支持FP編程的流行語言，這種語言就是StackOverflow上歷年兵器排行榜，常年霸榜第一的JavaScript。

函數(shù)式編程利于且成就思考，當(dāng)我們耽玩于scheme，lisp等函數(shù)范式的編程語言，卻遺憾于他們?cè)谡鎸?shí)的世界中絕無用武之地，唯有elisp似乎能稍微補(bǔ)足點(diǎn)缺憾而用到 emacs上，但是也僅此而已。

然而，我們何其幸運(yùn)!JavaScript竟然幾乎完全支持函數(shù)式編程思想，甚至在React的帶動(dòng)下，有朝著FP函數(shù)式編程，一條路走到黑的喜人局面。

我們何其幸運(yùn)!JavaScript 同僚們。

編程從何起步呢?試看人類歷史上第二古老的編程語言的名字：Lisp，對(duì) list processing，編程語言就是處理list， 一切從list數(shù)組起步。我們每天要處理的任務(wù)是 list，我們的早餐清單是 list，甚至于女神也有備胎清單 list。一個(gè) List 就能抽象與概括出，我們?nèi)祟愇拿魉械囊磺小?/p>

人類認(rèn)識(shí)到了這一點(diǎn)，因此將古老的語言命名為 lisp，list processing。

[[388006]]

因此，我們腳下的路也從 list 起步。

零、前文概要

前文中，我們闡述了處理數(shù)組最核心的武器 array.reduce。array.reduce 就是 “太極生兩儀”的太極，是一切變化的起點(diǎn)，所有的其他工具都能用array.reduce模擬出來。

array.reduce的本質(zhì)就是將數(shù)列降為為一個(gè)值。

緊接著，我們以array.reduce為基礎(chǔ)，推導(dǎo)出來 array.ma。array.map 將數(shù)學(xué)思路而直接應(yīng)用于編程。

array.reduce與array.map的共同特征都對(duì)array作變形transform處理。下面，我們來領(lǐng)略幫助我們邏輯思考的部分 array.filter 與 array.find (array.findIndex).

一、array.filter 思維的篩子

邏輯判斷與篩選的核心是一個(gè)關(guān)鍵詞 predicate。拆解這個(gè)單詞 pre 是事先，而 dict 是說出與展示(比如dictionary是展示字的字典)。因此 predicate logic，就是執(zhí)行代碼之前，先說出是否符合條件。

array.filter的應(yīng)用簡單直接，就如我們思維的自然流動(dòng)：

[1, 4, 7].filter(x => x > 3); //[4, 7] 
// 或者攜程 
[1, 4, 7].filter( x =>  
                { return x > 3;}) 

 執(zhí)行過程如圖所示：

二、array.filter 的應(yīng)用案例

我們著手考察一個(gè)真實(shí)生活中的案例，處理以JSON存儲(chǔ)的財(cái)務(wù)賬單：

const accountBalance = { 
  accountsData: [ 
    { 
      id: "user01", 
      balance: 888, 
    }, 
    { 
      id: "user02", 
      balance: 999, 
    }, 
    { 
      id: "user03", 
      balance: -18, 
    }, 
    { 
      id: "user04", 
      balance: -20, 
    }, 
    { 
      id: "user05", 
      balance: 1, 
    }, 
  ], 
}; 

 如何從賬單篩選出來銀行資產(chǎn)為負(fù)值的賬戶信息呢。此時(shí)，當(dāng)我們看到 filter 的時(shí)候，真喜出望外，其應(yīng)用與我們的思維過程完全一致。 

const negativeAccount = accountBalance.accountsData.filter(v => v.balance < 0); 
console.log(negativeAccount); 
// 輸出結(jié)果 
//[ { id: 'user03', balance: -18 }, { id: 'user04', balance: -20 } ] 

 然后，再應(yīng)用前文的學(xué)過的技術(shù)，array.map 將負(fù)債賬戶的 ID 提取出來。 

const negAccIds = accountBalance.accountsData 
    .filter(v => v.balance < 0) 
    .map(v => v.id); 
// : [ 'user03', 'user04' ] 

 三、用 array.reduce 模擬 array.filter

再回頭一切的起點(diǎn) array.reduce，他是源頭，大江大河都發(fā)源于 reduce。換言之，我們始終都是再用reduce思考問題。

著手以 reduce 模擬實(shí)現(xiàn) array.filter():

const newFilter = (arr, fn) => 
  arr.reduce((x, y) => (fn(y) ? x.concat(y) 
                        : x), 
            []); 

 測(cè)試之后，得到相同的結(jié)果：

const negAccIds = accountBalance.accountsData 
    .newFilter(v => v.balance < 0) 
    .map(v => v.id); 
// : [ 'user03', 'user04' ] 

 此處，我們也能看到應(yīng)用reduce的關(guān)竅只在于，頭腦中要有最終降維到一個(gè)值的那個(gè)accumulator.

arr.reduce(callback( accumulator, currentValue, [, index[, array]] )[, initialValue]) 

 【編輯推薦】