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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
Vue 实现手动刷新组件的方法
Feb 19 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 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
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
移动端js图片查看器
2016/11/17 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python使用PyQt5的简单方法
2019/02/27 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
优秀应届生推荐信
2013/11/09 职场文书
代理班主任的自我评价
2014/02/04 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers