js【详解】arr.reduce() 数组缩减

简介: 【7月更文挑战第12天】

arr.reduce()的含义
reduce中文释义为“缩减”,arr.reduce() 即将数组中的每个值(从左到右)开始缩减,最终计算为一个值。

arr.reduce()的语法
arr.reduce()会对数组中每一项运行回调函数,返回最后一次回调函数的执行结果,格式如下:

arr.reduce((previousValue, item, index, arr) => {

}, initialValue)
共5个参数:

previousValue:
第一次执行回调函数时,若initialValue有值,则使用initialValue,若initialValue没有值,则使用数组的第一个元素
从第二次执行回调函数开始,每次的值都是上一次调用回调函数时的返回值
let arr = [1, 2, 3, 4];
let sum = arr.reduce((x, y) => {
console.log(x)
return x + y
})
// 得到 1,3,6

let sum2 = arr.reduce((x, y) => {
console.log(x)
return x + y
}, 10)
// 得到 10,11,13,16
item:
第一次执行回调函数时,若initialValue有值,则使用数组的第一个元素,之后每次执行回调函数都使用下一个数组元素
若initialValue没有值,则使用数组的第二个元素,之后每次执行回调函数都使用下一个数组元素
let arr = [1, 2, 3, 4];
let sum = arr.reduce((x, y) => {
console.log(y)
return x + y
})
// 得到 2,3,4

let sum2 = arr.reduce((x, y) => {
console.log(y)
return x + y
}, 10)
// 得到 1,2,3,4
index:item在数组中的下标
arr:调用reduce()方法的数组
initialValue:【可选】初始值(若initialValue有值,则第一次调用回调函数时会传给 previousValue )
initialValue有值时,回调函数执行 arr.length 次
initialValue无值时,回调函数执行 arr.length -1 次
若arr为空数组,当initialValue没有值时,会报错,但当initialValue有值时,不会报错。

arr.reduce()的基础用法
arr.reduce()的基础功能便是实现累积调用,所以常用于数组求和,数组求乘积

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x,y)=>x+y)
let mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和,10
console.log( mul ); //求乘积,24
arr.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 prev + cur.score;
}, 0);
console.log(sum) //60

相关文章
|
8天前
|
JavaScript 前端开发 索引
JavaScript中的数组的内置方法全面讲解
JavaScript 数组提供了多种内置方法来高效操作数据。如 `push()` 和 `unshift()` 分别在数组尾部和头部添加元素;`pop()` 和 `shift()` 则移除尾部和头部的元素;`splice()` 可增删元素;`slice()` 创建子数组;`join()` 将数组转化为字符串;`indexOf()` 和 `includes()` 用于查找元素;`forEach()` 遍历数组。此外,`reverse()` 和 `sort()` 改变数组顺序;`fill()` 填充数组值;`slice()` 和 `concat()` 则分别用于创建子数组和合并数组。
16 2
|
8天前
|
JavaScript 前端开发 API
复习JavaScript中的数组API
这段代码介绍了JavaScript数组的几种实用方法:`fill`用于用固定值覆盖指定范围内的元素;`find`查找符合条件的第一个元素;`findIndex`获取该元素的索引;`sort`对数组排序,需提供比较函数以正确排序数字;结合`slice`与`sort`可在不改动原数组的情况下进行排序;`reverse`反转数组元素;利用`map`可创建新数组并替换其中的特定元素,同时保持原数组不变。
7 1
|
4天前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
4天前
|
JavaScript 前端开发 索引
JavaScript数组相关的方法有哪些?
JavaScript数组相关的方法有哪些?
|
4天前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
|
4天前
|
JavaScript 容器
JS-数组的定义
JS-数组的定义
|
6天前
|
JavaScript 前端开发
JavaScript——快速判断数组对象的值是否全部满足条件
JavaScript——快速判断数组对象的值是否全部满足条件
18 0
|
7天前
|
JavaScript 前端开发 索引
JavaScript数组的常用方法
JavaScript数组的常用方法
12 0
|
7天前
|
JavaScript
js如何添加新元素到数组中
js如何添加新元素到数组中
17 0
|
7天前
|
存储 JavaScript 索引
js之数组
js之数组
17 0