reduce 的學習方法

array.reduce(callback(prev, currentValue, index, arr), initialValue)
//簡寫就是下麵這樣的
arr.reduce(callback,[initialValue])
callback （執行數組中每個值的函數，包含四個參數）
1、prev （上一次回調返回的值，或者是提供的初始值(initialValue))
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 reduce 的數組）
需要註意的是 initialValue的值是任意的哈。可以是數組可以是對象。

簡單使用 reduce

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

分析上面這個案例

這裡可以看出，上面的例子index是從1開始的。
第一次的prev的值是上一次回調返回的值，或者是提供的初始值。
或者是數組的第一項的值。

因此第二次的 prev 是3=1+2(上一次回調返回的值 prev + cur)
因此第三次的 prev 是6=1+2(上一次回調返回的值 3 + 3)

我們發現數組長度是4，但是reduce函數迴圈3次。
說明reduce是從索引index為是從1開始迴圈的。

reduce 第二個參數提供初始值

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}, 10)
console.log(arr, sum);
//列印結果：
// 10 1 0
// 11 2 1
// 13 3 2
// 16 4 3
// [1, 2, 3, 4] 20

分析第二個參數提供初始值

前端我們說了：prev （上一次回調返回的值，或者是提供的初始值(initialValue))
因為提供了初始值，所以第一次是10，
當前值就變為了1，索引就從0開始了。
因此第一次的值是  10 1 0
第二次prev （上一次回調返回的值）11=10+1
第三次prev （上一次回調返回的值）13=13+3

數組為空，運用reduce是什麼情況

 var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
//報錯： Reduce of empty array with no initial value  at Array.reduce (<anonymous>)

如果我們設置了初始值呢？
var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index); //這一條語句不
    return prev + cur;
}, 10)
console.log(arr, sum); //[] 10

reduce的累加,累乘

// 累加
let sum = [1, 2, 3, 4, 5].reduce((prev, cur) => prev + cur);
console.log(sum) //輸出15

let sum = [1, 2, 3, 4, 5].reduce((prev,cur) => prev * cur);
console.log(sum) //輸出120

let sum = [1, 2, 3, 4, 5].reduce((prev, cur) => prev * cur, 10);
console.log(sum) //輸出1200

reduce數組對象求和

let arr = [{
    money: 100,
    name: '蘋果'
}, {
    money: 50,
    name: '香蕉'
}]

不使用初始值
function sum(arr) {
    return arr.reduce((prev, cur) => {
        return prev.money + cur.money
    })
}

使用初始值
function sum(arr) {
    return arr.reduce((prev, cur) => {
        return cur.money + prev
    }, 0)
}
console.log(sum(arr)) //輸出150

reduce計算數組中每個元素出現的次數[面試經常問]

let names = ['yes', 'hello', 'hi', 'yes', 'yy'];
// 第二個初始值是一個對象，因為有初始值，所以cur的值是數組的第一項[yes]
let nameNum = names.reduce((pre, cur) => {
    // 第一次pre是一個對象，返回將這個對象返回，下一次pre又是一個對象了
    if (cur in pre) {
        pre[cur]++
    } else {
        pre[cur] = 1
    }
    return pre
}, {})
console.log(nameNum); //{yes: 2, hello: 1, hi: 1, yy: 1}

reduce實現數組去重[面試經常問]

let arr = [10, 20, 20, 41, 41, 1]
// 這次初始值是一個數組，，因為有初始值，所以cur的值是數組的第一項10
let newArr = arr.reduce((pre, cur) => {
    // 如果沒有，使用concat添加進去。這樣就可以實現數組去重了
    if (!pre.includes(cur)) {
        return pre.concat(cur)
    } else {
        return pre
    }
}, [])
console.log(newArr); 
// [10, 20, 41, 1]

reduce實現數組扁平化

let arr = [
    [1, 2],
    [1, 2, 3],
    [1, [1, 3, [1, 2, 3]]]
]

function flatten(arr) {
    return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? flatten(cur) : cur), []);
}
console.log(flatten(arr)) //[1, 2, 1, 2, 3, 1, 1, 3, 1, 2, 3]

總結:reduce有無第二個參數的區別

1=>沒有提供初始值，索引是從1開始的。提供了初始值索引是從0開始的。
2=>沒有提供初始值迴圈次數等於數組長度-1。 提供了初始值迴圈次數等於數組的長度；
3=>沒有提供初始值第一次cur是索引為1的那個值。提供了初始值cur是索引為0的那個值
4=>沒有提供初始值空數組會報錯。提供了初始值空數組不會報錯。[] 10

遇見問題，這是你成長的機會，如果你能夠解決，這就是收穫。

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關註博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！