數組的擴展
Array.from()
Array.from
方法用於將兩類對象轉為真正的數組:類似數組的對象(array-like object)和可遍歷(iterable)的對象(包括ES6新增的數據結構Set和Map)。
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']
Array.from
方法則是還支持類似數組的對象。所謂類似數組的對象,本質特征只有一點,即必須有length
屬性。因此,任何有length
屬性的對象,都可以通過Array.from
方法轉為數組,而此時擴展運算符就無法轉換。
Array.from({ length: 3 }); // [ undefined, undefined, undefinded ]
上面代碼中,Array.from
返回了一個具有三個成員的數組,每個位置的值都是undefined
。擴展運算符轉換不了這個對象。
Array.from
還可以接受第二個參數,作用類似於數組的map
方法,用來對每個元素進行處理,將處理后的值放入返回的數組。
Array.from(arrayLike, x => x * x); // 等同於 Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
Array.of()
Array.of
方法用於將一組值,轉換為數組。
Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1
這個方法的主要目的,是彌補數組構造函數Array()
的不足。因為參數個數的不同,會導致Array()
的行為有差異。
Array.of
總是返回參數值組成的數組。如果沒有參數,就返回一個空數組。
Array.of
基本上可以用來替代Array()
或new Array()
,並且不存在由於參數不同而導致的重載。它的行為非常統一。
數組實例的copyWithin()
數組實例的copyWithin
方法,在當前數組內部,將指定位置的成員復制到其他位置(會覆蓋原有成員),然后返回當前數組。也就是說,使用這個方法,會修改當前數組。
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三個參數。
- target(必需):從該位置開始替換數據。
- start(可選):從該位置開始讀取數據,默認為0。如果為負值,表示倒數。
- end(可選):到該位置前停止讀取數據,默認等於數組長度。如果為負值,表示倒數。
這三個參數都應該是數值,如果不是,會自動轉為數值。
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
上面代碼表示將從3號位直到數組結束的成員(4和5),復制到從0號位開始的位置,結果覆蓋了原來的1和2。
// 對於沒有部署TypedArray的copyWithin方法的平台 // 需要采用下面的寫法 [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // Int32Array [4, 2, 3, 4, 5]
數組實例的find()和findIndex()
數組實例的find
方法,用於找出第一個符合條件的數組成員。它的參數是一個回調函數,所有數組成員依次執行該回調函數,直到找出第一個返回值為true
的成員,然后返回該成員。如果沒有符合條件的成員,則返回undefined
。
[1, 4, -5, 10].find((n) => n < 0) // -5
上面代碼找出數組中第一個小於0的成員。
數組實例的findIndex
方法的用法與find
方法非常類似,返回第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則返回-1
。
[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2
這兩個方法都可以接受第二個參數,用來綁定回調函數的this
對象。
另外,這兩個方法都可以發現NaN
,彌補了數組的IndexOf
方法的不足。
[NaN].indexOf(NaN) // -1 [NaN].findIndex(y => Object.is(NaN, y)) // 0
上面代碼中,indexOf
方法無法識別數組的NaN
成員,但是findIndex
方法可以借助Object.is
方法做到。
數組實例的fill()
fill
方法使用給定值,填充一個數組。
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7]
上面代碼表明,fill
方法用於空數組的初始化非常方便。數組中已有的元素,會被全部抹去。
ES6提供三個新的方法——entries()
,keys()
和values()
——用於遍歷數組。它們都返回一個遍歷器對象(詳見《Iterator》一章),可以用for...of
循環進行遍歷,唯一的區別是keys()
是對鍵名的遍歷、values()
是對鍵值的遍歷,entries()
是對鍵值對的遍歷。
for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1 for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"