摘要：引言有一段時(shí)間沒(méi)更新了，最近挺忙的懶病犯了。例數(shù)組累加例計(jì)算總價(jià)蘋(píng)果桃子西瓜自己實(shí)現(xiàn)一個(gè)方法知道了的兩種模式利用遞歸實(shí)現(xiàn)它并不復(fù)雜參數(shù)有個(gè)。數(shù)據(jù)從這些方法組成的管道中流淌一遍出來(lái)就得到想要的結(jié)果了。

有一段時(shí)間沒(méi)更新了，最近挺忙的（懶病犯了）。今天偶然想到之前去去哪兒面試的時(shí)候，面試管問(wèn)我的redece題目，當(dāng)時(shí)被血虐的場(chǎng)景。干脆今天我們就來(lái)聊一下redece方法以及相關(guān)的應(yīng)用

reduce(callback,initval)
其中callback函數(shù)接收4個(gè)參數(shù):

Accumulator (acc) (累計(jì)器)

Current Value (cur) (當(dāng)前值)

Current Index (idx) (當(dāng)前索引)

Source Array (src) (源數(shù)組)

如果initval傳了，則索引從0開(kāi)始，acc是initval，cur是arr[0]
如果initval沒(méi)有傳，則索引從1開(kāi)始，acc是arr[0]，cur是arr[1]
reducer 函數(shù)的返回值分配給累計(jì)器，該返回值在數(shù)組的每個(gè)迭代中被記住，并最后成為最終的單個(gè)結(jié)果值。

const arr = [1,2,3,4,5];
console.log(arr.reduce((pre,cur)=>{return pre+cur}))
//1+2+3+4+5 15

var product = [
    {
        name: "蘋(píng)果",
        count: 2,
        price: 5
    },
    {
        name: "桃子",
        count: 5,
        price: 2
    },
    {
        name: "西瓜",
        count: 1,
        price: 10
    }
];
var total = product.reduce((pre,cur)=>{
    return pre+cur.count*cur.price
},0)
// 30

知道了reduce的兩種模式,利用遞歸實(shí)現(xiàn)它并不復(fù)雜

// callback參數(shù)有4個(gè)。pre,cur,index,arr
Array.prototype.myReduce = function(callback,prev){
    for(let i = 0 ; i < this.length; i++){
    // 判斷有沒(méi)有第二個(gè)參數(shù) 
        if(!prev){ // 沒(méi)有prev復(fù)雜點(diǎn)，第一次拿的是兩個(gè)元素arr[0],arr[1]，注意index的變化 
            prev = callback(this[i],this[i+1],i+1,this); //這里的指針是i+1都是對(duì)的，但是下一次循環(huán)的時(shí)候i必須按是3所以需要+1
            i++; // 第一次循環(huán)了兩個(gè)變量，下次應(yīng)該從第三個(gè)執(zhí)行，所以向后移動(dòng)
        }else{ //有prev簡(jiǎn)單，直接就是從arr[0]開(kāi)始遞歸
            prev = callback(prev,this[i],i,this);
        }
    }
    return prev;
}

好不容易學(xué)了reduce,只計(jì)算個(gè)水果價(jià)格，是不是有點(diǎn)太小才大用了？
我們看一看面試中能直接大幅度提升逼格的題目

相信大家都應(yīng)該知道怎么用for-in怎么遍歷數(shù)組（字符串split出來(lái)的）并借助一個(gè)空對(duì)象來(lái)計(jì)數(shù)
但是面試寫(xiě)十幾行代碼還是比較low而且容易出錯(cuò)的
我們看一個(gè)逼格高一點(diǎn)的實(shí)現(xiàn)

var arrString = "abcdaabc";

arrString.split("").reduce((res, cur)=>{
    res[cur] ? res[cur] ++ : res[cur] = 1
    return res;
}, {})

面試官讓實(shí)現(xiàn)一個(gè)原生的flat方法
這個(gè)方法項(xiàng)目中經(jīng)常用，但是兼容性不好，而且babel目前好像還沒(méi)有這個(gè)polyfill，那我們就直接在入口文件中判斷一下，如果不存在則添加數(shù)組的flat方法

// arr.flat(depth)  原生的語(yǔ)法 depth指定要提取嵌套數(shù)組的結(jié)構(gòu)深度,默認(rèn)是1 傳0不扁平話，傳Infinity則展開(kāi)任意深度的嵌套數(shù)組

我們先不考慮depth 怎么用遞歸實(shí)現(xiàn)一版展開(kāi)任意深度的flat方法
Array.prototype.myflat = function(depth = 1) {
  return this.reduce((pre, cur) => {
    if (Array.isArray(cur)) {
      // 這里應(yīng)該每次reduce都產(chǎn)生一個(gè)新的depth
      let _depth = depth
      if (_depth > 0) {
        _depth--
        pre = [...pre, ...cur.myflat(_depth)]
      } else { // depth = 0控制結(jié)束遞歸
        if (cur.length !== 0) { // 空數(shù)組拋棄！
          pre.push(cur)
        }
      }
    } else {
      pre.push(cur)
    }
    return pre
  }, [])
}

console.log([1, 2, [3,[5,[1]]], 4].myflat())   //[ 1, 2, 3, [ 5, [ 1 ] ], 4 ]
console.log([1, 2, [3,[5,[1]]], 4].myflat(0)) //[ 1, 2, [ 3, [ 5, [ 1 ] ] ], 4 ]
console.log([1, 2, [3,[5,[1]]], 4].myflat(2)) //[ 1, 2, 3, 5, [ 1 ], 4 ]
console.log([1, 2, [3,[5,[1]]], 4].myflat(Infinity)) //[ 1, 2, 3, 5, 1, 4 ]
console.log([1, 2], [3]].myflat()) //[ 1, 2, 3 ]

最后簡(jiǎn)單介紹一下compose方法以及怎么利用reduce 一行代碼實(shí)現(xiàn)。 這可是中間件的原理，大家仔細(xì)聽(tīng)！

var compose = function(f,g) { //compose極簡(jiǎn)寫(xiě)法，僅做示例
    return function(x){
        return f(g(x))
    }

}

f和g都是函數(shù)，x是在他們之間通過(guò)"管道" 傳輸?shù)闹怠?br>compose看起來(lái)就像是飼養(yǎng)函數(shù)，你就是飼養(yǎng)員。你可以選擇多個(gè)有特點(diǎn)的函數(shù)，讓它們結(jié)合，產(chǎn)生一個(gè)嶄新的函數(shù)。

有個(gè)這個(gè)函數(shù)我們能干嘛呢
我們看一個(gè)例子：
我們現(xiàn)在想統(tǒng)計(jì)兩個(gè)字符串的總長(zhǎng)度 并打印：總長(zhǎng)度：xxx
一般的寫(xiě)法就是寫(xiě)一坨
函數(shù)式編程告訴我們不要這樣做，這么寫(xiě)耦合性太高了，不好維護(hù)，我們應(yīng)該想搭積木一樣，拆成若果基礎(chǔ)方法，然后在拼接起來(lái)。 數(shù)據(jù)從這些方法組成的管道中流淌一遍出來(lái)就得到想要的結(jié)果了。
好處就是低耦合，可組合（像不像dota里面的卡爾,qwe三個(gè)球搭配可以調(diào)出N多技能）
于是我們這么寫(xiě)

function sum(a,b){
    return a+b;
}
function len(str){
    return str.length
}
function addPrefix(content){
    return "總長(zhǎng)度："+content;
}
console.log(addPrefix(len(sum("x-1","y-2"))))  //看著怪怪的

這么寫(xiě)最后一句話真的很煩人
于是借用compose函數(shù)我們這么寫(xiě)

const newFn = compose(addPrefix,len,sum)
console.log(newFn("x-1","y-2"))

compose函數(shù)利用reduce我給出3種實(shí)現(xiàn)，下次有時(shí)間再細(xì)說(shuō)

//利用reduceRight
function compose(...fns){
    return function(...args){
        let lastFn = fns.pop();
        return fns.reduceRight((prev,current)=>{   //[addPrefix,len,sum]
            return current(prev) // 每次當(dāng)前函數(shù)處理得是之前函數(shù)處理得結(jié)果?。?！ 但是首個(gè)不一樣，首個(gè)就是首個(gè)函數(shù)得執(zhí)行結(jié)果
        },lastFn(...args)) //先得把參數(shù)傳入進(jìn)來(lái)
    }
}


//利用reduce 
// 遞歸規(guī)律如下
// a:addPrefix b:len
// a:function(...args){return addPrefix(len(...args))}  b:sum
function compose(...fns){
    return fns.reduce(function(a,b){
        return function(...args){ //compose返回的是一個(gè)函數(shù) 
            return a(b(...args)) 
        }
    })
}

//reduce簡(jiǎn)化版 一行代碼搞定   面試裝B必背
let compose = (...fns)=>fns.reduce((a,b)=>(...args)=>a(b(...args)));

今天的匯報(bào)就到這了，謝謝大家百忙中抽出時(shí)間閱讀，相信掌握上面reduce個(gè)個(gè)層次用例，面試這方面一定是滿(mǎn)滿(mǎn)的逼格。另外本人技術(shù)有限，如果哪寫(xiě)的不對(duì)，歡迎在評(píng)論區(qū)留言指出。

列表項(xiàng)目