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 相关文章推荐
js 异步处理进度条
Apr 01 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
Angular.JS中的this指向详解
May 17 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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脚本中include文件出错解决方法
2008/11/20 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
php格式化电话号码的方法
2015/04/24 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
告诉大家什么是JSON
2008/06/10 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
Prototype框架详解
2015/11/25 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python实现淘宝购物系统
2019/10/25 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
教师考核材料
2014/05/21 职场文书
个人事迹材料范文
2014/12/29 职场文书
个人委托书范文
2015/01/28 职场文书
介绍信的格式
2015/01/30 职场文书
六年级作文之自救
2019/12/19 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
tree shaking对打包体积优化及作用
2022/07/07 Java/Android