[[388814]]

如我們所知，JavaScript是當(dāng)今流行語(yǔ)言中對(duì)函數(shù)式編程支持最好的編程語(yǔ)言。而函數(shù)式編程"從一到無(wú)窮”的起點(diǎn)是 reduce，本文我們將嘗試從 reduce 起步構(gòu)建所有的其他函數(shù)。

一、萬(wàn)物之始 array.reduce 的應(yīng)用

Reduce的核心在于降維，將數(shù)組reduce為一個(gè)值，比如求和：

const arr = [52, 71, 27, 38]; 
const sum = (x, y) => x + y; 
const cusSum = arr.reduce(sum, 0); 

 將reduce作為思考工具，腦子中要始終留有 initial-value 初始值。

二、構(gòu)建 array.map 從數(shù)學(xué)到編程

map是數(shù)學(xué)思維而直接入編程，從reduce中模擬構(gòu)建為：

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

 三、構(gòu)建 array.flat array.flatMap 拍平數(shù)組

從array.flat我們窺探到 declaratively 編程的優(yōu)勢(shì)，只須將精力專(zhuān)注到要完成的任務(wù)上，而不必理會(huì)實(shí)現(xiàn)細(xì)節(jié)。用 reduce 實(shí)現(xiàn)為：

當(dāng)只 flat 到一層深度時(shí)候：

# flat only to one level  
const flat1 = arr => [].concat(...arr); 
const flat2 = arr = arr.reduce(acc, v => acc.concat(v), []) 

 當(dāng)需要 flat 到任意深度時(shí)， 用 reduce 完全重構(gòu) flat:

if (!Array.prototype.flat) { 
  Array.prototype.flat = function(n = 1) { 
    this.flatAllX = () => 
      this.reduce( 
        (f, v) => f.concat(Array.isArray(v) ? v.flat(Infinity) : v), 
        [] 
      ); 
 
    this.flatOneX = () => this.reduce((f, v) => f.concat(v), []); 
     
    return n === Infinity 
      ? this.flatAllX() 
      : n === 1 
      ? this.flatOneX() 
      : this.flatOneX().flat(n - 1); 
  }; 
} 

 四、array.filter 邁向高階的邏輯判斷 logic predicate

為什么要用 reduce 重新構(gòu)建，因?yàn)槟軌驇椭陬^腦中始終擦亮 function 與 最終輸出 acculator 的概念。

const cusFilter = (arr, fn) 
                =>  arr.reduce((acc, val) 
                => (fn(val) ? acc.concat(y) 
                        : acc), []); 

 五、array.find 與 array.findIndex 只找出首個(gè)元素

array.filter將會(huì)篩選出來(lái)全部的符合要求的元素，當(dāng)我們只要單個(gè)元素的時(shí)候則應(yīng)用 array.find.

const cusFind = arr.reduce((acc, val) 
   => (acc === undefined && fn(val) ? val 
       : acc), undefined); 

 重新構(gòu)建 array.findIndex:

const cusFindIndex = arr.reduce((x, y, i) 
                     => (x == -1 && fn(y) ? i  
                         : x), -1); 

 進(jìn)而，我們用 find 與 findIndex 簡(jiǎn)單的構(gòu)建 includes 與 indexOf。

arr.includes(value); // arr.find(v => v === value) 
arr.indexOf(value);  // arr.findIndex(v => v === value) 

 六、快捷的 array.some 與 array.every

array 與 some 兩函數(shù)雖然簡(jiǎn)單，思考和使用的時(shí)候尤其順手。

// arr.every(fn); 
arr.reduce((a, v) => a && fn(v), true); // a for accumulator,  
// arr.some(fn); 
arr.reduce((a, v) => a|| fn(v), false); // v for value  

 至此，我們從reduce出發(fā)，將其他幾個(gè)高階函數(shù)全部模擬出來(lái)，reduce模擬幫助我們強(qiáng)化對(duì)每個(gè)函數(shù)中輸入的arguments與輸出的 result 的辨識(shí)。