亲十指敲数组reduce方法

Array.prototype.reduce

image.png

这个方法可谓数组中最搁绕的方法了，关键这个玩意儿还可以当高阶函数，拍平函数。莫要着急，我们一起来研究研究的

第一步，打开冰箱
第二步，将大象🐘搬过来
第三步，给他推进去
第四步，关上冰箱
第五步，我可少废话了。。。。

于是，准备出手手来，用我们灵活的手指头开敲吧

Array.prototype.reduce = function(callback, initialValue) {
  //开始判断this 也就是调用的这个东西存在不
  if (this == undefined) {
    throw new TypeError('this is null or undefined')
  }

  //判断回调函数是否是函数
  if (typeof callback !== 'function') {
    throw new TypeError(callback + 'is not a function')
  }

  //将this取出  
  const O = Object(this)  //这里的操作有必要说一下
  /**
   * Object构造函数给指定值创建一个对象包装器， 很根据给定的参数创建对象
   * 如果是传进去是null和undefined 将会创建并返回一个空对象
   * 如果传进去是一个基本类型的值，则会构造其包装类型的对象
   * 如果是引用类型的值 仍回返回这个值 经他们复制的变量保有和源对象相同的 
     引用地址
   * */
  const len = this.length
  let accumulator = initialValue
  let k = 0
  //如果第二个参数是undefined 则数组的第一个有效值作为累加器的初始值
  if (accumulator === undefined) {
    while (k < len && !(k in O)) {
      k ++ 
    }

    //如果超出界限，则抛出错误
    if (k >= len) {
      throw new Error('this array is empty')
    }
    accumulator = O[k ++]
  }

  //第二个参数存在
  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

函数扁平化

// 结合 reduce 方法，实现合成函数 compose （函数扁平化调用）
function compose(...funcs) {
  // 实现
  //=>funcs:传递的函数集合
  return function proxy(...args) {
    //=>args:第一次调用函数传递的参数集合
    let len = funcs.length

    if (len == 0) {
      return args
    }

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

    //第一次执行的时候 x是个函数，之后再执行的时候x是个函数执行的结果，所以需要进行判断
    return funcs.reduce((x, y) => {
      return typeof x === 'function' ? y(x(...args)) : y(x)
    })
  }
}

上述代码是一种方法
另外人家的源码（前端小菜鸟鸟觉得有些许绕嗷，真正理解也费了些劲）

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)))

}

哇。。。这最后一个return里是啥玩意儿啊
研究明白后，了解到他其实是一个闭包，自执行函数呢。类似于

function test(a, b) {
  return function (...args) {
    return a(b(...args))
  }
}
//test函数返回一个函数 函数中去return 操作

用这个compos去实践一下昂

// 举例: 现有 3 个函数，使一个数据经过3个函数的处理后，返回最终的结果
function fn1(x) {
  return x + 1
}

function fn2(y) {
  return y + 2
}

function fn3(z) {
  return z + 3
}

// 一般调用
console.info(fn1(fn2(fn3(1)))) // 结果输出 7

// 调用 compose 实现函数扁平化
const fn = compose(fn1, fn2, fn3)
console.info(fn(1)) // 结果输出 7

对，大概就是这么玩儿得出的结果就是个7嗷

完事儿和同事一起捋了一下第二个compose中的return每一步都是啥。给大家截图康康的

image.png

诶，大致就是这么个玩意儿。大家可以细品一下的

当然这个reduce我们在工作中用知道怎么用。我们要知其然还要知其所以然，所以好好把这些东西通过自己的认知去实敲一下其实是很有必要的。主要是其中的思想，是通往高级、资深前端工程师的必由之路啊~

俺这个聪明的傻瓜子，加油奥~~~！！！

最后编辑于：2020.11.13 11:10:10