JavaScript数组reduce()方法的语法与实例解析


Posted in Javascript onJuly 07, 2021

前言

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

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

Javascript数组方法中,相比map、filter、forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪些妙用之处,下面从reduce语法开始介绍。

1、语法

array.reduce(function(prev, cur, index, arr), initialValue)
//简写方便解释
arr.reduce(callback,[initialValue])

参数含义:

callback (执行数组中每个值的函数,包含四个参数)
    1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
    2、currentValue (数组中当前被处理的元素)
    3、index (当前元素在数组中的索引)
    4、array (调用 reduce 的数组)
initialValue (作为第一次调用 callback 的第一个参数。)类似相当于设置初始值

2、实例解析 initialValue 参数

先看第一个例子:

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
//打印结果:
//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10

这里可以看出,上面的例子index是从1开始的,第一次的prev的值是数组的第一个值。数组长度是4,但是reduce函数循环3次。

再看第二个例子:

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},0) //注意这里设置了初始值
console.log(arr, sum);
//打印结果:
//0 1 0
//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10

这个例子index是从0开始的,第一次的prev的值是我们设置的初始值0,数组长度是4,reduce函数循环4次。

结论:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

注意:如果这个数组为空,运用reduce是什么情况?

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
//报错,"TypeError: Reduce of empty array with no initial value"

但是要是我们设置了初始值就不会报错,如下:

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},0)
console.log(arr, sum); // [] 0

所以一般来说我们提供初始值通常更安全

3、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

4、reduce的高级用法

(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]

(3)将多维数组转化为一维

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]

(4)对象里的属性求和

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数组reduce()方法的文章就介绍到这了,更多相关JS数组reduce()方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
js改变Iframe中Src的方法
May 05 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
基于vue实现分页效果
Nov 06 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
Vue项目打包、合并及压缩优化网页响应速度
教你使用vscode 搭建react-native开发环境
idea编译器vue缩进报错问题场景分析
jQuery实现广告显示和隐藏动画
Vue实现导入Excel功能步骤详解
javascript数组includes、reduce的基本使用
Jul 02 #Javascript
You might like
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
python保存字符串到文件的方法
2015/07/01 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python实现数据图表
2017/07/29 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
python求前n个阶乘的和实例
2020/04/02 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
蔻驰英国官网:COACH英国
2020/07/19 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
怎样填写就业意向
2014/04/02 职场文书
2014年林业工作总结
2014/12/05 职场文书
优秀班主任申报材料
2014/12/16 职场文书
医院科室评语
2015/01/04 职场文书
2016年公司新年寄语
2015/08/17 职场文书
班级班风口号大全
2015/12/25 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL