詳解數組reduce方法以及用法

一、語法

arr.reduce(callback,[initialValue])

這個方法接收兩個參數：

1.要執行的函數

       要執行的函數中也可傳入參數，分別為

       prev：上次調用函數的返回值

       cur：當前元素

       index：當前元素索引

       arr：被遍歷的數組

2.函數迭代的初始值

例子：

eg1:
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);
打印結果：
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

eg2:
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);
打印結果：
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

如果沒有提供initialValue，reduce 會從索引1的地方開始執行 callback 方法，跳過第一個索引。如果提供initialValue，從索引0開始。

注意：如果這個數組為空，運用reduce會報錯，設置了初始值就不會報錯。

二、reduce用法

1.reduce初級用法

求和或乘積
let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b))//15
console.log(arr.reduce((a,b) => a * b))//120

2.reduce高級用法

eg1:計算數組中每個元素出現的次數

let arr = ['name','age','long','short','long','name','name'] 

let arrResult = arr.reduce((pre,cur) =>{
    console.log(pre,cur)
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre
},{})

console.log(arrResult)//結果：{name: 3, age: 1, long: 2, short: 1}

eg2:去除數組中重復的元素

let arrResult = arr.reduce((pre,cur) =>{
    if(!pre.includes(cur)){
        pre.push(cur)
    }
    return pre;
},[])

console.log(arrResult)//結果：["name", "age", "long", "short"]

eg3:對象的屬性求和

let person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 19
    }
]

let result = person.reduce((a,b) =>{
    a = a + b.age;
    return a;
},0)

console.log(result)//結果：54

eg4:將二維數組轉化為一維

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]

eg5:將多維數組轉化為一維

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]

 拓展：reduceRight（）方法

reduceRight() 方法的功能和reduce()功能是一樣的，不同的是reduceRight() 從數組的末尾向前將數組中的數組項做累加。

reduceRight() 首次調用回調函數callbackfn 時，preValue 和 curValue 可以是兩個值之一。如果調用reduceRight()時提供了第二個參數，則preValue等於該參數，curValue等於數組中的最后一個值。如果沒有提供，則preValue等於數組最后一個值，curValue等於數組中倒數第二個值。

參考來源：https://www.jianshu.com/p/e375ba1cfc47