ES6標準學習： 4、數組的擴展
數組的擴展
一、類數組對象與可遍歷對象轉換為數組
Array.from()方法用於將類數組對象、可遍歷對象轉換為數組，其中可遍歷對象包括es6新增的set和map結構
所謂的類數組對象，本質特征是必須擁有length屬性
1 let arrayLikeObj = { 2 ‘0‘: ‘a‘, 3 ‘1‘: ‘b‘, 4 ‘2‘: ‘c‘, 5 length: 3 6 } 7 8 ES5轉換為數組： 9 let arr = [].slice.call(arrayLikeObj) // [‘a‘, ‘b‘, ‘c‘] 10 11 ES6轉換為數組： 12 let arr = Array.from(arrayLikeObj) //[‘a‘, ‘b‘, ‘c‘]
實際中有哪些類數組對象呢？
1、DOM操作返回的NodeList集合
2、函數的arguments對象
如果參數本事就是一個數組,Array.from會返回一個一模一樣的新數組。
Array.from()還可以接受第二個參數，類似於map方法，用來對每個元素進行處理，將處理後的值放入返回的數組。
Array.from(arrayLikeObj, x => x * x) // 等同於 Array.from(arrayLikeObj).map(x => x * x)
值得註意的是：如果第二個參數裏面用到了this,還可以傳入第三個參數，用來綁定this
二、一組值轉換為數組
Array.of()用於將一組值轉換為數組
1 Array.of(1, 1, 1) // [1, 1, 1]
這個函數的主要作用是為了彌補Array()構造函數的不足。因為參數的個數會導致Array()的行為有差異。
1 Array() // [] 2 Array(3) // [ , , ,] 3 Array(1, 1, 1) // [1, 1, 1]
只有當參數個數不少於2時，Array()才會返回由參數組成的新數組.
Array.of總是返回有參數值組成的數組，如果沒有參數，返回一個空數組。
三、copyWithin()
數組實例的copyWithin方法，在當前數組內部指定位置的成員復制到其他位置（會覆蓋），然後返回當前數組
Array.prototype.copyWithin(target, start, end)
target: 必須參數，從該位置起開始替換數據
start: 可選，從該位置器開始讀取數據，默認為0
end: 可選，到該位置前停止讀取數據，默認等於數組長度
start,end可以為負數，如果為負數，則表示倒數
這三個參數都應該是數值，如果不是數值，會轉換為數值
1 [1,2,3,4,5].copyWithin(0,3) // [4, 5, 3, 4 ,5]
上面的代碼表示：將從3號位置直到數組結束的成員(4, 5)復制到從0號開始的位置，結果覆蓋了原來的1, 2。
四、find()、findIndex()
find方法用於找出第一個符合條件的數組成員，他的參數是一個回調函數，所有成員依次執行這個回調函數，直到找出第一個返回值為true的成員，然後返回該成員。如果未找到，返回undefined
1 [1, 4, -6, 10].find((value) => value < 0) // -6
1 [1,5, 10, 15].find(function(value, index, arr)) { 2 return value > 9 3 } // 10
find的回調函數有三個參數
value: 當前值
index: 當前索引
arr: 原數組
findIndex()方法的用法與find的方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr)) { return value > 9 } // 2
以上兩個函數都可以接受第二個參數，用來綁定回調函數的this
值得一體的是，這兩個方法都可以發現NaN，彌補了indexOf方法的不足
1 [NaN].indexOf(NaN) // -1 2 3 [NaN].findIndex(v => Object.is(NaN, v)) // 0
五、fill()
fill()方法使用給定的值填充數組
[1, 2, 3].fill(7) /// [7, 7 ,7]
fill方法可以用於初始化空數組，fill方法還可以接受第二個和第三個參數，用於制定填充的開始位置和結束位置（不包括結束位置）
1 [‘a‘, ‘b‘, ‘c‘].fill(7, 1, 2) // [‘a‘, 7 ,‘c‘]
六、entries(),keys(),values()
es6提供了這三個新方法用於遍歷數組，他們都返回一個遍歷器對象，可以用for ... of 循環遍歷,他們的區別在於：keys()是對鍵名的遍歷，values()是對鍵值的遍歷，entries()是對鍵值對的遍歷
1 for (let index of [‘a‘, ‘b‘].keys()) { 2 console.log(index) 3 } 4 // 0 5 // 1 6 7 for (let index of [‘a‘, ‘b‘].values()) { 8 console.log(index) 9 } 10 // ‘a‘ 11 // ‘b‘ 12 13 for (let [index, ele] of [‘a‘, ‘b‘].entries()) { 14 console.log(index, ele) 15 } 16 // 0 "a" 17 // 1 "b"
七、includes()
Array.prototype.includes()方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的include方法類似，不過，該方法屬於es7。
1 [1, 2, 3].includes(2) // true 2 [1, 2, NaN].includes(NaN) // true
該方法的第二個參數表示搜索的起始位置，默認為0。如果第二個參數為負數，則表示從後往前的位置，如果此位置超過數組長度(比如第二個參數為-5,但數組長度只有4),則會重置從0開始
1 [1, 2, 3].includes(3, 3) // true 2 [1, 2, 3].includes(3, -1) // true
沒有該方法時，我們通常使用indexOf，但是indexOf方法有兩個缺陷：
1、不夠語義化，其含義是找到參數值的第一個出現位置，但是比較的確實是否不等於-1
2、其內部使用===進行判斷，會導致對NaN的不夠準確
1 [NaN].indexOf(NaN) // -1
八、數組的空位
數組的空位指數組的某一個位置沒有任何值：
註意，空位並不是undefined，一個位置的值等於undefined仍然是有值的，空位是沒有任何值
1 0 in [undefined] 2 true 3 0 in [] 4 false
es5對空位的處理很不一致，大多數情況下會忽略空位：
forEach(), filter(), every(),some()會跳過空位
map()會跳過空位，但會保留這個值
join()和toString()會將空位視為undefined，而undefined和null會被處理成空字符串
1 [, ‘a‘].forEach((x, i) => console.log(i)) // 1 2 3 [‘a‘, ‘b‘].filter(x => true) // [‘a‘, ‘b‘] 4 5 [, ‘a‘].every(x => x ===‘a‘) // true 6 7 [, ‘a‘].some(x => x !== ‘a‘) // false 8 9 [, ‘a‘].map(x => 1) // [, 1] 10 11 [, ‘a‘, undefined, null].join(‘#‘) // ‘#a##‘ 12 13 [, ‘a‘, undefined, null].toString() // ‘,a,,‘
ES6則是明確將空位轉換為undefined
Array.from會將數組的空位轉換為undefined,也就是說，這個方法不會忽略空位
Array.from([‘a‘,,‘b‘]) // [‘a‘, undefined, ‘b‘]
copyWithin() 會將空位一起復制
[,‘a‘,‘b‘,,].copyWithin(2, 0) // [, ‘a‘, ,‘a‘]
for ...of循環也會遍歷空位
let arr = [,,]
for (let index of arr) {
console.log(1)
} // 1 1
ES6標準學習： 4、數組的擴展