es6學習之路(6):陣列的擴充套件
Array.from方法用於將兩類物件轉為真正的陣列:類似陣列的物件( array-like object )和可遍歷( iterable )的物件(包括 ES6 新增的資料結構 Set 和
Map )。
下面是一個類似陣列的物件,Array.from將它轉為真正的陣列。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5 的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6 的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
實際應用中,常見的類似陣列的物件是 DOM 操作返回的 NodeList 集合,以及函式內部的arguments物件。Array.from都可以將它們轉為真正的陣列。
2.Array.of()
Array.of方法用於將一組值,轉換為陣列。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
這個方法的主要目的,是彌補陣列建構函式Array()的不足。因為引數個數的不同,會導致Array()的行為有差異。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
3. 陣列例項的 find() 和 findIndex()
陣列例項的find方法,用於找出第一個符合條件的陣列成員。它的引數是一個回撥函式,所有陣列成員依次執行該回調函式,直到找出第一個返回值
為true的成員,然後返回該成員。如果沒有符合條件的成員,則返回undefined。
[1, 4, -5, 10].find((n) => n < 0)
// -5
上面程式碼找出陣列中第一個小於 0 的成員。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
上面程式碼中,find方法的回撥函式可以接受三個引數,依次為當前的值、當前的位置和原陣列。
陣列例項的findIndex方法的用法與find方法非常類似,返回第一個符合條件的陣列成員的位置,如果所有成員都不符合條件,則返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
4. 陣列例項的 fill()
fill方法使用給定值,填充一個數組。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
上面程式碼表明,fill方法用於空陣列的初始化非常方便。陣列中已有的元素,會被全部抹去。
fill方法還可以接受第二個和第三個引數,用於指定填充的起始位置和結束位置。
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
上面程式碼表示,fill方法從 1 號位開始,向原陣列填充 7 ,到 2 號位之前結束。
5.陣列例項的 entries() , keys() 和 values()
ES6 提供三個新的方法 —— entries(),keys()和values() —— 用於遍歷陣列。它們都返回一個遍歷器物件(詳見《 Iterator 》一章),可以
用for...of迴圈進行遍歷,唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。
6.陣列例項的 includes()
Array.prototype.includes方法返回一個布林值,表示某個陣列是否包含給定的值,與字串的includes方法類似。該方法屬於 ES7 ,但 Babel 轉碼器
已經支援。
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true