js中的reduce()函数讲解


Posted in Javascript onJanuary 18, 2019

定义:

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

js中的reduce()函数讲解

案例

1.数组求和

// 1.数组求和
  var arr = [1,5,8,6,15,78,65,25,48,55]
  var sum = arr.reduce(function(total,currentValue){
    return total+currentValue;
  });
  console.log(sum);//306
  var eachSum = 0;
  arr.forEach(function(currentValue){
    eachSum += currentValue;
  })
  console.log(eachSum);//306

2.合并二维数组

//2.合并二维数组
  var twoArr = [['mu','zi'],['dig','big'],['lucky','jiji']];
  var oneArr = twoArr.reduce(function(total,currentValue){
    // console.log(total)
    return total.concat(currentValue);
  })
  console.log(oneArr);//["mu", "zi", "dig", "big", "lucky", "jiji"]

3.统计一个数组中有多少个不重复的单词:

//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());//{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());//{apple: 2, orange: 3, pear: 1}

4.对reduce的理解:

reduce(callback,initiaValue)会传入两个变量,回调函数(callback)和初始值(initiaValue)。

假设函数有个传入参数,prev和next,index和array。 Prev和next是你必须要了解的。

当没有传入初始值时,prev是从数组中第一个元素开始的,next是第二个函数。

但是当传入初始值(initiaValue)后,第一个prev将是initivalValue,next将是数组中的第一个元素。

比如:

// 4.对reduce的理解:
  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()); 
  /*
  VM415673:4 prev: apple 
  VM415673:5 next: orange 
  VM415673:4 prev: apple 
  VM415673:5 next: orange 
  VM415673:19 No Additional parameter: apple 
  VM415673:20 ---------------- 
  VM415673:13 prev: {} 
  VM415673:14 next: apple 
  VM415673:13 prev: {apple: 1} 
  VM415673:14 next: orange 
  VM415673:21 With {} as an additional parameter: {apple: 1, orange: 1}
  */

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
微信小程序实现分享朋友圈的图片功能示例
Jan 18 #Javascript
vue-cli3 karma单元测试的实现
Jan 18 #Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 #Javascript
如何解决.vue文件url引用文件的问题
Jan 18 #Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
vue.js实现的幻灯片功能示例
Jan 18 #Javascript
vue ssr 实现方式(学习笔记)
Jan 18 #Javascript
You might like
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python对象体系深入分析
2014/10/28 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
详解Python 函数如何重载?
2019/04/23 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
实习期自我鉴定
2013/10/11 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
运动会演讲稿50字
2014/08/25 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python