JS数组reduce()方法详解

目录

一、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()常见的用法。