1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

        js--數(shù)組的reduce()累加方法的使用

        共 2998字,需瀏覽 6分鐘

         ·

        2021-01-05 23:03

        來源 |?https://www.cnblogs.com/zaishiyu/p/14197699.html

        前言

        閱讀文章之前先來考慮一個(gè)問題,如何去實(shí)現(xiàn)迭代一個(gè)數(shù)組,并且把它累加到一個(gè)值中?首先能夠想到的是設(shè)置一個(gè)初始值,然后通過循環(huán)遍歷這個(gè)數(shù)組,將數(shù)組中的值一項(xiàng)一項(xiàng)累加起來,然后返回這個(gè)設(shè)置的值就是最終的結(jié)果。
        這樣實(shí)現(xiàn)起來也不算太復(fù)測(cè),不需要寫太多的代碼,這篇就介紹一個(gè)數(shù)組的進(jìn)階一點(diǎn)的用法——reduce()的用法。

        正文

        1、reduce()的基本概念
        定義:reduce() 方法接收一個(gè)函數(shù)作為累加器,數(shù)組中的每個(gè)值(從左到右)開始縮減,最終計(jì)算為一個(gè)值。reduce() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。
        分析:reduce()針對(duì)非空數(shù)組執(zhí)行操作,接收一個(gè)回調(diào)函數(shù),這個(gè)函數(shù)作為一個(gè)累加器,定義累加的規(guī)則,然后循環(huán)遍歷進(jìn)行累加,返回最終結(jié)果,需要注意該方法沒有創(chuàng)建新數(shù)組,同時(shí)也不會(huì)改變?cè)瓟?shù)組,返回的結(jié)果是一個(gè)數(shù)值(該數(shù)值根據(jù)返回結(jié)果而定)。
        根據(jù)上面的理解,先用自己的方法模仿下實(shí)現(xiàn)一個(gè)數(shù)組的累加。
        var arr=[1,2,3,4] var rules=function(a,b){ return a+b } function myreduce(array,callback){ //校驗(yàn) if (!Array.isArray(array)) { throw('調(diào)用對(duì)象必須是一個(gè)數(shù)組'); } if (typeof callback != 'function') { throw('累計(jì)器必須是一個(gè)函數(shù)類型'); } 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 必要參數(shù),用于執(zhí)行每個(gè)數(shù)組元素的函數(shù) * @param initialValue 可選參數(shù),傳遞給函數(shù)的初始值 */ array.reduce( /** * @param total 必要參數(shù),初始值或計(jì)算結(jié)束后的結(jié)果。 * @param currentValue 必要參數(shù),當(dāng)前元素 * @param currentIndex 可選參數(shù),當(dāng)前參數(shù)的下標(biāo) * @param arr 可選參數(shù),數(shù)組對(duì)象 */ function(total, currentValue, currentIndex, arr), initialValue );
        分析:reduce()被一個(gè)非空數(shù)組調(diào)用(如果被非空數(shù)組調(diào)用返回undefined),接收兩個(gè)參數(shù),一個(gè)callback和一個(gè)設(shè)置的累加初始值,需要注意的是如果給reduce()傳入了初始值,則在該值的基礎(chǔ)是做累加操作,如果初始值不存在,則total為數(shù)組的第一項(xiàng),currentValue為下一項(xiàng),在第一項(xiàng)的基礎(chǔ)上累加,相當(dāng)于設(shè)置初始值為0,然后逐步累加。
        3、常見使用方法
        用reduce方法實(shí)現(xiàn)求數(shù)組的和
        var arr=[1,2,3,4]var total=arr.reduce((a,b)=>a+b)console.log(total)//輸出10
        計(jì)算數(shù)組中元素出現(xiàn)的次數(shù)
        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}
        將二維數(shù)組轉(zhuǎn)成一維
        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]//同樣可以實(shí)現(xiàn)多維到一維
        求對(duì)象中屬性的總和,如:求班級(jí)同學(xué)總分
        let info=[ { name:"小明", score:100 },{ naem:"小紅", score:110 }, { name:"小強(qiáng)", score:120 } ] let totalScore=info.reduce((pre,cur)=>{ return pre+cur.score },0) console.log(totalScore);//輸出330
        數(shù)組去重
         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]
        以上就是本文的全部?jī)?nèi)容,希望給讀者帶來些許的幫助和進(jìn)步,方便的話點(diǎn)個(gè)關(guān)注,小白的成長(zhǎng)之路會(huì)持續(xù)更新一些工作中常見的問題和技術(shù)點(diǎn)。

        本文完?


        瀏覽 51
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報(bào)
        評(píng)論
        圖片
        表情
        推薦
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報(bào)
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            久热无码视频 | 性生活片免费观看 | 亚洲秘 无码一区二区三区妃光 | 视频二区在线 | 公车上强行被灌满脓液h视频 | 久久影院三极片 | 大香蕉伊人999 | 一级黄色录像播放 | 李思思一级婬片A片 | 奇米影视狠狠干 |