<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>

          數(shù)組的reduce方法詳細(xì)解

          共 1797字,需瀏覽 4分鐘

           ·

          2021-06-08 20:36

          來源 | https://www.cnblogs.com/cythia/archive/2021/06/06/14856551.html

          前言

          很多前端開發(fā)中都知道數(shù)組的reduce方法可以用來給數(shù)組求和,但是你問到里面的具體參數(shù)代表的時候什么,很多人卻不知道。所以在工作中也是很少人會用到這個方法。
          現(xiàn)在我就通過這篇文章給大家詳細(xì)講解一下,并通過幾個案例給大家展開。

          reduce方法

          下面是api的使用和每個參數(shù)代表的含義:
          arr.reduce((prev,cur,index,arr)=>{},init)
          arr: 表示將要原數(shù)組
          prev:表示上一次調(diào)用回調(diào)時的返回值,或者初始值init
          cur:表示當(dāng)前正在處理的數(shù)組元素
          index:表示正在處理的數(shù)組元素的索引,若提供init值,則索引為0,否則索引為1
          init: 表示初始值

          案例

           數(shù)組求和

          const arr = [1,2,3,4,5,6,7]const sum = arr.reduce((pre,cur)=>{return pre +cur})console.log(sum)

          數(shù)組求和方法是這個reduce方法最常見的使用案例了,但是很多人只知道返回pre + cur就能返回總和,如果我稍微把這個方法下面這樣呢。

          const arr = [1,2,3,4,5,6,7]const sum = arr.reduce((pre,cur)=>{return pre +cur},2)console.log(sum)

          大家覺得結(jié)果還是一樣的嗎
          答案顯然是否定的,下面我給大家解釋解釋:

          首先我們要明確的時候,pre表示的是上一次回調(diào)時的返回值,或者是初始值init。

          在我們第一次調(diào)用的時候,第一個案例是沒有設(shè)置init的值,在沒有設(shè)置init值的情況下,index的索引值是從1,其實(shí)是第一次的時候就隱式調(diào)用了pre+cur,你可以理解為是在背后做了pre是0+cur:1。

          我們在控制臺看到的就是整個計算過程是index是1-6。

          在第二個案例中,init設(shè)置的值是2,那么就是代表pre的初始值就是2,那么第一次的時候,index是從0開始的,第一次調(diào)用返回的就是`2+arr[1]`=3,整個過程index執(zhí)行是從0-6,共7次

          結(jié)果:第一個是28,第二個因?yàn)槌跏贾稻褪?,即從2開始加,所以是30

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

          let person = ['李白','雅典娜','安琪拉','李白','諸葛亮','安琪拉']let nameObj = person.reduce((pre,cur) =>{if( cur in pre){pre[cur]++}else{pre[cur] = 1}return pre}, {})console.log(nameObj) // {李白: 2, 雅典娜: 1, 安琪拉: 2, 諸葛亮: 1}

          數(shù)組扁平化

          const arr2 = [1,[2,[3,[4,5]]],6]const newArr = (arr) => {return arr.reduce((pre,cur)=>{return pre.concat(Array.isArray(cur) ? newArr(cur) : cur)},[])}console.log(newArr(arr2)) // [1, 2, 3, 4, 5, 6]

          這個方法是使用了遞歸的方法結(jié)合reduce實(shí)現(xiàn)的。當(dāng)然實(shí)現(xiàn)數(shù)組扁平化的方式不止這一種,后面我會另起一篇給大家列舉數(shù)組扁平化的幾種方法。

          數(shù)組去重

          const arr3 = [1,2,3,4,5,3,2,1,6,4,7,8]const resultArr = arr3.reduce((pre,cur)=>{if(!pre.includes(cur)){return pre.concat(cur)}else{return pre}},[])console.log(resultArr)


          學(xué)習(xí)更多技能

          請點(diǎn)擊下方公眾號

          瀏覽 44
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          <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>
                  久久网逼 | 欧美成人电影导航影院 | 人人操人人草 | 日本a天堂 | 亚洲超级高清无码第一在线视频观看 |