项目笔记：数组方法reduce----Array.prototype.reduce()

Array.prototype.reduce()

一、定义

1、reduce() 对数组的每一个元素(不含空元素)依次执行回调函数，该功能处理列表中的每个值（从左到右）以将其减小为单个值，实现一个“累加器”的功能。

2、reduce() 就是一个对数组进行遍历操作的方法，与for、forEach没有本质上的区别。

二、语法

1、语法

arr.reduce(callback)
arr.reduce(callback,initialValue)

2、参数解析

2.1、callback回调函数中接收四个参数，分别是初始值(或者是上一次回调函数的返回值)、当前元素，当前索引，调用reduce的数组

callback(prevValue,curItem,curIndex,arr)

2.2、initialValue在第一次调用该函数时用作第一个参数的值。如果未提供initialValue，则使用数组的第一个元素（并且处理循环不会迭代通过）。如果reduce()在不提供初始值的情况下调用空数组，则会收到错误消息。

2.3、对2.2进行补充，注意！

​ 提供初始值，循环从索引为0的元素开始；

​ 不提供初始值，数组的第一个参数设置为初始值，循环从索引为1的元素开始；

三、常用方法

1、累加

let sum = [0,1,2,3,4].reduce((prev,curItem) => prev + curItem) //10

2、累乘

let mul = [1,2,3,4].reduce((prev,curItem) => prev * curItem) //24

四、高级用法

1、累加对象数组的属性值

let arr = [{
    
    x:1},{
    
    x:2},{
    
    x:3},{
    
    x:4},{
    
    x:5}]
let sum = arr.reduce((prev,item) => prev + item.x, 0)
console.log(sum) // 15

2、将二位数组转化为一维数组

let arr1 = [[1,2],[2,3],[4,5]]
let concatArr = arr1.reduce((prev,item) => prev.concat(item),[])
console.log(concatArr) //[1, 2, 2, 3, 4, 5]

3、将多维数组转化为一维数组

使用递归的方法

let arr3 = [1,[2,3],[4,[5,6]]]
const concatArrFn = function(arr){
    
    
   return arr.reduce((prev,item) => prev.concat(Array.isArray(item) ? concatArrFn(item) : item),[])
}
console.log(concatArrFn(arr3)) //[1, 2, 3, 4, 5, 6]

4、数组去重

let arr2 = ['a','b','c','a']
let uniqueArr = arr2.reduce((prev,item) => {
    
    
  if(!prev.includes(item)){
    
    
      prev.push(item)
  }
  return prev
},[])
console.log(uniqueArr) // ["a", "b", "c"]

五、浏览器兼容性

谷歌、火狐、IE9+等浏览器都可以兼容的