前言：

我們常常想使用數(shù)組的方法，比如forEach，filter，又或者some等等來(lái)處理非數(shù)組的數(shù)據(jù)類型，那么在這些場(chǎng)景下，我們就需要將非數(shù)組轉(zhuǎn)換為數(shù)組，而在ES6新增了三種數(shù)組轉(zhuǎn)換方法，分別為**Array.form()** ，Array.of() 與擴(kuò)展運(yùn)算符，三種轉(zhuǎn)換方法各有不同的轉(zhuǎn)換對(duì)象，下面我們來(lái)分別看看。

Array.from()

轉(zhuǎn)換數(shù)組方法Array.from()可以將對(duì)象轉(zhuǎn)化為真正的數(shù)組，對(duì)象包括了兩種，分別是：類數(shù)組對(duì)象與含有迭代器的對(duì)象

類數(shù)組對(duì)象轉(zhuǎn)換實(shí)例

類數(shù)組對(duì)象的表現(xiàn)形式是以0，1數(shù)字作為鍵的一種對(duì)象形式，而使用Array.from()轉(zhuǎn)換后，它的值將被轉(zhuǎn)換為數(shù)組形式

let arrObj = {
 ?"0": "豬痞惡霸",
 ?"1": "fzf404",
 ?length:2
};
let arr = Array.from(arrObj);
console.log(arr); // ['豬痞惡霸', 'fzf404']

如上，我們定義了一個(gè)arrObj的類數(shù)組對(duì)象，通過(guò)Array.from()轉(zhuǎn)換方法將其轉(zhuǎn)換為數(shù)組得到['豬痞惡霸', 'fzf404']。

可能讀者看到這里想說(shuō)：轉(zhuǎn)換成數(shù)組有什么用途啊，不能光學(xué)語(yǔ)法是不是，那么下面來(lái)看類數(shù)組對(duì)象轉(zhuǎn)換數(shù)組真正的實(shí)際應(yīng)用。

類數(shù)組對(duì)象轉(zhuǎn)換應(yīng)用

在開(kāi)發(fā)中，我們操作DOM會(huì)用到節(jié)點(diǎn)列表，通過(guò)document.querySelectorAll()獲取，如下圖，可以清晰得了解到，我們拿到的節(jié)點(diǎn)列表是類數(shù)組對(duì)象，所以無(wú)法直接使用數(shù)組的一些方法，比如forEach,又或者是filter等等。

所以需要使用Array.form()方法將其轉(zhuǎn)換為真正的數(shù)組，再使用數(shù)組方法進(jìn)行一些額外操作

含有迭代器對(duì)象轉(zhuǎn)換實(shí)例

Array.form()還可以將含有迭代器的對(duì)象轉(zhuǎn)換為真正的數(shù)組，比如字符串，map或者是set，下面來(lái)看看它的使用

let str = "豬痞惡霸"
let strArr = Array.from(str)
console.log(strArray) // [ '豬', '痞', '惡', '霸' ]

拿字符串舉例，轉(zhuǎn)換為數(shù)組后，每個(gè)元素對(duì)應(yīng)著字符串每一個(gè)字符，我們之前經(jīng)常為切割字符串而煩惱，需要去使用正則切割，現(xiàn)在只需要Array.from(str)一行代碼來(lái)完成字符串的割離。

這里的應(yīng)用我不再舉例，轉(zhuǎn)換數(shù)組應(yīng)用的本質(zhì)都是為了更好地使用數(shù)組的方法去操控處理數(shù)據(jù)，而Array.from還有第二個(gè)參數(shù)

Array.from()的第二個(gè)參數(shù)

第二個(gè)參數(shù)比較像數(shù)組的map方法，作為一個(gè)回調(diào)函數(shù)來(lái)處理轉(zhuǎn)換后數(shù)據(jù)的每一個(gè)元素

let str = "豬痞惡霸"
let _str = Array.form(str, (item) => {
 ? ?return item+item
})
console.log(_str) // [ '豬豬', '痞痞', '惡惡', '霸霸' ]

上面的操作，我模擬了字符串的處理，常常可以使用正則處理字符串，當(dāng)然這就可以聯(lián)想到我們可以使用這種方法來(lái)處理用戶輸入的內(nèi)容，也可以防御惡意輸入的產(chǎn)生。

以上就是將類數(shù)組對(duì)象又或者是含有迭代器的對(duì)象轉(zhuǎn)換成數(shù)組的Array.from()方法，下面我們來(lái)看第二種Array.of

Array.of()

Array.of()可以將一組值轉(zhuǎn)換成數(shù)組，其實(shí)他的真正實(shí)際應(yīng)用是初始化數(shù)組。

let arr = Array(1,2,3)
console.log(arr) // [ 1, 2, 3 ]

知道的人會(huì)說(shuō)：不是有Array()嗎，為何要多此一舉使用Array.of()呢？

其實(shí)Array.of()的出現(xiàn)不是偶然，它彌補(bǔ)了Array()作為數(shù)組構(gòu)造函數(shù)的不足

let arr = new Array(3)
console.log(arr) // [ <3 empty items> ]

如上，只傳入3作為參數(shù)得到[ <3 empty items> ]也就是[,,,]的數(shù)組，而當(dāng)我們傳入3個(gè)及以上個(gè)數(shù)的參數(shù)后，其構(gòu)造的數(shù)組與傳入3個(gè)以內(nèi)有所不同，也就是說(shuō)由Array構(gòu)造的數(shù)組不統(tǒng)一

let arr = new Array(3, 2, 1);
console.log(arr); // [ 3, 2, 1 ]

這也就是為什么要使用Array.of()代替Array的原因

看完這兩種使用數(shù)組直屬方法轉(zhuǎn)換數(shù)組后，我們來(lái)看看如何使用擴(kuò)展運(yùn)算符來(lái)轉(zhuǎn)換數(shù)組

擴(kuò)展運(yùn)算符

可以通過(guò)使用擴(kuò)展運(yùn)算符將含有迭代器的對(duì)象轉(zhuǎn)化為真正的數(shù)組，比如節(jié)點(diǎn)列表，或者類數(shù)組對(duì)象，所謂的節(jié)點(diǎn)列表常常在我們使用dom操作的時(shí)候獲取dom列表再將其轉(zhuǎn)化為數(shù)組，方便使用一些好用的數(shù)組方法。

let domlist = document.querySelectorAll('div');
let arr = [...domlist]

類數(shù)組對(duì)象必須含有迭代器才能使用這種方法轉(zhuǎn)化，如果不含有則可以使用Array.from()來(lái)轉(zhuǎn)化

let objArr = {
 ? ?'0':'hogskin',
 ? ?'1':'豬痞惡霸'
}
console.log([...objArr]) // objArr is not iterable

map與set也可以使用這種方法轉(zhuǎn)換，當(dāng)然生成器函數(shù)也可以，因?yàn)槠浞祷氐氖且粋€(gè)遍歷器對(duì)象，內(nèi)含迭代器

最后

到此這篇關(guān)于三種在ES6中將非數(shù)組轉(zhuǎn)換為數(shù)組的方法詳情的文章就介紹到這了,更多相關(guān)ES6數(shù)組轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論