基本概念

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

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

语法:

  1. arr.reduce(callback,[initialValue])
  • callback (执行数组中每个值的函数,包含四个参数)

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

简单应用

例1:

  1. var items = [10, 120, 1000];
  2.  
  3. // our reducer function
  4. var reducer = function add(sumSoFar, item) { return sumSoFar + item; };
  5.  
  6. // do the job
  7. var total = items.reduce(reducer, 0);
  8.  
  9. console.log(total); //

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

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

例2:

  1. var items = [10, 120, 1000];
  2.  
  3. // our reducer function
  4. var reducer = function add(sumSoFar, item) {
  5. sumSoFar.sum = sumSoFar.sum + item;
  6. return sumSoFar;
  7. };
  8.  
  9. // do the job
  10. var total = items.reduce(reducer, {sum: 0});
  11.  
  12. console.log(total); // {sum:1130}

进阶应用

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

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

  1. var manageReducers = function(reducers) {
  2. return function(state, item) {
  3. return Object.keys(reducers).reduce(
  4. function(nextState, key) {
  5. reducers[key](state, item);
  6. return state;
  7. },
  8. {}
  9. );
  10. }
  11. };

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

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

  1. var reducers = {
  2. totalInEuros : function(state, item) {
  3. return state.euros += item.price * 0.897424392;
  4. },
  5. totalInYen : function(state, item) {
  6. return state.yens += item.price * 113.852;
  7. }
  8. };
  9.  
  10. var manageReducers = function(reducers) {
  11. return function(state, item) {
  12. return Object.keys(reducers).reduce(
  13. function(nextState, key) {
  14. reducers[key](state, item);
  15. return state;
  16. },
  17. {}
  18. );
  19. }
  20. };
  21.  
  22. var bigTotalPriceReducer = manageReducers(reducers);
  23. var initialState = {euros:0, yens: 0};
  24. var items = [{price: 10}, {price: 120}, {price: 1000}];
  25. var totals = items.reduce(bigTotalPriceReducer, initialState);
  26. console.log(totals);

在来一个例子:
某同学的期末成绩如下表示

  1. var result = [
  2. {
  3. subject: 'math',
  4. score: 88
  5. },
  6. {
  7. subject: 'chinese',
  8. score: 95
  9. },
  10. {
  11. subject: 'english',
  12. score: 80
  13. }
  14. ];

如何求该同学的总成绩?

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

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

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

如何求该同学三门课程的最大值和最小值

  1. var max = result.reduce(function(prev, cur) {
  2. var prev = parseInt(prev);
  3. var curr = parseInt(cur.score);
  4. if(prev>curr){
  5. return prev;
  6. }else{
  7. return curr;
  8. }
  9. }, 0);
  10.  
  11. var min = result.reduce(function(prev, cur) {
  12. var prev = parseInt(prev);
  13. var curr = parseInt(cur.score);
  14. if(prev>curr){
  15. return curr;
  16. }else{
  17. return prev;
  18. }
  19. }, 0);

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

解决方案如下:

  1. var dis = {
  2. math: 0.5,
  3. chinese: 0.3,
  4. english: 0.2
  5. }
  6.  
  7. var sum = result.reduce(function(prev, cur) {
  8. return cur.score + prev;
  9. }, -10);
  10.  
  11. var qsum = result.reduce(function(prev, cur) {
  12. return cur.score * dis[cur.subject] + pre;
  13. }, 0)
  14.  
  15. console.log(sum, qsum);

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

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

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

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

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

  1. var only = function(obj, keys){
  2. obj = obj || {};
  3. if ('string' == typeof keys) keys = keys.split(/ +/);
  4. return keys.reduce(function(ret, key){
  5. if (null == obj[key]) return ret;
  6. ret[key] = obj[key];
  7. return ret;
  8. }, {});
  9. };

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

  1. var a = {
  2. env : 'development',
  3. proxy : false,
  4. subdomainOffset : 2
  5. }
  6. only(a,['env','proxy']) // {env:'development',proxy : false}
  1. 本文转自:https://segmentfault.com/a/1190000010731933

