详解JS数组Reduce()方法详解及高级技巧

基本概念

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

语法:

arr.reduce(callback,[initialValue])
  • callback (执行数组中每个值的函数,包含四个参数)
  • previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
  • currentValue (数组中当前被处理的元素)
  • index (当前元素在数组中的索引)
  • array (调用 reduce 的数组)
  • initialValue (作为第一次调用 callback 的第一个参数。)

简单应用

例1:

var items = [10, 120, 1000];
// our reducer function
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };
// do the job
var total = items.reduce(reducer, 0);
console.log(total); // 1130

可以看出,reduce函数根据初始值0,不断的进行叠加,完成最简单的总和的实现。

reduce函数的返回结果类型和传入的初始值相同,上个实例中初始值为number类型,同理,初始值也可为object类型。

例2:

var items = [10, 120, 1000];
// our reducer function
var reducer = function add(sumSoFar, item) {
 sumSoFar.sum = sumSoFar.sum + item;
 return sumSoFar;
};
// do the job
var total = items.reduce(reducer, {sum: 0});
console.log(total); // {sum:1130}

进阶应用

使用reduce方法可以完成多维度的数据叠加。如上例中的初始值{sum: 0},这仅仅是一个维度的操作,如果涉及到了多个属性的叠加,如{sum: 0,totalInEuros: 0,totalInYen: 0},则需要相应的逻辑进行处理。

在下面的方法中,采用分而治之的方法,即将reduce函数第一个参数callback封装为一个数组,由数组中的每一个函数单独进行叠加并完成reduce操作。所有的一切通过一个manager函数来管理流程和传递初始参数。

var manageReducers = function(reducers) {
 return function(state, item) {
  return Object.keys(reducers).reduce(
   function(nextState, key) {
    reducers[key](state, item);
    return state;
   },
   {}
  );
 }
};

上面就是manager函数的实现,它需要reducers对象作为参数,并返回一个callback类型的函数,作为reduce的第一个参数。在该函数内部,则执行多维的叠加工作(Object.keys())。

通过这种分治的思想,可以完成目标对象多个属性的同时叠加,完整代码如下:

var reducers = {
 totalInEuros : function(state, item) {
  return state.euros += item.price * 0.897424392;
 },
 totalInYen : function(state, item) {
  return state.yens += item.price * 113.852;
 }
};
var manageReducers = function(reducers) {
 return function(state, item) {
  return Object.keys(reducers).reduce(
   function(nextState, key) {
    reducers[key](state, item);
    return state;
   },
   {}
  );
 }
};
var bigTotalPriceReducer = manageReducers(reducers);
var initialState = {euros:0, yens: 0};
var items = [{price: 10}, {price: 120}, {price: 1000}];
var totals = items.reduce(bigTotalPriceReducer, initialState);
console.log(totals);

在来一个例子:

某同学的期末成绩如下表示

var result = [
  {
    subject: 'math',
    score: 88
  },
  {
    subject: 'chinese',
    score: 95
  },
  {
    subject: 'english',
    score: 80
  }
];

如何求该同学的总成绩?

var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, 0);

假设该同学因为违纪被处罚在总成绩总扣10分,只需要将初始值设置为-10即可。

var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, -10);

我们来给这个例子增加一点难度。假如该同学的总成绩中,各科所占的比重不同,分别为50%,30%,20%,我们应该如何求出最终的权重结果呢?

解决方案如下:

var dis = {
  math: 0.5,
  chinese: 0.3,
  english: 0.2
}
var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, -10);
var qsum = result.reduce(function(prev, cur) {
  return cur.score * dis[cur.subject] + pre;
}, 0)
console.log(sum, qsum);

再看一个例子,如何知道一串字符串中每个字母出现的次数?

var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) {
  res[cur] ? res[cur] ++ : res[cur] = 1
  return res;
}, {})

