js--陣列的reduce()方法的使用介紹

丶Serendipity丶發表於2020-12-27
JS陣列
  • 前言

閱讀文章之前先來考慮一個問題，如何去實現迭代一個陣列，並且把它累加到一個值中？首先能夠想到的是設定一個初始值，然後通過迴圈遍歷這個陣列，將陣列中的值一項一項累加起來，然後返回這個設定的值就是最終的結果。這樣實現起來也不算太複測，不需要寫太多的程式碼，這篇就介紹一個陣列的進階一點的用法——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]

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

相關文章