ES 6 : 數組的擴展


1.Array.from()

  Array.from方法用於將兩類對象轉為真正的數組:類似數組的對象和可遍歷(iterable)對象。

  下面是一個類似數組的對象,Array.from將它轉為真正的數組。

  只要是部署了Iterator接口的數據結構,Array.from都能將其轉為數組。

  以上代碼中,字符串和Set結構都具有Iterator接口,因此可以被Array.from轉為真正的數組。

  對於還沒有部署該方法的瀏覽器,可以用Array.prototype.slice方法替代:

const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj))();

  Array.from還可以接受第二個參數,作用類似於數組的map方法,用來對每個元素進行處理,將處理后的值放入返回的數組。

Array.from(arrayLike, x => x * x); // 等同於
Array.from(arrayLike).map(x => x * x);

2.Array.of()

  Array.of方法用於將一組值轉換為數組。

  這個方法的主要目的是彌補數組構造函數Array()的不足。基本上可以用來替代Array()或者new Array(),並且不存在由參數不同而導致的重載。

3.copyWithin()

  數組實例的copyWithin方法,在當前數組內部將指定位置的成員復制到其他位置(會覆蓋原有成員),然后返回當前數組。

Array.prototype.copyWithin(target, start = 0, end = this.length)

  它接受3個參數。

  ● target(必需):從該位置開始替換數據

  ● start(可選):從該位置開始讀取數據,默認為0。如果為負值,表示倒數

  ● end(可選):到該位置前停止讀取數據,默認等於數組長度。如果為負值,表示倒數

  這3個參數都應該是數值,如果不是,會自動轉換為數值。

  上面代碼表示將從3號位置直到數組結束的成員(4和5)復制到從0號位置開始的位置,結果覆蓋了原來的1和2。

  對於沒有部署TypeArray的copyWithin方法的平台,需要采用下面的寫法:

4. 數組實例的find()和findIndex()

  數組實例的find()方法,用於找出第一個符合條件的數組成員。它的參數是一個回調函數,所有數組成員依次執行該回調函數,直到找出第一個返回值為true的成員,然后返回該成員。如果沒有符合條件的成員,則返回undefined。

 

  上面的代碼找出數組中第一個小於0的成員。

  上面的代碼中,find方法的回調函數可以接受3個參數,依次為當前的值、當前的位置和原數組。

  數組實例的findIndex方法的用法與find方法非常類似,返回第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則返回-1。

5.數組實例的fill()

  fill方法使用給定值填充數組。

  上面的代碼表明,fill方法用於空數組的初始化非常方便。數組中已有的元素會被全部抹去。fill方法還接受第二個和第三個參數,用於指定填充的起始位置和結束位置。

  上面的代碼表示,fill方法從1號位置開始,向原數組填充7,到2號位置之前結束。

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

  ES6提供了3個新方法——entries()、keys()和values()——用於遍歷數組。它們都返回一個遍歷器對象,可用for...of循環遍歷,唯一的區別是:keys()是對鍵名的遍歷,values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

 

7.數組實例的includes()

  Array.prototype.includes方法返回一個布爾值,表示某個數組是否包含給定的值,與字符串的includes方法類似。該方法屬於ES7,但Babel轉碼器已經支持。

  該方法的第二個參數表示搜索的起始位置,默認為0。如果第二個參數為負數,則表示倒數的位置,若此位置超出數組長度,則會重置從0開始。

  沒有該方法時,通常使用indexOf方法檢查是否包含某個值,但是indexOf方法有兩個缺點:一是不夠語義化,其含義是找到參數值的第一個出現位置,所以要比較是否不等於-1,表達起來不夠直觀;二是其內部使用嚴格相當運算符(===)進行判斷,會導致NaN的誤判。

  對於沒有部署該方法的平台,可以使用以下代碼:

8.數組的空位

  數組的空位指數組的某一個位置沒有任何值。ES5會忽略空位,而ES6明確將空位轉為undefined,不會忽略。

- Array.from()會將空位轉為undefined

- 擴展運算符(...)也會將空位轉為undefined

- copyWithin()會將空位一起復制

- fill()會將空位視為正常的位置

- for...of循環也會遍歷空位

  上面的代碼中,數組arr有兩個空位,for...of並沒有忽視它們。如果改成map方法則會跳過空位。

- entries()、keys()、values()、find()和findIndex()會將空位處理成undefined

  由於空位的處理非常不統一,因此建議避免出現空位。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM