目录

一、reduce()方法介绍

语法

二、reduce()的简单用法:

1、累加和累乘

三、reduce()的高级用法:

1、数组去重

2、将二维数组转换成一维数组

3、计算数组中每个元素出现的次数

一、reduce()方法介绍

reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

注意: reduce() 对于空数组是不会执行回调函数的。

语法

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

  可以看出它接收一个回调函数和一个初始值。

  其中total为初始值或者计算后的返回值(必须)、currentValue为当前元素(必须)、currentIndex为当前元素索引(可选)、arr为当前元素所属的对象(可选)、initialValue为传递给函数的初始值

 首先我们看一下参数initialValue:

let arr = [1,3,5,7,9]
let sum = arr.reduce((total,current,index)=>{
   console.log(index, current, total); 
   /* 
   1 3 1
   2 5 4
   3 7 9
   4 9 16
   */
   return total+current
})
console.log(sum)  //25 

我们可以看出,上面的例子index是从1开始的,reduce函数循环了4次,但是数组的长度是5,这是为什么呢?我们看下面的例子。

let arr = [1,3,5,7,9]
let sum = arr.reduce((total,current,index)=>{
   console.log(index, current, total); 
   /* 
   0 1 0
   1 3 1
   2 5 4
   3 7 9
   4 9 16
   */
   return total+current
},0)
console.log(sum)  //25 

这个例子index是从0开始的,第一次的total的值是我们设置的初始值0,数组长度是5,reduce函数循环5次。

注意:如果数组是空的会报错,但是我们要设置了初始值就不会报错了。

小结:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

二、reduce()的简单用法:

1、累加和累乘

let arr = [1,3,5,7,9]
let sum1 = arr.reduce((total,current,index)=>total+current)
let sum2 = arr.reduce((total,current,index)=>total*current)
console.log(sum1); // 25
console.log(sum2); // 945

三、reduce()的高级用法:

1、数组去重

let arr = [1,3,5,7,9,1,3,5]
let arr1 = arr.reduce((total,current,index)=>{
    // 判断total中是否包含current
	if(!total.includes(current)){
		return total.concat(current)
	}else{
		return total
	}
},[])
console.log(arr1); // [1, 3, 5, 7, 9]

2、将二维数组转换成一维数组

let arr1 = [[1,2],[3,4],[5,6]];
let arr2 = arr1.reduce((total,current)=>{
    return total.concat(current)
},[]);
console.log(arr2) // [1, 2, 3, 4, 5, 6]

3、计算数组中每个元素出现的次数

let arr =['王','李','王','李','赵','王']
let num = arr.reduce((total,current)=>{
	//  current in total current是否在total中
    if(current in total){
	  total[current]++
    }else {
	  total[current] = 1
    }
    return total
},{})
console.log(num)  // {王: 3, 李: 2, 赵: 1}

以上是reduce()常见的用法。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