一恋腕、類(lèi)數(shù)組對(duì)象:所謂類(lèi)數(shù)組對(duì)象,最基本的要求就是具有l(wèi)ength屬性的對(duì)象。
二啥寇、Array.from()方法就是將一個(gè)類(lèi)數(shù)組對(duì)象或者可遍歷對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組。Array.from有三個(gè)參數(shù)洒扎,Array.from(arrayLike[, mapFn[, thisArg]])辑甜,arrayLike:想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象;mapFn:如果指定了該參數(shù)袍冷,新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)磷醋;thisArg:可選參數(shù),執(zhí)行回調(diào)函數(shù) mapFn 時(shí) this 對(duì)象胡诗。該方法的返回值是一個(gè)新的數(shù)組實(shí)例(真正的數(shù)組)邓线。
三、實(shí)例
1煌恢、將類(lèi)數(shù)組轉(zhuǎn)換為數(shù)組
let array = {
0: 'name',
1: 'age',
2: 'sex',
3: ['user1','user2','user3'],
'length': 4
}
let arr = Array.from(array)
console.log(arr) // ['name','age','sex',['user1','user2','user3']]
如果將上面代碼中l(wèi)ength屬性去掉arr將會(huì)是一個(gè)長(zhǎng)度為0的空數(shù)組骇陈,如果將代碼修改一下,就是具有l(wèi)ength屬性症虑,但是對(duì)象的屬性名不再是數(shù)字類(lèi)型的缩歪,而是其他字符串型的,代碼如下:
let array = {
'name': 'name',
'age': 'age',
'sex': 'sex',
'user': ['user1','user2','user3'],
'length': 4
}
let arr = Array.from(array)
console.log(arr) // [ undefined, undefined, undefined, undefined ]
會(huì)發(fā)現(xiàn)結(jié)果是長(zhǎng)度為4谍憔,元素均為undefined的數(shù)組匪蝙,由此可見(jiàn),要將一個(gè)類(lèi)數(shù)組對(duì)象轉(zhuǎn)換為一個(gè)真正的數(shù)組习贫,必須具備以下條件:
(1)該類(lèi)數(shù)組對(duì)象必須具有l(wèi)ength屬性逛球,用于指定數(shù)組的長(zhǎng)度。如果沒(méi)有l(wèi)ength屬性苫昌,那么轉(zhuǎn)換后的數(shù)組是一個(gè)空數(shù)組颤绕。
(2)該類(lèi)數(shù)組對(duì)象的屬性名必須為數(shù)值型或字符串型的數(shù)字,該類(lèi)數(shù)組對(duì)象的屬性名可以加引號(hào),也可以不加引號(hào)
2奥务、將Set解構(gòu)的數(shù)據(jù)轉(zhuǎn)換為數(shù)組
let arr = [1,2,3,4,5,6,7,8,9]
let set = new Set(arr)
console.log(Array.from(set)) // [1,2,3,4,5,6,7,8,9]
Array.from還可以接受第二個(gè)參數(shù)物独,作用類(lèi)似于數(shù)組的map方法,用來(lái)對(duì)每個(gè)元素進(jìn)行處理氯葬,將處理后的值放入返回的數(shù)組挡篓。如下:
let arr = [1,2,3,4,5,6,7,8,9]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [2,3,4,5,6,7,8,9,10]
3、將字符串轉(zhuǎn)換為數(shù)組
let str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
4帚称、將Map解構(gòu)轉(zhuǎn)為數(shù)組官研,最方便的做法就是使用擴(kuò)展運(yùn)算符(...)
const myMap = new Map().set(true, 7)
console.log(myMap); //Map(1) {true => 7}
console.log([...myMap]); //[true ,7]