<span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
<sub id="h9j9p"><listing id="h9j9p"></listing></sub>

    <noframes id="h9j9p"><form id="h9j9p"></form>
    <form id="h9j9p"></form>
      <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

      <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></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); 

        學習疑問申請解答
        您的姓名
        您的電話
        意向課程
         

        中公優就業

        IT小助手

        掃描上方二維碼添加好友,請備注:599,享學習福利。

        >>本文地址:
        注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

        推薦閱讀

        優就業:ujiuye

        關注中公優就業官方微信

        • 關注微信回復關鍵詞“大禮包”,享學習福利
        QQ交流群
        在線疑問解答
        (加群備注“網站”)
        IT培訓交流群 加入群聊 +
        軟件測試 加入群聊 +
        全鏈路UI/UE設計 加入群聊 +
        Python+人工智能 加入群聊 +
        互聯網營銷 加入群聊 +
        Java開發 加入群聊 +
        PHP開發 加入群聊 +
        VR/AR游戲開發 加入群聊 +
        大前端 加入群聊 +
        大數據 加入群聊 +
        Linux云計算 加入群聊 +
        優就業官方微信
        掃碼回復關鍵詞“大禮包”
        享學習福利

        測一測
        你適合學哪門IT技術?

        1 您的年齡

        2 您的學歷

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

        獲取測試結果
         
        課程資料、活動優惠 領取通道
         
         
        亚洲日韩中文字幕一区
        <span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
        <sub id="h9j9p"><listing id="h9j9p"></listing></sub>

          <noframes id="h9j9p"><form id="h9j9p"></form>
          <form id="h9j9p"></form>
            <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

            <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>