<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • ES6——數組擴展 ... Array.from() Array.of() flat() reduce()

    2021-9-29    前端達人

    1.擴展運算符…

    ES6——擴展運算符…

    2.Array.from()

    將兩類對象轉為真正的數組:類數組(querrySelectAll)和可遍歷(iterable)的對象(包括 ES6 新增的數據結構 Set 和 Map)

    類數組

    1.賦給length屬性的對象

     //將類數組轉化為真正的數組 let k={ 0:'a', 1:'b', length:2 //沒有length屬性就不行 } console.log(Array.from(k)); //['a', 'b'] 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2.字符串也有length屬性,它也是類數組

     let str='hello'; console.log(Array.from(str)); // ['h', 'e', 'l', 'l', 'o'] 
    
    • 1
    • 2

    3.參數如果是真正的數組 則返回一個全新數組

     let s1=[1,2,3]; let s2=Array.from(s1); console.log(s2==s1); //false 
    
    • 1
    • 2
    • 3

    3.Array.of()

    一組值,轉換為數組

    Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1 
    
    • 1
    • 2
    • 3

    這個方法的主要目的,是彌補數組構造函數Array()的不足。因為參數個數的不同,會導致Array()的行為有差異。

    只有當參數個數不少于 2 個時,Array()才會返回由參數組成的新數組

    Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8] 
    
    • 1
    • 2
    • 3

    4.find() 和 findIndex()

    find方法,用于找出第一個符合條件的數組成員

     var result1=[1,2,3,4].find(function (item) { return item%2==0; }) console.log(result1); //2 
    
    • 1
    • 2
    • 3
    • 4

    findIndex方法,返回第一個符合條件的數組成員的位置。
    如果所有成員都不符合條件,則返回-1

     var result1=[1,2,3,4].findIndex(function (item) { return item%2==0; }) console.log(result1); //1 
    
    • 1
    • 2
    • 3
    • 4

    5.fill() 填充數組

    使用給定值,填充一個數組

    console.log(new Array(5).fill('a')); //['a', 'a', 'a', 'a', 'a'] 
    
    • 1

    fill方法還可以接受第二個和第三個參數,用于指定填充的起始位置和結束位置。

    ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c'] 
    
    • 1

    6.數組實例的 entries(),keys() 和 values()

    Set,Map,Object中都有這些方法

    entries(),keys()和values()——用于遍歷數組。
    它們都返回一個遍歷器對象,可以用for…of循環進行遍歷
    唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

     let yes=[1,2,3,4]; console.log(yes.keys()); //Array Iterator {} console.log(yes.values()); //Array Iterator {} console.log(yes.entries()); //Array Iterator {} 
    
    • 1
    • 2
    • 3
    • 4
     let yes=[1,2,3,4]; for(let key of yes.keys()){ console.log(key); //0 1 2 3 } for(let key of yes.values()){ console.log(key); //1 2 3 4 } for(let [key,value] of yes.entries()){ console.log(key,value); //0 1 //1 2 //2 3 //3 4 } 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    7.includes()

    console.log([1, 2, 3].includes(1)); //true console.log([1, 2, 3].includes(1,1)); //false 從1號索引開始找 
    
    • 1
    • 2

    8.flat()

    將嵌套的數組“拉平”,變成一維的數組。
    該方法返回一個新數組,對原數據沒有影響

    //默認只能拉平一層 console.log([1, 2, [3, 4]].flat()); //[1, 2, 3, 4] //如果拉平多層 設置層數 console.log([1, 2, [3, [4, 5]]].flat(2)); // [1, 2, 3, 4, 5] //如果層數太多 設置Infinity console.log([1, 2, [3, 4, [5, 6, [7, 8]]]].flat(Infinity)); //[1, 2, 3, 4, 5, 6, 7, 8] 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    9.reduce()

    reduce() 方法接收一個函數作為累加器,數組中的每個值(從左到右)開始縮減,最終計算為一個值。對空數組是不會執行回調函數的。

    1.計算數組總和

    var num = [1,2,3,4,5]; var res = num.reduce(function(total,num){ return total+num; //return total + Math.round(num);//對數組元素四舍五入并計算總和 },0); console.log(res); //15 //num.reduce((total,num) => total += num, 0); //沒有初始值initialValue(即上面例子中的0),當數組為0時會拋出異常提示reduce函數沒有初始值,所以為兼容性一般加上initialValue 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2.合并二維數組

    var red = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b); }, []); console.log(red); //[0, 1, 2, 3, 4, 5] 
    
    • 1
    • 2
    • 3
    • 4

    3.統計一個數組中有多少個不重復的單詞
    reduce()函數










    藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

    分享此文一切功德,皆悉回向給文章原作者及眾讀者.

    轉自:csdn
    免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 亚洲av午夜国产精品无码中文字| 亚洲一区精品伊人久久伊人 | 国产成人久久精品激情| 精品国产爽爽AV| 亚洲国语精品自产拍在线观看| 久久这里只有精品18| 亚洲国产综合精品中文字幕| 国产精品日韩欧美在线第3页 | 久久精品国产亚洲av水果派| 日本精品一区二区久久久| 国产日韩高清三级精品人成| 亚洲国产综合精品中文第一区| 国产精品久久久久9999| 国产精品无码成人午夜电影| 亚洲av日韩精品久久久久久a| 日韩欧美国产精品第一页不卡| 国产成人综合久久精品尤物| 四虎国产精品免费入口| 99久久精品国产麻豆| 国内精品久久久久影院优| 欧美亚洲色综久久精品国产| 中文成人无字幕乱码精品区| 四虎成人精品| 亚洲国产精品毛片av不卡在线 | 精品国产日产一区二区三区| 国产成人精品无码免费看 | 精品国产福利一区二区| 久久精品中文字幕无码绿巨人| 亚洲爆乳精品无码一区二区三区| 亚洲精品网站在线观看不卡无广告| 免费精品久久久久久中文字幕 | 久久97久久97精品免视看| 黑巨人与欧美精品一区| 国产微拍精品一区二区| 成人国产精品日本在线观看 | 91久久精品电影| 亚洲精品小视频| 国产精品九九九| 久久亚洲国产成人精品无码区| 麻豆精品| 亚洲精品无码av人在线观看|