reduce()方法详解

news/2024/12/26 19:24:05/

一、 定义和用法
reduce() 方法将数组缩减为单个值。
reduce() 方法为数组的每个值(从左到右)执行提供的函数。
函数的返回值存储在累加器中(结果/总计)。

注释:对没有值的数组元素,不执行 reduce() 方法。
注释:reduce() 方法不会改变原始数组。

二、语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

三、参数值

参数  描述
function(total, currentValue, index, arr) 

必需。为数组中的每个元素运行的函数。
函数参数:

参数描述
total必需。initialValue,或函数先前返回的值。
currentValue必需。当前元素的值。
index 可选。当前元素的数组索引。
arr  可选。当前元素所属的数组对象
initialValue

可选。作为初始值传递给函数的值。

四、示例如下 

1、对象里的属性求和

data(){return{result: [{subject: 'math',score: 10},{subject: 'chinese',score: 20},{subject: 'english',score: 30}];};
},
computed:{totalResults(){return this.result.reduce((sum,result) => {return sum + result.score}}
},0)

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);VM6252:3 1 2 1
VM6252:3 3 3 2
VM6252:3 6 4 3
VM6252:6 (4) [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);VM282:3 0 1 0
VM282:3 1 2 1
VM282:3 3 3 2
VM282:3 6 4 3
VM282:6 (4) [1, 2, 3, 4] 10

结论:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引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]

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


http://www.ppmy.cn/news/93779.html

相关文章

第3章“程序的机器级表示”:程序编码 和 数据格式

文章目录 3.2 程序编码3.2.1 机器级代码3.2.2 代码示例3.2.3 关于格式的注解 3.3 数据格式 3.2 程序编码 假设写一个 C 程序,有两个文件 p1.c 和 p2.c。然后用 Unix 命令行编译这段代码: unix> gcc -O2 -o p p1.c p2.c命令 gcc 表明的就是 GNU C 编…

Python【数据分析第二阶段测试】

Python【数据分析第二阶段测试】 第一部分:SQL查询 数据库中有如下所示的表1(tb_user)和表2(tb_recharge),其中表2包含了2021年一季度的用户充值数据。 表1:tb_user。 user_iduser_name1张三2李…

抖音seo源代码分享(前端+后端)

后端代码展示: $where [ [name > dvtv_s_id, oper > , value > $this->sid], [name > dvtv_dv_id, oper > , value > $dv_id], ]; $cache_model new App_Model_Douyin_MysqlVideoTempVideoStora…

Java 8新特性介绍

✅作者简介:热爱Java后端开发的一名学习者,大家可以跟我一起讨论各种问题喔。 🍎个人主页:Hhzzy99 🍊个人信条:坚持就是胜利! 💞当前专栏:Java新特性 🥭本文内…

MYSQL 8 中间字段有NULL 值,还是无法走索引,所以我高估了MYSQL 的查询智商

开头还是介绍一下群,如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题,有需求都可以加群群内有各大数据库行业大咖,CTO,可以解决你的问题。加群请联系 liuaustin3 ,在新加的朋友会分到2群(共…

Linux——进程优先级

1.什么是优先级? 优先级和权限息息相关。权限的含义为能还是不能做这件事。而优先级则表示:你有权限去做,只不过是先去做还是后去做这件事罢了。 2.为什么会存在优先级? 优先级表明了狼多肉少的理念,举个例子&#xff…

【05】Nginx之Rewrite功能配置

Rewrite是Nginx服务器提供的一个重要基本功能,是Web服务器产品中几乎必备的功能。主要的作用是用来实现URL的重写。 注意:Nginx服务器的Rewrite功能的实现依赖于PCRE的支持,因此在编译安装Nginx服务器之前,需要安装PCRE库。Nginx使用的是ngx…

Linux 下进行权限修改 chmod命令

查看权限 ls -l 文件名该命令可以查看文件的详细属性,包括文件的权限 权限含义 -rwxrwxrwx在文件系统中,user、group、others的权限是分开的,第一个rwx代表user的权限、第二个rwx代表group的文件、第三个rwx代表others的权限 字符含义值…