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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php中cookie的使用方法
2014/03/29 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python队列的定义与使用方法示例
2017/06/24 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python pygame实现2048游戏
2018/11/20 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
家长对孩子的评语
2014/04/18 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
2014年资料员工作总结
2014/11/18 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python