<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

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

          共 2998字,需瀏覽 6分鐘

           ·

          2021-01-05 23:03

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

          前言

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

          正文

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

          本文完?


          瀏覽 51
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  天堂网资源 | 国产三级在线免费观看 | 日韩福利视频一区 | 国产激情综合网站 | 黑大巨大一区二区三区 |