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 相关文章推荐
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php判断是否为json格式的方法
2014/03/04 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
浅析node.js中close事件
2014/11/26 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
谈谈JS中的!!
2017/12/07 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
详谈python http长连接客户端
2017/06/12 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
党员培训思想汇报
2014/01/07 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
三年级学生评语
2014/04/23 职场文书
青春雷锋观后感
2015/06/10 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技