海纳百川,有容乃大

定义:

reduce()方法接受一个函数作为累加器,数组中的每个值(从左向右)开始缩减,最终计算为一个值。对空数组是不会执行回调函数的。

案例:

  1. 计算数组总和:

    var num = [1,2,3,4,5];
    var res = num.reduce(function(total,num){
    return total+num;
    //return total + Math.round(num);//对数组元素四舍五入并计算总和
    },0);
    console.log(res);//
    //num.reduce((total,num) => total += num, 0);
    //没有初始值initialValue(即上面例子中的0),当数组为0时会抛出异常提示reduce函数没有初始值,所以为兼容性一般加上initialValue
  2. 合并二维数组
    var red = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);
    }, []);
    console.log(red)
    VM291:4 (6) [0, 1, 2, 3, 4, 5]
  3. 统计一个数组中有多少个不重复的单词
    不用reduce时:
    var arr = ["apple","orange","apple","orange","pear","orange"];
    function getWordCnt(){
    var obj = {};
    for(var i= 0, l = arr.length; i< l; i++){
    var item = arr[i];
    obj[item] = (obj[item] +1 ) || 1;
    }
    return obj;
    }
    console.log(getWordCnt());
    VM3704:14 {apple: 2, orange: 3, pear: 1} 用reduce时:
    var arr = ["apple","orange","apple","orange","pear","orange"];
    function getWordCnt(){
    return arr.reduce(function(prev,next){
    prev[next] = (prev[next] + 1) || 1;
    return prev;
    },{});
    }
    console.log(getWordCnt());
    VM3704:14 {apple: 2, orange: 3, pear: 1}

理解:

reduce(callback,initialValue)会传入两个参数,回调函数(callback)和初始值(initialValue)。当没有传入初始值时,prev是从数组中第一个元素开始的,next是数组的第二个元素;当传入初始值(initialValue)后,第一个prev将是initialValue,next将是数组中的第一个元素。

例如:

var arr = ["apple","orange"];
function noPassValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);
return prev;
});
} function passValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);
prev[next] = 1;
return prev;
},{});
}
console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());

运行结果为:

文章转载自:https://www.cnblogs.com/mafeng/p/10249887.html

JS中的reduce函数的更多相关文章

  1. js中的reduce()函数

    1. 首先看下语法如下 2 . 写了个demo如下 var fa = [1,2,3,4] function red(a, b) { console.log(arguments); return a + ...

  2. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

  3. underscore.js中的节流函数debounce及trottle

    函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...

  4. js中如何在一个函数里面执行另一个函数

    1.js中如何在函数a里面执行函数b function a(参数c){ b(); } function b(参数c){ } 方法2: <script type="text/javasc ...

  5. JavaScript -- 时光流逝(七):js中的全局函数

    JavaScript -- 知识点回顾篇(七):js中的全局函数 全局函数可用于所有内建的 JavaScript 对象. (1) encodeURI():把字符串编码为 URI. <script ...

  6. js中的匿名函数和匿名自执行函数

    1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景:   <input type="button" value="点击" id ...

  7. JS中关于把函数作为另一函数的参数的几点小总结

    //JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即可.//当然调用时要穿另一个真正的定义好的函数/*funct ...

  8. js中的Generators函数

    js中的Generators函数 generator一般操作 generator函数的作用就是函数体分段执行,yield表示分隔点 function *test() { console.log(1); ...

  9. JS中的回调函数实例浅析

    本文实例讲述了JS中的回调函数.分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义: ? 1 2 3 document.getElementB ...

随机推荐

  1. [Tvvj1391]走廊泼水节(最小生成树)

    [Tvvj1391]走廊泼水节 Description 给定一棵N个节点的树,要求增加若干条边,把这棵树扩充为完全图,并满足图的唯一最小生成树仍然是这棵树.求增加的边的权值总和最小是多少. 完全图:完 ...

  2. python列表转json树菜单

    1.列表数据 data = [ { 'id': 1, 'parent_id': 2, 'name': "Node1" }, { 'id': 2, 'parent_id': 5, ' ...

  3. MySQL重复数据中限定操作n条

    对于一个表,有时可能里面有很多重复的条,比如: +-----------+---------+| coupon_id | user_id |+-----------+---------+| 8 | 1 ...

  4. springboot logback 配置 通配符不行就这样

    <?xml version="1.0" encoding="UTF-8"?><configuration> <property n ...

  5. redis学习 --List

    1:添加   lpush    rpush     如果没有key的话,会报错.   lpushx    rpushx    如果没有key的话,不做任何反应. 2:得到 lpop   rpop   ...

  6. php key()函数 语法

    php key()函数 语法 作用:返回数组内部指针当前指向元素的键名.大理石构件支架 语法:key(array) 参数: 参数 描述 array 必需.规定要使用的数组. 说明:返回数组内部指针当前 ...

  7. Pycharm创建模板头部默认

    PyCharm 打开,点击左上角 “FILE” 进入 “Settings”,进行头文件设置: 如下: 我的模板: #!/usr/bin/env python# -*- coding:utf-8 -*- ...

  8. python读取数据

    #读取一行数据,去掉头尾空格 line = sys.stdin.readline().strip() #line类型为字符串 #字符串变成列表 line = sys.stdin.readline(). ...

  9. 23 October

    [HAOI2010] 最长公共子序列 求S串与T串的 最长公共子序列 的 长度 及其 个数. 动态规划递推式: \[ f(i,j)=\max\left\{ f(i-1,j), f(i,j-1) \ri ...

  10. js+html实现玫瑰花绽放

    玫瑰花示例demo: <!DOCTYPE html> <html> <head> <title>玫瑰花</title> <meta c ...