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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
jquery 手势密码插件
Mar 17 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
微信小程序实现分享朋友圈的图片功能示例
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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP+DBM的同学录程序(3)
2006/10/09 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php中使用sftp教程
2015/03/30 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
python 删除非空文件夹的实例
2018/04/26 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
公司门卫管理制度
2014/02/01 职场文书
采购助理岗位职责
2014/02/16 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
党员检讨书
2014/10/13 职场文书
学生个人评语大全
2015/01/04 职场文书
内乡县衙导游词
2015/02/05 职场文书
python执行js代码的方法
2021/05/13 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android