<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合