JS数组reduce()方法原理及使用技巧解析


Posted in Javascript onJuly 14, 2020

1、语法

arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

callback (执行数组中每个值的函数,包含四个参数)

1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))

2、currentValue (数组中当前被处理的元素)

3、index (当前元素在数组中的索引)

4、array (调用 reduce 的数组)

initialValue (作为第一次调用 callback 的第一个参数。)如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

2、reduce的简单用法

var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和,10
console.log( mul ); //求乘积,24

1) 计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
 if(cur in pre){
  pre[cur]++
 }else{
  pre[cur] = 1 
 }
 return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

2)数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
  if(!pre.includes(cur)){
   return pre.concat(cur)
  }else{
   return pre
  }
},[])
console.log(newArr);// [1, 2, 3, 4]

3)将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
  return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

4)将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
  return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

5)对象里的属性求和

var result = [
  {
    subject: 'math',
    score: 10
  },
  {
    subject: 'chinese',
    score: 20
  },
  {
    subject: 'english',
    score: 30
  }
];

var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, 0);
console.log(sum) //60

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
原生js实现3D轮播图
Mar 21 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 #Javascript
详解javascript void(0)
Jul 13 #Javascript
Vue组件间数据传递的方式(3种)
Jul 13 #Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 #Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 #Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 #Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 #Javascript
You might like
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
vue单元格多列合并的实现
2020/11/26 Vue.js
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
《二泉映月》教学反思
2014/04/15 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
给朋友的赠语
2015/06/23 职场文书
大学生村官入党自传
2015/06/26 职场文书
爱国之歌(8首)
2019/09/29 职场文书
德劲DE1108畅想
2021/04/22 无线电
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
redis protocol通信协议及使用详解
2022/07/15 Redis