ES5 数组方法reduce()

ES5 数组方法reduce()

reduce()是es5版本中的一个数组方法,它的接收两个参数:
第一个参数是一个函数,成为累加器函数,目的是对数组中的每一项进行累计操作
第二个参数是一个初始值,作为累计函数的起始值,如果这个参数没有,则默认从数组中的第二项开始(currentIndex = 1), 对第一项和第二项进行累计
返回的是累加后的结果。
注意这个累加函数不是指加法,具体看例子:

  let a = [3,6,10,8,2];
  let b = a.reduce((prevItem,curItem,curIndex,arr) => {
    console.log(prevItem,curItem,curIndex,arr);
    return prevItem * curItem;
  });
  console.log("a,b", a, b);

用自己的方法重写reduce()

function myReduce (fn, initItem) {
    //console.log(this);
    let arr = this;
    let i = 0, 
        prevItem = null;
    if (typeof initItem !== "undefined") {
      i = 0;
      prevItem = initItem;
    } else {
      i = 1;
    }
    for (i; i < arr.length; i++) {
      if (prevItem === null && i === 1) {
        prevItem = arr[0]
      }
      if (typeof fn === "function") {
        prevItem = fn (prevItem, arr[i], i, arr);
      }
    }
    return prevItem;
  }
  Array.prototype.myReduce = myReduce;
  let c = a.myReduce((prevItem,curItem,curIndex,arr) => {
    console.log(prevItem,curItem,arr);
    return prevItem * curItem;
  });
console.log("a,c", a, c);

redux源码里面有个组合函数,就是用reduce()实现的

export default function compose(...funcs) {
    if (funcs.length === 0) {
        return arg => arg
    }
    
    if (funcs.length === 1) {
        return funcs[0]
    }
    // 这里注意,因为reduce没有传入第二个参数initValue
    // 此时a的初始值为第0项, b为第1项
    return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
const fa = (x) => x + 1;
const fb = (x) => x + 2;
const fc = (x) => x + 3;
const fd = (x) => x + 4;

let x = 0;
console.log(fa(fb(fc(fd(x)))));

let fn = function () {
  //console.log(...arguments);
  return [fa,fb,fc,fd].reduce((prev,cur) => {
    console.log(prev,cur);
    return cur(prev)
  },...arguments);
}
console.log(fn(x))

使用myReduce()实现:

let mfn = function () {
  //console.log(...arguments);
  return [fa,fb,fc,fd].myReduce((prev,cur) => {
    //console.log(prev,cur);
    return cur(prev)
  },...arguments);
}
console.log('mfn:',mfn(0))
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 数组创建 javascript中创建数组的方式有两种: 第一种是 使用Array构造函数: 第二种是 使用数组字面...
    那年点夏阅读 4,050评论 4 3
  • 数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组...
    Sachie阅读 4,440评论 0 7
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 4,776评论 0 1
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 8,449评论 0 4
  • 如需转载, 请咨询作者, 并且注明出处.有任何问题, 可以关注我的微博: coderwhy, 或者添加我的微信: ...
    coderwhy阅读 17,787评论 17 133