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