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

          遍歷數組、對象的方法

          共 2048字,需瀏覽 5分鐘

           ·

          2022-05-23 18:40

          07aec388289002c3bb473f8a2eb04b13.webp


          前提:前端最重要的任務的經常要處理數據的!經常的是列表的遍歷問題!例如遍歷數組、對象的方法!!!


          具體遍歷數組、對象的方法:

          • 遍歷數組

          • 遍歷對象


          一、遍歷數組

          1、普通for循環(huán)

          5a9976e3319e4df124216328552a754d.webp


          2、forEach循環(huán)

          8685de03181881c9317f8838924a2fb7.webp

          forEach接收一個回調函數作為參數,而這個回調函數有接受三個參數,作為參數。item是每個元素,index元素在數組中的下標,arr數組本身。? ?沒有返回值!


          3、map循環(huán)

          0a6291a85553691fa084132c7649541a.webp

          map的用法和forEach差不多。但是map是有返回值的。他的返回值是一個新數組,map方法不改變原數組。是映射,即數組元素的映射。它提供一個回調函數,參數依次為處于當前循環(huán)的元素、該元素下標、數組本身,三者均可選。默認返回一個數組,這個新數組的每一個元素都是原數組元素執(zhí)行了回調函數之后的返回值。


          4、for–of循環(huán)

          1a8aed41d02d591f20ef8b6501d13e29.webp

          只有是現實iterator 接口的才能用for---of.對象不能

          es6新增了interator接口的概念,目的是對于所有數據結構提供一種統(tǒng)一的訪問機制,這種訪問機制就是for of。

          即:所有有interator接口的數據,都能用for of遍歷。常見的包括數組、類數組、Set、Map等都有interator接口。

          5、filter過濾

          8c5e022439b14906802531f974725399.webp

          filter,過濾,即對數組元素的一個條件篩選。它提供一個回調函數,參數依次為處于當前循環(huán)的元素、該元素下標、數組本身,三者均可選。默認返回一個數組,原數組的元素執(zhí)行了回調函數之后返回值若為true,則會將這個元素放入返回的數組中。

          filter方法不改變原數組

          6、every遍歷

          1ca1077e9f38c49db53bcb1f335ceb0a.webp

          every()是對數組中的每一項運行給定函數,如果該函數對每一項返回true,則返回true。(全部符合條件)


          7、some遍歷

          35ca69ddb97c83c808d42d3defd8ba8f.webp

          some()是對數組中每一項運行指定函數,如果該函數對任一項返回true,則返回true。(只要有一個符合)


          some方法和every的用法非常類似,提供一個回調函數,參數依次為處于當前循環(huán)的元素、該元素下標、數組本身,三者均可選。

          數組的每一個元素都會執(zhí)行回調函數,當返回值全部為true時,every方法會返回true,只要有一個為false,every方法返回false。當有一個為true時,some方法返回true,當全部為false時,every方法返回false。

          some、every方法不改變原數組。

          8、reduce

          8b39adda88cd014d0d713cbcd18400f2.webp

          reduce方法有兩個參數,第一個參數是一個回調函數(必須),第二個參數是初始值(可選)。回調函數有四個參數,依次為本輪循環(huán)的累計值、當前循環(huán)的元素(必須),該元素的下標(可選),數組本身(可選)。

          reduce方法,會讓數組的每一個元素都執(zhí)行一次回調函數,并將上一次循環(huán)時回調函數的返回值作為下一次循環(huán)的初始值,最后將這個結果返回。

          如果沒有初始值,則reduce會將數組的第一個元素作為循環(huán)開始的初始值,第二個元素開始執(zhí)行回調函數。

          最常用、最簡單的場景,是數組元素的累加、累乘

          reduce方法不改變原數組


          9、reduceRight


          813fbb3037fbb2b334ac27c3568797e4.webp

          reduceRight()方法的功能和reduce()功能是一樣的,不同的是reduceRight()從數組的末尾向前將數組中的數組項做累加。
          reduceRight()首次調用回調函數callbackfn時,prevValue 和 curValue 可以是兩個值之一。如果調用 reduceRight() 時提供了 initialValue 參數,則 prevValue 等于 initialValue,curValue 等于數組中的最后一個值。如果沒有提供 initialValue 參數,則 prevValue 等于數組最后一個值, curValue 等于數組中倒數第二個值


          10、find

          ad1a9796e95be49a8bcf2273113ea0c6.webp

          find()方法返回數組中符合測試函數條件的第一個元素。否則返回undefined


          11、findIndex

          c5d23e5572985c263830fcc3f1a7055f.webp

          ?對于數組中的每個元素,findIndex 方法都會調用一次回調函數(采用升序索引順序),直到有元素返回 true。只要有一個元素返回 true,findIndex 立即返回該返回 true 的元素的索引值。如果數組中沒有任何元素返回 true,則 findIndex 返回 -1。findIndex 不會改變數組對象!!!!!


          12、keys,values,entries

          a2e8dd984c0a759fb934163741233f24.webp

          ES6 提供三個新的方法 —— entries(),keys()和values() —— 用于遍歷數組。它們都返回一個遍歷器對象,可以用for...of循環(huán)進行遍歷,唯一的區(qū)別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷


          二、遍歷對象


          1、vue中v-for遍歷對象

          20925312430618cf302c200dd5502fb4.webp


          2、for…in 遍歷數組和對象都可以


          9b7aaf1bfce1a5953c23328ab3d3ca15.webp


          3、Object的方法

          d55172ebfa36a59514425b4b92ba122e.webp


          7ebd844e3703f9f7f831ecafcbd20647.webp


          877822b71e9f306829b19002163f92b4.webp


          4、Object.getOwnPropertyNames(obj)

          84c19318c77ecd7da85c0feffc70f0c8.webp


          5、使用Reflect.ownKeys(obj)遍歷

          ba0b6929024a0b3f52e87f4d75aca495.webp


          瀏覽 70
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

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

          手機掃一掃分享

          分享
          舉報
          <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>
                  我就色色综合网 | 美女脱光色情视频网站亚洲 | 久操视频网 | 国产亚洲精品精品精品 | 国产精品视频播放三级 |