JS 中 reduce()方法使用小結

更新時間：2023年12月01日 11:21:34 作者：前端菜菜DayDayUp

reduce是一個對數(shù)組累積操作的方法,使用時要加上 return 返回累積操作的數(shù)據(jù),這樣 prev 才能獲取上一次執(zhí)行的結果,否則是 undefined,這篇文章主要介紹了JS 中 reduce()方法及使用詳解,需要的朋友可以參考下

reduce()方法可以搞定的東西特別多，就是循環(huán)遍歷能做的，reduce都可以做，比如數(shù)組求和、數(shù)組求積、統(tǒng)計數(shù)組中元素出現(xiàn)的次數(shù)、數(shù)組去重等等。

reduce() 方法對數(shù)組中的每個元素執(zhí)行一個由您提供的reduce函數(shù)(依次執(zhí)行)，將其結果匯總為單個返回值。

1、語法介紹

// arr.reduce(callback,[initialValue])
array.reduce((prev, cur, index, arr)=> {
    /***/
}, initialValue)

reduce 為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)，接受四個參數(shù)：初始值 initialValue（或者上一次回調(diào)函數(shù)的返回值），當前元素值，當前索引，調(diào)用 reduce 的數(shù)組。

參數(shù)：
參數(shù)一： callback 函數(shù)（執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)）：

prev 必需（上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
cur 必需（數(shù)組中當前被處理的元素）
index 可選（當前元素在數(shù)組中的索引）
arr 可選（調(diào)用 reduce 的數(shù)組）

參數(shù)二：initialValue 可選（表示初始值，作為第一次調(diào)用 callback 的第一個參數(shù)。）

提供初始值，cur 從數(shù)組第一項開始，若不提供初始值，則 cur 從第二項開始執(zhí)行，對應的第一次 prev 是數(shù)組第一項的值

2、實例解析 initialValue 參數(shù)

示例一： 沒有設置函數(shù)的初始迭代值

<script>
    let arr = [1, 2, 3, 4, 5];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    });
    console.log('arr:', arr, 'sum:', sum);
</script>

運行結果：

分析：在這里reduce的作用就是對這個數(shù)組進行求和，這里可以看出，數(shù)組長度是5，但是reduce函數(shù)循環(huán)4次，函數(shù)迭代的初始值是1，也就是默認值（數(shù)組的第一項），index是從1開始的，第一次的prev的值是數(shù)組的第一個值，而之后prev的值是每次計算后的值。

再看示例二： 設置函數(shù)的初始迭代值

<script>
    let arr = [1, 2, 3, 4, 5];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    }, 5) //注意這里設置了初始值
    console.log("arr:", arr, "sum:", sum);
</script>

運行結果：

分析：這里我們添加了一個初始的迭代值，也就是讓prev從0開始計算(以0為初始值求和)，index是從0開始的，數(shù)組長度是5，reduce函數(shù)循環(huán)5次，結果也加上了初始值。

結論：

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

如果提供initialValue，從索引0開始。

3、注意事項

1. reduce是一個對數(shù)組累積操作的方法，使用時要加上 return 返回累積操作的數(shù)據(jù)。這樣 prev 才能獲取上一次執(zhí)行的結果，否則是 undefined；

2. 空數(shù)組執(zhí)行 reduce 操作且不提供初始值時reduce會報錯，錯誤信息如下：

<script>
    // 空數(shù)組的情況
    let arr = [];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    })
//報錯，"TypeError: Reduce of empty array with no initial value"
</script>

但是要是我們設置了初始值就不會報錯，如下：

<script>
    // 空數(shù)組，但設置 初始值 的情況
    let arr = [];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    }, 0)
    console.log(arr, sum); // [] 0
</script>

4、reduce的應用

（1）、最簡單的就是我們常用的數(shù)組求和，求乘積了。

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x,y)=>x+y)
let mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘積，24

（2）、計算數(shù)組中每個元素出現(xiàn)的次數(shù)

<script>
    let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    let nameNum = names.reduce((pre, cur) => {
        if (cur in pre) {
            pre[cur]++
        } else {
            pre[cur] = 1
        }
        return pre
    }, {})
    console.log(nameNum); //{Alice: 2, Bob: 1, Bruce: 1, Tiff: 1}
</script>

分析：

1. 由于設置了迭代初始值，pre的第一個值是一個空對象，此時name為Alice，然后進行判斷，發(fā)現(xiàn)在pre中沒有Alice屬性，所以就將Alice對應的屬性值賦為1。
2. 后面沒有重復的是一樣的道理，如果碰到重復值，就會將該屬性值加1，這樣就能計算元素重復的次數(shù)了。

（3）、數(shù)組去重

<script>
    let arr = [1, 2, 3, 4, 4, 1]
    let newArr = arr.reduce((pre, cur) => {
        if (!pre.includes(cur)) {
            return pre.concat(cur)
        } else {
            return pre
        }
    }, [])
    console.log(newArr);// [1, 2, 3, 4]
</script>

（4）、將二維數(shù)組轉化為一維

<script>
    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]
</script>

（5）、將多維數(shù)組轉化為一維

<script>
    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]
</script>

（6）、對象里的屬性求和

<script>
    let result = [
        {
            subject: 'math',
            score: 10
        },
        {
            subject: 'chinese',
            score: 20
        },
        {
            subject: 'english',
            score: 30
        }
    ];
    var sum = result.reduce(function (prev, cur) {
        return cur.score + prev;
    }, 0);
    console.log(sum) //60
</script>

（6）、按屬性對Object分類

let person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 17
    }
];
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
let groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);

運行結果：