<dfn id="hx3xz"><listing id="hx3xz"><menuitem id="hx3xz"></menuitem></listing></dfn>

      <form id="hx3xz"><form id="hx3xz"><th id="hx3xz"></th></form></form><form id="hx3xz"></form>
        400-650-7353
        您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】Array相關知識介紹

        【Web前端基礎知識】Array相關知識介紹

        • 發布: 優就業it培訓
        • 來源:
        • 2021-10-29 15:01:55
        • 閱讀()
        • 分享
        • 手機端入口

        一、類數組

        類數組不是數組,類數組指擁有length屬性,其它屬性(索引)為非負整數(對象中的索引會被當做字 符串來處理且不具有數組所具有的方法;

        如函數中的arguments:

        1. let arg = null
        2. function fun(a,b,c,d){ 
        3. arg = arguments; 
        4. fun(1,2,3,4) 
        5. console.log(arg); //Arguments(4) [1, 2, 3, 4, callee: ƒ , 
        6. Symbol(Symbol.iterator): ƒ] 
        7. arg.slice() //ncaught TypeError: Cannot read property 'slice' of null 

        類數組轉換為數組主要有一下方法:

        1.Array.prototype.slice.call()

        1. Array.prototype.slice.call(arg)   // [1, 2, 3, 4] 
        2. Array.prototype.slice.call(arg).indexOf()   //-1 

        2.Array.from()

        1. Array.from(arg) //[1, 2, 3, 4] 
        2. Array.from(arg).indexOf() //-1 

        3. ...擴展運算符

        1. [...arg] //[1, 2, 3, 4] 
        2. [...arg].indexOf() //-1 

        4.concat+apply

        1. Array.prototype.concat.apply([], arg) //[1, 2, 3, 4] 
        2. Array.prototype.concat.apply([], arg).indexOf() //-1 

        二、數組遍歷API

        1.map

        map不修改原數組,根據傳入的函數,映射出一個全新的數組

        1. let arr = [1 ,2 ,3]; 
        2. let res = arr.map((value)=>{ 
        3. return value + 1; 
        4. }) 
        5. console.log(res) //[2, 3, 4] 

        2.foreach

        遍歷數組,不可中斷,沒有返回值

        1. let arr = [1 ,2 ,3]; 
        2. arr.forEach((value)=>{ 
        3. console.log(value) //分別打印1,2,3 
        4. }); 

        3.some

        遍歷數組,檢查是否有符合條件的數據,至少有一個則返回true ,一個都沒有返回false

        1. let arr = [1 ,2 ,3]; 
        2. let res = arr.some((value)=>{ 
        3. return value > 2 
        4. }); 
        5. console.log(res) //true 
        6. let arr = [1 ,2 ,3]; 
        7. let res = arr.some((value)=>{ 
        8. return value > 3 
        9. }); 
        10. console.log(res) //false 

        4.every

        遍歷數組,檢查是否所有數據都符合條件,是則true ,否則false

        1. let arr = [1 ,2 ,3]; 
        2. let res = arr.every((value)=>{ 
        3. return value > 0 
        4. }); 
        5. console.log(res) //true 
        6. let arr = [1 ,2 ,3]; 
        7. let res = arr.every((value)=>{ 
        8. return value > 1 
        9. }); 
        10. console.log(res) //false 

        5.reduce

        reduce()方法接收一個回調函數作為第一個參數,回調函數又接受四個參數,分別是;

        1、 previousValue =>初始值或上一次回調函數疊加的值;

        2、 currentValue => 本次回調(循環)將要執行的值;

        3、 index=>“currentValue”的索引值;

        4、 arr => 數組本身;

        reduce()方法返回的是最后一次調用回調函數的返回值;

        1. let arr = [1 ,2 ,3]; 
        2. let res = arr.reduce((sum, value)=>{ 
        3. return sum + value; 
        4. }); 
        5. console.log(res)   //6 

        6.find

        返回符合條件的數據內容

        1. let arr = [ 
        2.  
        3. {id:1, {id:2, {id:3,value:3}, 
        4.  
        5. value:4}, 
        6.  
        7. value:5}, 
        8.  
        9. ]; 
        10.  
        11. let res = arr.find((current)=>{ 
        12.  
        13. return current.value > 4
        14.  
        15. }); 
        16.  
        17. console.log(res) //{id: 3, value: 5

        7.filter

        顧名思義,過濾,按照傳入的規則過濾不符合條件的數據,將符合條件的數據放入一個新數組

        1. let arr = [ 
        2. value:3}, 
        3. value:4}, 
        4. value:5}, 
        5. ]; 
        6. let res = arr.filter((current)=>{ 
        7. return current.value > 3; 
        8. }); 
        9. console.log(res) //[{id:2, value:4}, {id:3, value:5}] 

        三、多維數組扁平化

        以下以這段數據為例:

        let arr = [1, [2, 3], [[4, 5, 6], 7, 8]]

        1.flat

        es6的flat ,但是一次只能拆分一層

        1. arr.flat() //[1, 2, 3, [4, 5, 6], 7, 8] 

        2.正則表達式

        在字符串中匹配到'['或者']' ,將其去除,但是這樣做會將所有的數組元素變為字符類型,而且數組元素中 還不能包含'['或者']'

        1. <P>JSON.stringify(arr).replace(/(\[|\])/g,</P> 
        2. <P>"5""6""7""8"]'').split(',')//["1", "2", "3", "4",</P> 

        3.普通的遞歸

        1. let result = []; 
        2. let fn = function(ary) { 
        3. for(let i = 0; i < ary.length; i++) { let item = ary[i]; 
        4. if (Array.isArray(ary[i])){ 
        5. fn(item); 
        6. else { 
        7. result.push(item); 

        4...擴展運算符

        1. while (arr.some(Array.isArray)) { 
        2. arr = [].concat(...arr); 
        文章“【Web前端基礎知識】Array相關知識介紹”已幫助

        更多內容

        >>本文地址:http://www.hxuphoto.com/zhuanye/2021/70625.html

        THE END  

        聲明:本站稿件版權均屬中公教育優就業所有,未經許可不得擅自轉載。

        領取零基礎自學IT資源

        (內含學習路線+視頻教程+項目源碼)

        涉及Java、Web前端、UI設計、軟件測試、Python等多個IT熱門方向

        打開微信掃一掃即可領取哦~

        1 您的年齡

        2 您的學歷

        3 您更想做哪個方向的工作?

        獲取測試結果
        • 大前端大前端
        • 大數據大數據
        • 互聯網營銷互聯網營銷
        • JavaJava
        • Linux云計算Linux
        • Python+人工智能Python
        • 嵌入式物聯網嵌入式
        • 全域電商運營全域電商運營
        • 軟件測試軟件測試
        • 室內設計室內設計
        • 平面設計平面設計
        • 電商設計電商設計
        • 網頁設計網頁設計
        • 全鏈路UI/UE設計UI設計
        • VR/AR游戲開發VR/AR
        • 網絡安全網絡安全
        • 新媒體與短視頻運營新媒體
        • 直播帶貨直播帶貨
        • 智能機器人軟件開發智能機器人
         

        快速通道fast track

        近期開班時間TIME

        无码高潮爽到爆的喷水视频

          <dfn id="hx3xz"><listing id="hx3xz"><menuitem id="hx3xz"></menuitem></listing></dfn>

            <form id="hx3xz"><form id="hx3xz"><th id="hx3xz"></th></form></form><form id="hx3xz"></form>