第八节：ES6为数组做了哪些扩展？
????????廣東的小伙伴大家還好嗎，天氣都熱成狗了！?今天就不發(fā)預告了，直接推送圖文。???????
????????前面講了字符串和數值的擴展，今天要講的是：數組的擴展。不知道大家能否跟得上這個節(jié)奏，你們在閱讀中對講解有存在疑惑，記得留言提出來，要真正地理解，否則白白浪費閱讀時間就得不償失了。
????????寫過javascript代碼的同學都知道數組是一個很常用的數據結構，能給我們帶來很多方便。如今，ES6對數組進行進一步的擴展，為我們帶來更多的特性，開發(fā)者都很期待。
?
????????第八節(jié)，開始學習吧.....
?
????????我們先來學幾個即簡單有好玩的新函數：
?
Array.of()函數
????????函數作用：將一組值，轉換成數組。
? ?Array.of(1,2,3,4,5);
? ?//結果：[1,2,3,4,5]
????????是不是很好理解，傳進去的數字是：1~5，最后經過Array.of函數處理，得到了一個數組，而數組的內容就是[1,2,3,4,5]。
????????Array.of函數的出現是源于Array構造函數的缺陷，這里對新知識學習不影響，所以展開不作講解，我們只需要關心我們要掌握的知識就ok了。
?
Array.from( )函數
????????函數作用：可以將類似數組的對象或者可遍歷的對象轉換成真正的數組。
????????有哪些是類似數組的對象？最常見的就是調用getElementsByTagName方法得到的結果，它就是一個類似數組的結果，getElementsByTagName方法一定不陌生吧，我們來看一下：
? ?let ele = document.getElementsByTagName('a');
? ?ele instanceof Array;? //結果：false，不是數組
? ?ele instanceof Object; //結果:true，是對象
????????看上面的代碼，我們調用getElementsByTagName方法，得到結果存到變量ele中，然后對其進行類型判斷，發(fā)現變量ele并不是一個數組，而是一個對象Array，一個類似數組的對象Object，接下來我們用Array.from( )對其進行處理，并再一次進行類型判斷。
? ?Array.from(ele) instanceof Array;
? ?//結果：true，是數組
????????這個時候我們運行的結果是：true，也就是經過Array.from函數處理返回的結果，已經變成了一個真正的數組。
????????Array.from函數其中一個用處就是將字符串轉換成數組。看下面的案例：
? ?let str = 'hello';
? ?Array.from(str);
? ?//結果：["h", "e", "l", "l", "o"]
?????????字符串“hello”被轉換后的返回的結果已經變成了一個數組：["h", "e", "l", "l","o"]。
?
????????除了上述的兩個靜態(tài)方法外，還新增了一些實例方法。
find( )函數
????????函數作用：找出數組中符合條件的第一個元素。
? ?let arr = [1,2,3,4,5,6];
? ?arr.find(function(value){
??? ? ? return value > 2;
? ?});
? ?//結果：value=3
????????看上面的代碼，find()函數的參數是一個匿名函數，數組的每個元素都會進入匿名函數執(zhí)行，直到結果為true，find函數就會返回value的值：3。倘若所有元素都不符合匿名函數的條件，find( )函數就會返回undefind。看下面的代碼案例：
? ?let arr = [1,2,3,4,5,6];
? ?arr.find(function(value){
??? ? ? return value > 7;
? ?});
? ?//結果：undefined
?
????????上面的案例中，數組中沒有存在大于7的元素，所以find函數就會返回：undefined。
?
findIndex( )函數
????????函數作用：返回符合條件的第一個數組成員的位置。
? ?let arr = [7,8,9,10];
? ? ?arr.findIndex(function(value){
???? ? ? return value > 8;
? ? ?});
? ?//結果：2
????????上面的代碼結果是：2，因為數組元素中大于8的元素是9，而元素9的位置正式2，（數組元素是從0算起）。倘若所有元素都不符合匿名函數的條件，findIndex( )函數就會返回-1。
?
fill( )函數
????????函數作用：用指定的值，填充到數組。
? ?let arr = [1,2,3];
? ?arr.fill(4);
? ?//結果：[4,4,4]
????????經過fill( )函數處理后的數組arr已經變成了[4,4,4]；正如函數名fill（填充）一樣。所有元素都被填充為數字4了。如果我想只填充部分元素可不可以呢？可以的，fill( )函數提供了一些參數，用于指定填充的起始位置和結束位置。
????????還是上面的案例，我們稍做調整，再演示一下：
? ?let arr = [1,2,3];
? ?arr.fill(4,1,3);
? ?//結果：[1,4,4]
????????上面的代碼中第2個參數和第3個參數的意思是：從位置1的元素開始填充數字4，截止到位置3之前，所以是位置1和位置2的元素被數字4填充了，得到的結果：[1,4,4]。
?
entries( )函數
????????函數作用：對數組的鍵值對進行遍歷，返回一個遍歷器，可以用for..of對其進行遍歷。
????????遍歷器和for..of也是ES6的新增特性，目前我們還沒有介紹到，我們可以先進行一下簡單地認知。
????????回到我們的entries( )函數，看個案例：.
??
? ?for(let [i,v] of ['a', 'b'].entries())
? ?{
??? ? ? console.log(i,v);
? ?}
? ?//0 "a"
? ?//1 "b"
? ?
????????上面的代碼中，我們將entries( )函數返回的一個遍歷器，用for...of進行遍歷，并打印出結果，能得到數組的鍵值：0和1，以及對應的數組元素：‘a‘和’b‘。
????????如果只想遍歷數組的索引鍵的話，可以使用另一個實例方法。
keys( )函數
????????函數作用：對數組的索引鍵進行遍歷，返回一個遍歷器。
? ?for(let index of ['a', 'b'].keys())
? ?{
??? ? ? console.log(index);
? ?}
? ?//0
? ?//1
? ?
????????正如上面的運行結果一樣，我們打印出了數組的索引鍵：0和1。
????????如果我們想只對數組的元素進行遍歷，我們可以使用兩一個實例方法。
values( )函數
????????作用：對數組的元素進行遍歷，返回一個遍歷器。
? ?for(let value of ['a', 'b'].values())
? ?{
??? ? ? console.log(value);
? ?}
? ?//a
? ?//b
? ?
????????上面的代碼運行結果也是我們預料之中的，最終打印出了數組的元素：a和b。
?
????????除了新增函數以外，ES6還為數組帶來了一個新的概念：數組推導。
數組推導?
????????數組推導：用簡潔的寫法，直接通過現有的數組生成新數組。
????????舉個例子：加入我們有一個數組，我在這個數組的基礎上，每個元素乘以2，得到一個新數組。
????????我們看看傳統的實現方法：
? ?var arr1 = [1,2,3,4];
? ?var arr2 = [];
? ?for(let i=0;i<arr1.length;i++){
??? ? ? //每個元素乘以2后，push到數組arr2
??? ? ? arr2.push(arr1[i]*2);
? ?}
? ?console.log(arr2);
? ?//結果：[2,4,6,8]
????????傳統的方式，除了以上的方式，我們還可以用forEach方法實現。但我們現在介紹的主要是利用ES6提供的新寫法：數組推導。
? ?var arr1 = [1, 2, 3, 4];
? ?var arr2 = [for(i of arr1) i * 2];
? ?console.log(arr2);
? ?//結果： [ 2, 4, 6, 8 ]
????????我們同樣可以得到數組arr2，它的值和上一段代碼的一樣。并且代碼量大大地減少了。這就是數組推導給我們帶來的便利。
????????在數組推導中，for..of后面還可以加上if語句，我們看來看看代碼案例：
? ?var array1 = [1, 2, 3, 4];
? ?var array2 = [for(i of array1)? if(i>3) i];
? ?console.log(array2);
? ?//結果： [4]
????????在上面代碼中，我們不再是對數組的元素乘以2，而是用if做了個判斷：數組的元素要大于3。所以運行的結果是：[ 4 ]。
????????好了，數組的擴展介紹得差不多了，主要是一些新增函數的使用介紹，這些函數都非常便利，為開發(fā)者省去了不少代碼量。如果存在疑惑，可以留言提問，前端君都會回復。
?
本節(jié)小結
總結：ES6為數組帶來了很多很實用的方法：Array.of( )、Array.from( )、find( )、findIndex( )、fill( )、entries( )、values()，此外還有一個更簡潔的語法：數組推導，能讓我們更方便地生成一個新數組。
?
總結
以上是生活随笔為你收集整理的第八节：ES6为数组做了哪些扩展？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android自定义dialog 例子,
- 下一篇： 组会PPT202006220717《双研