Array.reduce()的用法与进阶

Array.reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值

文章目录

1、语法
2、参数解析
3、高阶用法
- 1、计算数组中没个元素出现的次数
- 2、数组去重
- 3、将二维数组转化为一维
- 4、将多维数组转化为一维
- 5、对象里的属性求和

1、语法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reducer 函数接收4个参数:

Accumulator (acc) (累计器) (初始值或上次返回的值)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)

您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。

2、参数解析

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

未设置初始值，索引从1开始

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

设置了初始值，索引从0开始，第一次返回值是初始值

如果传入的数组为空，并且没有设置初始值，会报错！！！！！

3、高阶用法

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

Array.reduce()的用法与进阶相关推荐

JS Array.reduce 对象属性累加
Array reduce 数组对象使用无非就是计算数组元素相加后的总和 ,看网上给的Demo 全是 [1,2,3,4,6].reduce 这种基本用法, 在实际开发中数组中一般都是放对象本次 ...
foreach用法_25个你不得不知道的数组reduce高级用法
作者:JowayYoung 仓库:Github.CodePen 博客:掘金.思否.知乎.简书.头条.CSDN 公众号:IQ前端联系我:关注公众号后有我的微信哟特别声明:原创不易,未经授权不得对此文 ...
自从学会了 Array.reduce() ，再也离不开它
作者简介: 李中凯老师,8年前端开发,前端负责人,擅长JavaScript/Vue. 公众号:1024译站掘金文章专栏:https://juejin.im/user/57c7cb8a0a2b5800 ...
es6中reduce的用法_25个你不得不知道的数组reduce高级用法
背景距离上一篇技术文章<1.5万字概括ES6全部特性>发布到现在,已经有整整4个月没有输出过一篇技术文章了.哈哈,不是不想写,而是实在太忙,这段时间每天不是上班就是加班,完全没有自己的时 ...
java reduce.mdn_编程语言你不得不知道的数组reduce高级用法
背景距离上一篇技术文章<1.5万字概括ES6全部特性>发布到现在,已经有整整4个月没有输出过一篇技术文章了.哈哈,不是不想写,而是实在太忙,这段时间每天不是上班就是加班,完全没有自己的时 ...
20个你不得不知道的数组reduce高级用法
目录 1 背景 2 高级用法 3 兼容和性能 4 结语 1 背景 reduce 作为ES5新增的常规数组方法之一,对比 forEach .filter 和 map,在实际使用上好像有些被忽略,发现身边 ...
python中使用函数的优点_Python基础之函数基本用法与进阶详解
本文实例讲述了Python基础之函数基本用法与进阶.分享给大家供大家参考,具体如下: 目标函数参数和返回值的作用函数的返回值进阶函数的参数进阶递归函数 01. 函数参数和返回值的作用函数 ...
C++语言中std::array的神奇用法总结，你需要知道！
摘要:在这篇文章里,将从各个角度介绍下std::array的用法,希望能带来一些启发. td::array是在C++11标准中增加的STL容器,它的设计目的是提供与原生数组类似的功能与性能.也正因此, ...
python基础函数及用法意思_Python基础之函数基本用法与进阶详解
本文实例讲述了Python基础之函数基本用法与进阶.分享给大家供大家参考,具体如下: 目标函数参数和返回值的作用函数的返回值进阶函数的参数进阶递归函数 01. 函数参数和返回值的作用函数 ...