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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
JavaScript 巧学巧用
May 23 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
Element Steps步骤条的使用方法
Jul 26 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP操作XML作为数据库的类
2010/12/19 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
iOS10推送通知开发教程
2016/09/19 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript加强之自定义callback示例
2013/09/21 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
js实现图片放大展示效果
2017/08/30 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
Python操作Word批量生成文章的方法
2015/07/28 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Python datetime包函数简单介绍
2019/08/28 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
什么是组件架构
2016/05/15 面试题
护理专业自荐书
2014/06/04 职场文书
创优争先心得体会
2014/09/11 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
PyTorch中permute的使用方法
2022/04/26 Python
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS