Array.prototype.reduce

image.png

這個(gè)方法可謂數(shù)組中最擱繞的方法了，關(guān)鍵這個(gè)玩意兒還可以當(dāng)高階函數(shù)，拍平函數(shù)。莫要著急，我們一起來研究研究的

第一步，打開冰箱
第二步，將大象??搬過來
第三步，給他推進(jìn)去
第四步，關(guān)上冰箱
第五步，我可少廢話了。。。。

于是，準(zhǔn)備出手手來，用我們靈活的手指頭開敲吧

Array.prototype.reduce = function(callback, initialValue) {
  //開始判斷this 也就是調(diào)用的這個(gè)東西存在不
  if (this == undefined) {
    throw new TypeError('this is null or undefined')
  }

  //判斷回調(diào)函數(shù)是否是函數(shù)
  if (typeof callback !== 'function') {
    throw new TypeError(callback + 'is not a function')
  }

  //將this取出  
  const O = Object(this)  //這里的操作有必要說一下
  /**
   * Object構(gòu)造函數(shù)給指定值創(chuàng)建一個(gè)對(duì)象包裝器， 很根據(jù)給定的參數(shù)創(chuàng)建對(duì)象
   * 如果是傳進(jìn)去是null和undefined 將會(huì)創(chuàng)建并返回一個(gè)空對(duì)象
   * 如果傳進(jìn)去是一個(gè)基本類型的值，則會(huì)構(gòu)造其包裝類型的對(duì)象
   * 如果是引用類型的值 仍回返回這個(gè)值 經(jīng)他們復(fù)制的變量保有和源對(duì)象相同的 
     引用地址
   * */
  const len = this.length
  let accumulator = initialValue
  let k = 0
  //如果第二個(gè)參數(shù)是undefined 則數(shù)組的第一個(gè)有效值作為累加器的初始值
  if (accumulator === undefined) {
    while (k < len && !(k in O)) {
      k ++ 
    }

    //如果超出界限，則拋出錯(cuò)誤
    if (k >= len) {
      throw new Error('this array is empty')
    }
    accumulator = O[k ++]
  }

  //第二個(gè)參數(shù)存在
  while (k < len) {
    if (k in O) {
      accumulator = callback.call(undefined, accumulator, O[k], k, O)
    }
    k ++
  }

  return accumulator

}

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
function add(pre, value, index, arr) {
  return pre + value
}

let res = arr.reduce(add)
console.log(res)

image.png

函數(shù)扁平化

// 結(jié)合 reduce 方法，實(shí)現(xiàn)合成函數(shù) compose （函數(shù)扁平化調(diào)用）
function compose(...funcs) {
  // 實(shí)現(xiàn)
  //=>funcs:傳遞的函數(shù)集合
  return function proxy(...args) {
    //=>args:第一次調(diào)用函數(shù)傳遞的參數(shù)集合
    let len = funcs.length

    if (len == 0) {
      return args
    }

    if (len === 1) {
      return funcs[0](...args)
    }

    //第一次執(zhí)行的時(shí)候 x是個(gè)函數(shù)，之后再執(zhí)行的時(shí)候x是個(gè)函數(shù)執(zhí)行的結(jié)果，所以需要進(jìn)行判斷
    return funcs.reduce((x, y) => {
      return typeof x === 'function' ? y(x(...args)) : y(x)
    })
  }
}

上述代碼是一種方法
另外人家的源碼（前端小菜鳥鳥覺得有些許繞嗷，真正理解也費(fèi)了些勁）

function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))

}

哇。。。這最后一個(gè)return里是啥玩意兒啊
研究明白后，了解到他其實(shí)是一個(gè)閉包，自執(zhí)行函數(shù)呢。類似于

function test(a, b) {
  return function (...args) {
    return a(b(...args))
  }
}
//test函數(shù)返回一個(gè)函數(shù) 函數(shù)中去return 操作

用這個(gè)compos去實(shí)踐一下昂

// 舉例: 現(xiàn)有 3 個(gè)函數(shù)，使一個(gè)數(shù)據(jù)經(jīng)過3個(gè)函數(shù)的處理后，返回最終的結(jié)果
function fn1(x) {
  return x + 1
}

function fn2(y) {
  return y + 2
}

function fn3(z) {
  return z + 3
}

// 一般調(diào)用
console.info(fn1(fn2(fn3(1)))) // 結(jié)果輸出 7

// 調(diào)用 compose 實(shí)現(xiàn)函數(shù)扁平化
const fn = compose(fn1, fn2, fn3)
console.info(fn(1)) // 結(jié)果輸出 7

對(duì) ，大概就是這么玩兒 得出的結(jié)果就是個(gè)7嗷

完事兒和同事一起捋了一下 第二個(gè)compose中的return每一步都是啥。給大家截圖康康的

image.png

誒，大致就是這么個(gè)玩意兒。大家可以細(xì)品一下的

當(dāng)然這個(gè)reduce我們?cè)诠ぷ髦杏弥涝趺从?。我們要知其然還要知其所以然，所以好好把這些東西通過自己的認(rèn)知去實(shí)敲一下其實(shí)是很有必要的。主要是其中的思想，是通往高級(jí)、資深前端工程師的必由之路啊~

俺這個(gè)聰明的傻瓜子，加油奧~~~！?。?/p>