- Array.from()
該方法用于將類數組或者可遍歷對象轉化成數組
// 正確寫法
obj = {0: 'a', 1: 'b', 2: 'c', length:3}
console.log(Array.from(obj)) // ["a", "b", "c"]
// 改變順序是被支持的
obj = {2: 'a', 1: 'b', 0: 'c', length:3}
console.log(Array.from(obj)) // ["c", "b", "a"]
// 錯誤寫法1
obj = {0: 'a', 1: 'b', 2: 'c'} // 注意這里沒有length屬性
console.log(Array.from(obj)) // []
// 錯誤寫法二
obj = {0: 'a', 1: 'b', 3: 'c', length:3} // 注意這里的key不是連續的
console.log(Array.from(obj)) // ["a", "b", undefined]
分析：對象里必須是連續的key值，并且需要length屬性
// 針對dom對象的類數組
let lists = document.getElementsByTagName('li')
Array.from(lists).forEach(function (list) {
console.log(list)
})
// 針對arguments
function fn() {
let args = Array.from(arguments)
}
只要部署了Iterator接口的數據結構都可以用這個轉化成數組，例如字符串
Array.from('hello word') // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "d"]
拓展：
- 如果參數是一個真正的數組Array.from()會返回一個新的完全一樣的數組
- 擴展運算符(...)也可以將部分數據結構轉化成數組
// arguments對象
function fn() {
let args = [...arguments]
}
// dom集合
let lists = document.getElementsByTagName('li')
[...lists].forEach(function (list) {
console.log(list)
})
- 兼容寫法
Array.from ? Array.from : obj => [].slice.call(obj)
-
多個參數
- 第二個參數，類似于map，將每個元素進行處理，返回處理后的值到新數組
let obj = {0: 'a', 1: 'b', 2: 'c', length: 3} Array.from(obj, param => 'param:' + param) // ["param:a", "param:b", "param:c"] // 等價于 let obj = {0: 'a', 1: 'b', 2: 'c', length: 3} Array.from(obj).map(param => 'param:' + param)- 第三個參數，用來綁定this
- Array.of()
該方法用于將一組值轉化成數組
Array.of(1,2,3) // [1, 2, 3]
Array.of(undefined) // [undefined]
Array.of(null) // [null]
Array.of(1) // [1]
對比new Array()
new Array(1,2,3) // [1, 2, 3]
new Array(undefined) // [undefined]
new Array(null) // [null]
new Array(1) // [empty × 1]
new Array(6) // [empty × 6]
說明：
Array.of()總是返回參數組成的數組，new Array() 只有一個參數并且參數為數字的時候則會返回有N項的數組，每一項為空
- copyWithin()
在數組內部將指定位置的成員復制到其他位置，會覆蓋原來的成員，返回當前數組（即會改變原數組）
[1, 2, 3, 4].copyWithin(0, 2, 3) // [3, 2, 3, 4]
u=1709716023,1926310656&fm=27&gp=0.jpg
上面的表情代表我對這個結果的反應，一臉懵逼，開始瘋狂搜索，結果，解釋在這里
- 該方法接收三個參數
- 第一個target：從這個位置開始替換數據
- 第二個start：從該位置開始讀取數據，默認為0，負數表示倒數
- 第三個end：到該位置之前停止讀取數據，默認是數組的長度，負數表示倒數
- 解析上面的代碼
從第0個開始替換，第2個開始到第3個結束并且為半閉半開空間即[2, 3)，所以應該對應數組里面的“3”；把第0個位置替換成3，則數組變成了[3,2,3,4]
更多嘗試
[1,2, 3,4].copyWithin(0, 2) // [3, 4, 3, 4]
[1,2,3,4].copyWithin(0) // [1, 2, 3, 4]
[1,2,3,4].copyWithin(0, 2, -2) // [1, 2, 3, 4]
[1,2,3,4].copyWithin(0, 2, 2) // [1, 2, 3, 4]
[1,2,3,4].copyWithin(0, -2, -1) // [3, 2, 3, 4]
[1,2,3,4].copyWithin(0, -1, -2) // [1, 2, 3, 4]
- find()
找出數組內第一個符合條件的成員
[1, 2, 3].find((n) => {return n % 2 === 0}) // 2
[1, 2, 3, 4].find((n) => {return n % 2 === 0}) // 2
說明：find方法接受一個參數function，數組成員會依次執行，直到找到條件符合的，如果都不符合則返回undefined。
拓展
- 更多參數：
第二個參數用來綁定回調函數的this - NaN
[NaN].find((n) => {return n === NaN}) // undefined
[NaN].find((n) => {return Object.is(NaN, n)})
- findIndex()
用來返回數組第一個符合條件成員的位置，該方法接受三個參數：value當前的值；index當前的位置；array原數組
[1, 2, 3, 4].findIndex((value, index, array) => {return value % 2 === 0}) // 1
- fill()
使用給定值填充數組（原來的元素會全部被抹掉）
[1, 2, 3].fill('a') // ["a", "a", "a"]
更多參數：
- 第1個參數表示填充內容
- 第2個參數表示填充的開始位置，包含開始位置
- 第3個參數表示填充的結束位置，不包含結束位置
[1, 2, 3].fill('a', 0, 1) // ["a", 2, 3]
- entries()，keys()和values()
用來遍歷數組
let arr = ['a', 'b', 'c']
for(let index of arr.keys()) {
console.log(index)
} // 0, 1, 2
for(let val of arr.values()) {
console.log(val)
} // 'a', 'b', 'c'
for(let [index, val] of arr.entries()) {
console.log(index, val)
} // 0 "a" 1 "b" 2 "c"
- includes
返回某個數組是否包含給定的值，返回一個Boolean值
[1, 2, 3].includes(3) // true
[1, 2, 3].includes('2') // false
[1, 2, NaN].includes(NaN) // true
多個參數：
- 第1個參數表示要查找的值
- 第2個參數表示搜索的開始位置，默認0，負數表示從后面，超出重置為0
想了解更多數組ES5支持的方法請點擊這里
