js–數組的reduce()方法的使用介紹

  • 前言

閱讀文章之前先來考慮一個問題，如何去實現迭代一個數組，並且把它累加到一個值中？首先能夠想到的是設置一個初始值，然後通過循環遍歷這個數組，將數組中的值一項一項累加起來，然後返回這個設置的值就是最終的結果。這樣實現起來也不算太複測，不需要寫太多的程式碼，這篇就介紹一個數組的進階一點的用法——reduce()的用法。

  • 正文
  1. reduce()的基本概念

定義：reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。 reduce() 對於空數組是不會執行回調函數的。

分析：reduce()針對非空數組執行操作，接收一個回調函數，這個函數作為一個累加器，定義累加的規則，然後循環遍歷進行累加，返回最終結果，需要注意該方法沒有創建新數組，同時也不會改變原數組，返回的結果是一個數值（該數值根據返回結果而定）。

根據上面的理解，先用自己的方法模仿下實現一個數組的累加。

        var arr=[1,2,3,4]
        var rules=function(a,b){
            return a+b
        }
        function myreduce(array,callback){
            //校驗
            if (!Array.isArray(array)) {
                throw('調用對象必須是一個數組');
            }
            if (typeof callback != 'function') {
                throw('累計器必須是一個函數類型');
            }
            let initialValue=0//定義初始值為0
            if (array.length === 0) {
                return initialValue;
            }
            for (let index = 0; index < array.length; index++) {
                initialValue=callback(initialValue,array[index])
            }
            return initialValue
        }
        var totalValue =myreduce(arr,rules)
        console.log(totalValue)//輸出10

　　　　2.reduce()的使用語法

     /**
        * @param function 必要參數，用於執行每個數組元素的函數
        * @param initialValue 可選參數，傳遞給函數的初始值
        */
        array.reduce(
        /**
        * @param total 必要參數，初始值或計算結束後的結果。
        * @param currentValue 必要參數，當前元素
        * @param currentIndex 可選參數，當前參數的下標
        * @param arr 可選參數，數組對象
        */
        function(total, currentValue, currentIndex, arr),
        initialValue
        );

　　　　分析:reduce()被一個非空數組調用（如果被非空數組調用返回undefined），接收兩個參數，一個callback和一個設置的累加初始值，需要注意的是如果給reduce()傳入了初始值，則在該值的基礎是做累加操作，如果初始值不存在，則total為數組的第一項，currentValue為下一項，在第一項的基礎上累加，相當於設置初始值為0，然後逐步累加。

3.常見使用方法

用reduce方法實現求數組的和

        var arr=[1,2,3,4]
        var total=arr.reduce((a,b)=>a+b)
        console.log(total)//輸出10

計算數組中元素出現的次數

        let arr = ['A', 'B', 'C', 'B', 'A'];
        let times = arr.reduce((pre,cur)=>{
        if(cur in pre){
            pre[cur]++
        }else{
            pre[cur] = 1 
        }
        return pre
        },{})
        console.log(times);//輸出{A:2,B:2,C:1}

將二維數組轉成一維

    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]
//同樣可以實現多維到一維

　　　　求對象中屬性的總和，如：求班級同學總分

         let info=[
            { 
                name:"小明",
                score:100
            },{ 
                naem:"小紅",
                score:110
            },
            {
                name:"小強",
                score:120
            }
        ]
        let totalScore=info.reduce((pre,cur)=>{
            return pre+cur.score
        },0)
        console.log(totalScore);//輸出330

　　　　數組去重

　　　　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]

　　　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。

Tags:

VirMach 便宜 VPS

QNews

QNews