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 iframe的相互操作浅析
Oct 14 Javascript
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
Vue3中的Refs和Ref详情
Nov 11 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的历史和优缺点
2006/10/09 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
php生成HTML文件的类方法
2019/10/11 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
JavaScript 实现继承的几种方式
2021/02/19 Javascript
python 连接各类主流数据库的实例代码
2018/01/30 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
python内存管理机制原理详解
2019/08/12 Python
django 读取图片到页面实例
2020/03/27 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
python selenium xpath定位操作
2020/09/01 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
美术毕业生求职信
2014/02/25 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
教师教育教学随笔
2015/08/15 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
如何使用python包中的sched事件调度器
2022/04/30 Python