由于可以通过第二参数设置叠加结果的类型初始值,因此这个时候reduce就不再仅仅只是做一个加法了,我们可以灵活的运用它来进行各种各样的类型转换,比如将数组按照一定规则转换为对象,也可以将一种形式的数组转换为另一种形式的数组,大家可以动手去尝试一样。

[1, 2].reduce(function(res, cur) {
  res.push(cur + 1);
  return res;
}, [])

koa的源码中,有一个only模块,整个模块就一个简单的返回reduce方法操作的对象:

var only = function(obj, keys){
 obj = obj || {};
 if ('string' == typeof keys) keys = keys.split(/ +/);
 return keys.reduce(function(ret, key){
  if (null == obj[key]) return ret;
  ret[key] = obj[key];
  return ret;
 }, {});
};

通过对reduce概念的理解,这个模块主要是想新建并返回一个obj对象中存在的keys的object对象。

var a = {
  env : 'development',
  proxy : false,
  subdomainOffset : 2
}
only(a,['env','proxy'])  // {env:'development',proxy : false}

总结

以上所述是小编给大家介绍的详解JS数组Reduce()方法详解及高级技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 详解JavaScript中数组的reduce方法

    介绍 我们先来看看这个方法的官方概述:reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. 你一定也和我一样看的有点迷糊,其实reduce接收的就是一个回调函数,去调用数组里的每一项,直到数组结束. 我们来举个例子大家就很明白了. 假设我有一串数组,数组里放的全是数字,我要算出这些数字的总和是多少.正常情况下我们会循环,然后一个个加,有了reduce就不用那么麻烦了,只用一行代码. var total = [0,1,2,3,4

  • JavaScript中自带的 reduce()方法使用示例详解

    1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if

  • Javascript中内建函数reduce的应用详解

    前言 一般而言,可以通过reduce方法实现的逻辑都可以通过forEach方法来变相的实现,虽然不清楚浏览器的js引擎是如何在C++层面实现这两个方法,但是可以肯定的是reduce方法肯定也存在数组的遍历,在具体实现细节上是否针对数组项的操作和存储做了什么优化,则不得而知. 数组的reduce方法的应用 reduce方法有两个参数,第一个参数是一个callback,用于针对数组项的操作:第二个参数则是传入的初始值,这个初始值用于单个数组项的操作.需要注意的是,reduce方法返回值并不是数组,而

  • JavaScript中reduce()方法的使用详解

    JavaScript 数组reduce()方法同时应用一个函数针对数组的两个值(从左到右),以减至一个值. 语法 array.reduce(callback[, initialValue]); 下面是参数的详细信息: callback : 函数执行在数组中每个值 initialValue : 对象作为第一个参数回调的第一次调用使用 返回值: 返回数组的减少单一个值 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准; 因此它可能不存在在标准的其他实现.为了使它工作,你需要添加

  • JavaScript mapreduce工作原理简析

    谷歌在2003到2006年间连续发表了三篇非常有影响力的文章,分别是2003年在SOSP上发布的GFS,2004年在OSDI上发布的MapReduce,以及2006年在OSDI上发布的BigTable.GFS是文件系统相关的,其对后来的分布式文件系统设计具有指导意义:MapReduce是一种并行计算的编程模型,用于作业调度:BigTable是一个用于管理结构化数据的分布式存储系统,构建在GFS.Chubby.SSTable等Google技术之上.相当多的Google应用使用了这三种技术,比如Go

  • JavaScript reduce和reduceRight详解

    reduce 方法(升序) 语法: array1.reduce(callbackfn[, initialValue]) 参数 定义 array1 必需.一个数组对象. callbackfn 必需.一个接受最多四个参数的函数.对于数组中的每个元素,reduce 方法都会调用 callbackfn 函数一次. initialValue 可选.如果指定 initialValue,则它将用作初始值来启动累积.第一次调用 callbackfn 函数会将此值作为参数而非数组值提供 返回值: 通过最后一次调用

  • 详解JS: reduce方法实现 webpack多文件入口

    1. reduce 方法介绍 1.1 简单场景 reduce 函数的设计意图就是方便进行叠加运算: var arr = [0, 1, 2, 3]; // reduce 实现累加 var total = arr.reduce(function (pre, cur){ return pre + cur; }, 0); console.log(total); // 6 上述代码中,reduce 方法有两个参数,第一个参数是一个 callback,用于进行计算的函数:第二个参数则是累加计算的初始值: 0

  • 详解JS数组Reduce()方法详解及高级技巧

    基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. 语法: arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue (上

  • JS数组Reduce方法功能与用法实例详解

    本文实例讲述了JS数组Reduce方法功能与用法.分享给大家供大家参考,具体如下: 概述 一直以来都在函数式编程的大门之外徘徊,要入门的话首先得熟悉各种高阶函数,数组的reduce方法就是其中之一. reduce方法将会对数组元素从左到右依次执行reducer函数,然后返回一个累计的值.举个形象的例子:你要组装一台电脑,买了主板.CPU.显卡.内存.硬盘.电源...这些零件是组装电脑的必要条件. 装的过程可以简单概括为拆掉每个零件的包装,再装到一起.类比一下reduce函数就可以明白了,那些零件

  • JS数组reduce()方法原理及使用技巧解析

    1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. callback (执行数组中每个值的函数,包含四个参数) 1.previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue)) 2.currentValue (数组中当前被处理的元素)

  • JavaScript数组reduce()方法的语法与实例解析

    前言 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪

  • JavaScript数组reduce()方法使用实例详解

    目录 前言 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平 总结 前言 今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.reduce(reducer) reduce是数组原型对象上的一个方法,可以帮助我们操作数组.它将另一个函数作为其参数,可以称为reducer. reducer

  • jquery 遍历数组 each 方法详解

    JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li') $('tagName#id): 通过元素的id和标签名 $(':checkbox'):拿取input的 type为checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="

  • 在一个页面重复使用一个js函数的方法详解

    1.给每个拥有相同行为的问题DOM节点一个相同的class类,如question,同时给不同的问题一个不同的标识ID如 id="question1" id="question2"...诸如此. 2.给类.question绑定点击事件,在触发函数里面先判断当前点击的这个类的id,即可知道你要操作的是哪一个问题,然后调用你的那个伸缩函数即可. <!DOCTYPE html> <html> <head lang="en"&

  • 对python以16进制打印字节数组的方法详解

    一.问题描述 如果直接用print打印bytes的话,有时候会直接显示ascii对应的字符,看起来很蛋疼. 二.运行效果 上面一行是直接用print打印的结果,很明显,第一个字节0x7b就被转换成'{'了. 三.代码 那么,如何输入上图中最后一行的格式呢,很简单: def print_hex(bytes): l = [hex(int(i)) for i in bytes] print(" ".join(l)) 以上这篇对python以16进制打印字节数组的方法详解就是小编分享给大家的全

  • JS使用reduce()方法处理树形结构数据

    定义 reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值. reduce() 与forEach().map().filter()这些方法一样,也会对数组中的每一项进行遍历,但是reduce() 可以将遍历的前一个数组项产生的结果与当前遍历项进行运算. 语法 array.reduce(function(prev, cur, index, array){ ... }, init); 回调函数中的参数: prev 必需.表示调用回调时的返

  • JS数组reduce你不得不知道的25个高级用法

    前言 reduce作为ES5新增的常规数组方法之一,对比forEach.filter和map,在实际使用上好像有些被忽略,发现身边的人极少使用它,导致这个如此强大的方法被逐渐埋没. 如果经常使用reduce,怎么可能放过如此好用的它呢!我还是得把他从尘土中取出来擦干净,奉上它的高级用法给大家.一个如此好用的方法不应该被大众埋没. 下面对reduce的语法进行简单说明,详情可查看MDN的reduce()的相关说明. 定义:对数组中的每个元素执行一个自定义的累计器,将其结果汇总为单个返回值 形式:a

随机推荐