Array.from()方法就是將一個類數(shù)組對象或者可遍歷對象轉(zhuǎn)換成一個真正的數(shù)組骡显,也是ES6的新增方法。
那么什么是類數(shù)組對象呢曾掂?所謂類數(shù)組對象惫谤,最基本的要求就是具有l(wèi)ength屬性的對象。
1. 將類數(shù)組對象轉(zhuǎn)換為真正數(shù)組:
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
那么珠洗,如果將上面代碼中l(wèi)ength屬性去掉呢溜歪?實踐證明,答案會是一個長度為0的空數(shù)組许蓖。
這里將代碼再改一下蝴猪,就是具有l(wèi)ength屬性,但是對象的屬性名不再是數(shù)字類型的膊爪,而是其他字符串型的自阱,代碼如下:
let arrayLike = {
'name': 'tom',
'age': '65',
'sex': '男',
'friends': ['jane','john','Mary'],
length: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // [ undefined, undefined, undefined, undefined ]
會發(fā)現(xiàn)結(jié)果是長度為4,元素均為undefined的數(shù)組
由此可見米酬,要將一個類數(shù)組對象轉(zhuǎn)換為一個真正的數(shù)組沛豌,必須具備以下條件:
該類數(shù)組對象必須具有l(wèi)ength屬性,用于指定數(shù)組的長度赃额。如果沒有l(wèi)ength屬性加派,那么轉(zhuǎn)換后的數(shù)組是一個空數(shù)組。
該類數(shù)組對象的屬性名必須為數(shù)值型或字符串型的數(shù)字
ps: 該類數(shù)組對象的屬性名可以加引號跳芳,也可以不加引號
2.將Set結(jié)構(gòu)的數(shù)據(jù)轉(zhuǎn)換為真正的數(shù)組:
let set = new Set(arr)
console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]
Array.from還可以接受第二個參數(shù)芍锦,作用類似于數(shù)組的map方法,用來對每個元素進行處理筛严,將處理后的值放入返回的數(shù)組醉旦。如下:
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]
3. 將字符串轉(zhuǎn)換為數(shù)組:
let str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
4.Array.from參數(shù)是一個真正的數(shù)組:
console.log(Array.from([12,45,47,56,213,4654,154]))
像這種情況饶米,Array.from會返回一個一模一樣的新數(shù)組。