js数组最大值和最小值计算的更多相关文章

  1. [原创]获取JS数组最大值、最小值

    核心关键 JS有Array数组对象,使用prototype内置属性扩展,增加Array数组max().min()方法 具体代码 //最小值 Array.prototype.min = function ...

  2. java基础:方法的定义和调用详细介绍,方法同时获取数组最大值和最小值,比较两个数组,数组交换最大最小值,附练习案列

    1. 方法概述 1.1 方法的概念 方法(method)是将具有独立功能的代码块组织成为一个整体,使其具有特殊功能的代码集 注意: 方法必须先创建才可以使用,该过程成为方法定义 方法创建后并不是直接可 ...

  3. js 数组 数组 最大值、最小值 算法(转载)

    一:https://www.cnblogs.com/zhouyangla/p/8482010.html 1.排序法 首先我们给数组进行排序,可以按照从小到大的顺序来排,排序之后的数组中第一个和最后一个 ...

  4. C语言 · 最大值与最小值计算

    输入11个整数,计算它们的最大值和最小值. 样例输入 0 1 2 3 4 5 6 7 8 9 10 样例输出 10 0   #include<stdio.h> int main(){ ]; ...

  5. Java数组最大值和最小值

    package com.mybatis.demo.exercise; /** * @author yinsenxin */ public class ArrayMaxAndMin { public s ...

  6. js取一维数组最大值,最小值

    最近项目中遇到了,处理数组数据问题:     var newStrs=[1,2,3,4];               alert(Math.min.apply(null,newStrs));  // ...

  7. js获取数组最大值或最小值

    数组对象arr中属性num最大值最小值 // 最大值 Math.max.apply(Math,arr.map(item => { return item.num })) arr.sort((a, ...

  8. JavaScript 获取数组的最大值和最小值

    js获取数组最大值和最小值 使用apply方法: var a = [1,2,3,5]; console.log(Math.max.apply(null, a));//最大值 console.log(M ...

  9. C语言:用指针求最大值和最小值

    用指针求数组最大值和最小值(10分) 题目内容: 用指针求含有十个元素的数组最大值和最小值 主函数参考 int main() { int a[10],i,maxnum,minnum; for(i=0; ...

随机推荐

  1. Resin install document

    Centos6快速安装文档 resin3.1.13 软件下载地址: http://caucho.com/products/resin/download/gpl#download #系统环境[root@ ...

  2. C#创建word,操作、读写

    要使用C#操作word,首先要添加引用: 1.添加引用->COM->Microsoft Word 11.0 Object Library 2.在.cs文件中添加 using Word;下面 ...

  3. 修改Nginx与Apache配置参数解决http状态码:413上传文件大小限制问题

    一.修改Nginx上传文件大小限制 我们使用ngnix做web server的时候,nginx对上传文件的大小有限制,默认是1M. 当超过大小的时候会报413(too large)错误.这个时候我们要 ...

  4. PHP实现双向链表

    看了很久数据结构但是没有怎么用过,在网上看到了关于PHP的数据结构,学习了一下,与大家一起分享一下.上一次分享了链表,这次来补充说一下双向链表. 简短不割                        ...

  5. linux查看CPU性能及工作状态的指令mpstat,vmstat,iostat,sar,top

    转载:http://www.cnblogs.com/xianghang123/archive/2011/08/25/2153591.html 衡量CPU性能的指标: 1,用户使用CPU的情况:CPU运 ...

  6. 即将来到: CSS Feature Queries (CSS特性查询)

    Feature Queries 是CSS3 Conditional Rules specification中的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否 ...

  7. css 小问题解决方法整理

    1,图片垂直居中: 设置包括图片的div:height=20px:line-height=20px. 设置图片vertical-align:middle 就可以. 2,行内块元素有3px bug,可通 ...

  8. Android 代码实现来电拦截

    为了更好地理解这个Demo,我先向大家介绍一下需求与功能. 需求: 每天都会有很多无聊的电话,比如推销商品等,占用我们大量时间不说,有时候还会打乱我们的思路,扰乱我们的正常生活.所以实现一个对某些号码 ...

  9. T-SQL 之 表变量和临时表

    一.表变量 表变量在SQL Server 2000中首次被引入.表变量的具体定义包括列定义,列名,数据类型和约束.而在表变量中可以使用的约束包括主键约束,唯一约束,NULL约束和CHECK约束(外键约 ...

  10. SQLServer 之 Group By 和 Compute By

    创建测试表,如下: CREATE TABLE tableTest ( Id INT PRIMARY KEY, DepartMent ), Name ), Salary int ) 添加测试数据,如下图 ...