前面博文有介紹JavaScript中數(shù)組的一些特性，通過對這些數(shù)組特性的深入梳理，能夠加深我們對數(shù)組相關(guān)知識的理解，詳見博文：
一文搞懂JavaScript數(shù)組的特性

其實，在前端開發(fā)中，除了數(shù)組以外，還有一種類似數(shù)組的對象，一般叫做類數(shù)組、或偽數(shù)組，也是我們需要掌握的知識點。

類數(shù)組是什么？

首先，我們先嘗試給類數(shù)組加個簡單的定義：擁有l(wèi)ength屬性的對象(非數(shù)組)。類數(shù)組的核心特征就是擁有l(wèi)ength屬性，擁有l(wèi)ength屬性又不是真正數(shù)組的對象，基本可以被認(rèn)定為類數(shù)組。
雖然這個定義很簡單，只突出了length屬性，但類數(shù)組的基本特點，我們還是可以總結(jié)如下：

• 擁有l(wèi)ength屬性
• length屬性非動態(tài)值，不會隨元素變化而變化
• 可以使用數(shù)字索引下標(biāo)訪問屬性元素
• 不是數(shù)組，沒有數(shù)組對應(yīng)的各種方法
• 可以使用for語句等進(jìn)行循環(huán)遍歷
• 能夠通過一定方式轉(zhuǎn)換成真正的數(shù)組

創(chuàng)建類數(shù)組的對象

根據(jù)以上類數(shù)組的特點，我們可以自己創(chuàng)建類數(shù)組的對象，也比較簡單，只需要擁有l(wèi)ength，如下所示：

const al = { 0: 111, 1: 222, 2: 333, length: 3 }
for (let i = 0; i < al.length; i++) {
  console.log(al[i])
}
// 111
// 222
// 333

以上代碼，創(chuàng)建了一個length屬性為3的對象，通過for循環(huán)遍歷對象，并且下標(biāo)輸出對應(yīng)的值。
length屬性并不會動態(tài)添加，比如我們給al對象增加一個屬性，但length值仍為3：

al[3] = 444
console.log(al.length) // 3

如果把該類數(shù)組對象轉(zhuǎn)換成一個真正的數(shù)組后，就可以進(jìn)行數(shù)組操作了。

事實上，我們可以省略其他屬性，只保留length，同樣可當(dāng)做一個類數(shù)組使用：

const al = { length: 3 }

雖然我們可以通過類似這種方式，自己創(chuàng)建類數(shù)組，但實際開發(fā)過程中，幾乎沒人這么處理。
真正在前端開發(fā)中，接觸到的類數(shù)組，都是JavaScript語言或者Web環(huán)境下提供的各種類數(shù)組的對象。
在介紹這些類數(shù)組對象之前，我們先看下類數(shù)組對象如何才能轉(zhuǎn)換成數(shù)組。

如何將類數(shù)組轉(zhuǎn)換成數(shù)組

類數(shù)組只是類似數(shù)組的對象，缺少很多相應(yīng)的方法，有時候我們可能需要把類數(shù)組轉(zhuǎn)換成數(shù)組，才能更好的操作，這時候就需要找到方便有效的轉(zhuǎn)換方式。
當(dāng)前常用的轉(zhuǎn)換方式，大致有如下幾類，我們一個個介紹。

Array.from()

首先是ES6提供的新的數(shù)組靜態(tài)方法：Array.from，它用于從一個類數(shù)組或可迭代對象中創(chuàng)建一個新的數(shù)組?；旧希灰獡碛衛(wèi)ength屬性的對象，都能被Array.from轉(zhuǎn)換成數(shù)組。
語法：Array.from(arrayLike, mapFn, thisArg)。
三個參數(shù)說明：

• arrayLike：類數(shù)組對象，或可迭代對象
• mapFn：可選參數(shù)，新數(shù)組會經(jīng)過該函數(shù)處理后返回
• thisArg：可選參數(shù)，執(zhí)行mapFn時指定的this指向

下面看一個示例：

const al = { 0: 111, 1: 222, 2: 333, length: 3 }
const arr = Array.from(al)
console.log(arr) // [111, 222, 333]
console.log(arr.length) // 3
console.log(Array.isArray(arr)) // true

以上代碼，我們自定義了一個擁有l(wèi)ength屬性的對象，然后通過Array.from方法進(jìn)行轉(zhuǎn)換，得到了一個長度為3的新數(shù)組。
這種方式簡單方便，在當(dāng)前前端開發(fā)的絕大多數(shù)情況下，都應(yīng)該是首選。

Array.prototype.slice.call()

在ES6沒出來之前，如果想較好的進(jìn)行類數(shù)組的轉(zhuǎn)換，一般使用的是該方法：Array.prototype.slice.call()。
它基于數(shù)組的slice()方法，把執(zhí)行時的this指向類數(shù)組對象，讓類數(shù)組對象像數(shù)組一樣使用slice()方法返回一個新的數(shù)組，因此擁有l(wèi)ength屬性的類數(shù)組對象都能被轉(zhuǎn)換成數(shù)組。

const al = { 0: 111, 1: 222, 2: 333, length: 3 }
const arr = Array.prototype.slice.call(al)
console.log(arr) // [111, 222, 333]

以上代碼，與Array.from定義同樣的類數(shù)組對象，通過Array.prototype.slice.call轉(zhuǎn)換，效果是一樣的。

其他方式

以上兩種方式，是最正確有效的轉(zhuǎn)換，推薦日常使用。
除此以外，還有其他的方式，但各有缺陷，要么較復(fù)雜、要么對部分類數(shù)組對象不適用，所以并不太推薦。

• for循環(huán)處理
  定義一個新的空數(shù)組，通過循環(huán)遍歷類數(shù)組對象的屬性，將類數(shù)組對象的每一個屬性元素值都添加到新數(shù)組中。
  這種方式就顯得相對麻煩一些。
• 擴展運算符(...)
  擴展運算符主要作用于可迭代對象，JavaScript中的集合(數(shù)組、Set、Map)都是可迭代對象，另外字符串和arguments也都是。
  擴展運算符對于不可迭代對象，會報錯。

[...'hello'] // ['h', 'e', 'l', 'l', 'o']
[...{ length: 3 }] // Uncaught TypeError: {(intermediate value)} is not iterable
Array.from({ length: 3 }) // [undefined, undefined, undefined]

以上代碼，通過擴展運算符，字符串能被轉(zhuǎn)換成數(shù)組，但自定義類數(shù)組對象 { length: 3 } 則不行，并報錯；而使用Array.from則轉(zhuǎn)成了擁有3個 undefined 元素的數(shù)組。

類數(shù)組對象

前端開發(fā)中最常見且被認(rèn)可的類數(shù)組對象，是函數(shù)的arguments參數(shù)對象，另外字符串也是一個類數(shù)組對象，其他的還有各種Web環(huán)境提供的API。
如果把這些分成兩類的話：

• JS對象
  屬于JavaScript語言的對象，在nodejs中也存在。
  如arguments、字符串、TypeArray、自定義類數(shù)組等。
• Web對象
  依賴于Web環(huán)境(一般是瀏覽器)的對象，不屬于JavaScript語言。
  如FileList、DOM列表對象、數(shù)據(jù)存儲(如localStorage、sessionStorage)等。

下面我們就一一介紹下這些類數(shù)組對象。

JavaScript類數(shù)組對象

arguments

arguments是JS中函數(shù)內(nèi)部的一個對象，用于處理不定數(shù)目的參數(shù)，是一個類數(shù)組對象。
在ES6推出之前，arguments的使用還是非常廣泛的，但在ES6推出默認(rèn)參數(shù)和擴展參數(shù)后，它的使用就減少了。

通過下面的示例，轉(zhuǎn)成數(shù)組：

function test () {
  console.log(Array.prototype.toString.call(arguments))
  console.log(Array.from(arguments))
  console.log([...arguments], Array.prototype.slice.call(arguments))
}
test(23)
// [object Arguments]
// [23]
// [23] [23]

以上代碼可知，該對象存在獨特的類型判斷 Arguments，可用擴展運算符處理arguments對象。

注意，箭頭函數(shù)內(nèi)部不存在arguments對象。

字符串

JavaScript中的字符串也是一個類數(shù)組對象，它擁有l(wèi)ength屬性，可以通過下標(biāo)數(shù)字索引訪問，也可以轉(zhuǎn)換成數(shù)組，字符串中的每一個字符都變成新數(shù)組的一個元素。

const str = 'abc'
str.length // 3
str[1] // 'b'
Array.from(str) // ['a', 'b', 'c']
[...str] // ['a', 'b', 'c']

字符串擁有一個實例方法 split，可以將字符串按照傳入的分隔符進(jìn)行處理，返回一個分割出來的每個子字符串都作為元素的數(shù)組：

'abc'.split('') // ['a', 'b', 'c']
'abc'.split('b') // ['a', 'c']

以上代碼，
當(dāng)使用空字符做分隔符的時候，就是將每一個字符都分割成數(shù)組元素，與類數(shù)組的轉(zhuǎn)換方式相同。
當(dāng)使用 b 字符做分隔符的時候，返回的數(shù)組元素就只有2個了。

由于split操作分隔符的靈活性，可以給我們處理字符串帶來方便，所以常用該方法，而少用類數(shù)組轉(zhuǎn)換。

TypeArray類型數(shù)組

類型數(shù)組也是一種類數(shù)組對象，提供了訪問內(nèi)存緩沖區(qū)中二進(jìn)制數(shù)據(jù)的機制，它擁有11個對象，如Uint8Array、Uint8ClampedArray、Int32Array、Float64Array等等。具體知識可見博文前端二進(jìn)制API知識總結(jié)

類型數(shù)組都擁有和數(shù)組相同的大部分用于遍歷的實例方法，但它不是真正的數(shù)組，它不能動態(tài)變化，不支持push、pop、shift、unshift等修改數(shù)組的方法，類型判斷也不是數(shù)組：

const u8 = new Uint8Array()
u8 instanceof Uint8Array // true
Array.isArray(u8) // false
[...u8] // []
Array.from(u8) // []

以上代碼，可以看出，類型數(shù)組并不是真正的數(shù)組，但可以通過擴展運算符轉(zhuǎn)換成數(shù)組(其他方式也行)。
當(dāng)然，類型數(shù)組的使用場景一般在于處理二進(jìn)制數(shù)據(jù)，能夠遍歷讀取數(shù)據(jù)做一些操作即可，并不太需要做轉(zhuǎn)換。

其他JS類數(shù)組對象

• 自定義類數(shù)組對象
  前面已有介紹，開發(fā)中幾乎不用。

• function
  函數(shù)作為一個對象，也擁有l(wèi)ength屬性，所以它也可以轉(zhuǎn)換成數(shù)組。
  函數(shù)的length屬性表示的是參數(shù)的個數(shù)，轉(zhuǎn)成數(shù)組后，就表示有幾個元素，但元素值都為undefined。

  const fun = (al) => {}
  fun.length // 1
  Array.from(fun) // [undefined]
  

Web-API類數(shù)組對象

FileList

FileList對象是一個我們常常用到的類數(shù)組對象，主要是在文件上傳的過程中，我們選擇文件后，前端用于接收文件信息的對象，就是它，可以讀取到單個或多個文件數(shù)據(jù)。

FileList是一個擁有l(wèi)ength屬性并且屬性索引值是數(shù)字的對象，它的每一個子成員屬性都是一個 File 對象，處理文件信息。

inputFile.addEventListener('change', (e) => {
  const files = e.target.files
  console.log(Array.from(files))
})
// [File]

以上代碼，就是監(jiān)聽一個上傳控件的change事件，讀取到對應(yīng)的文件列表，并轉(zhuǎn)換輸出為數(shù)組，元素為File對象。

一般也用不著轉(zhuǎn)換，直接遍歷讀取FileList即可。

DOM中類數(shù)組

在Web開發(fā)中，DOM操作也有很多類數(shù)組對象，如元素集合HTMLCollection、節(jié)點NodeList等等。

HTMLCollection

HTMLCollection來自于頁面的document等節(jié)點元素對象，主要是各種屬性：

• document.links：返回所有鏈接元素
• docuement.forms：返回所有表單元素
• document.images：返回所有圖像元素
• document.scripts：返回所有腳本元素
• document.embeds：返回所有embed嵌入對象
• Element.children：返回當(dāng)前節(jié)點的所有子元素

const links = document.links
Object.prototype.toString.call(links) // '[object HTMLCollection]'
const linkArr = Array.from(links) // []
Array.isArray(linkArr) // true

以上代碼，讀取了頁面所有的鏈接，返回的一個HTMLCollection類數(shù)組對象，可以轉(zhuǎn)換成對應(yīng)的數(shù)組，當(dāng)前頁面并不存在鏈接，所以返回的是空數(shù)組。

NodeList

通過以下方法或?qū)傩垣@取的節(jié)點列表(NodeList)：

• getElementsByTagName：返回所有擁有指定HTML標(biāo)簽名的節(jié)點
• getElementsByClassName：返回所有擁有指定class類屬性名的節(jié)點
• getElementsByName：返回所有擁有指定name屬性的節(jié)點
• querySelectorAll：返回所有匹配給定選擇器的節(jié)點
• document.childNodes：返回所有子節(jié)點

const divList = document.querySelectorAll('div')
Array.isArray(divList) // false
Object.prototype.toString.call(divList) // '[object NodeList]'
divList.length // 4
const divArr = [...divList] // ?[div, div#clickInput, div#name, div#dropArea]
Array.isArray(divArr) // true

以上代碼，通過 querySelectorAll 讀取了頁面上所有的div，得到了一個NodeList對象，是一個類數(shù)組對象，可以通過擴展運算符轉(zhuǎn)換成一個真正的數(shù)組。

其他DOM相關(guān)類數(shù)組對象

以下也是DOM操作中，常見的一些類數(shù)組對象：

• document.styleSheets：返回所有樣式表(StyleSheetList)
• attributes：返回節(jié)點元素的所有屬性(NamedNodeMap)
• dataset：返回節(jié)點元素上的所有附加數(shù)據(jù)(DOMStringMap)
• classList：返回節(jié)點元素上的所有樣式類(DOMTokenList)

DOM中的對象都是由DOM-API提供給JavaScript調(diào)用的，因為不止JS要用，所以使用類數(shù)組較合適。

其他Web類數(shù)組對象

• window
  window對象也擁有l(wèi)ength，所以它也是類數(shù)組對象？
  是的，window的length屬性表示頁面擁有的frame/iframe的數(shù)量。
  所以也可以轉(zhuǎn)換成數(shù)組：

  window.length // 0
  Array.from(window) // []
  

  當(dāng)前頁面沒有frame，長度為0，轉(zhuǎn)換成了空數(shù)組。

• DataTransferItemList
  用于從拖拽或粘貼事件中讀取到的 Datatransfer 對象的一個只讀屬性 items，同一級的只讀屬性還有 files，也是一個類數(shù)組對象 FileList，上面已有介紹。
  在粘貼事件中，可以通過該對象讀取到粘貼的數(shù)據(jù)內(nèi)容。

• 數(shù)據(jù)存儲
  瀏覽器中的數(shù)據(jù)存儲機制，如 sessionStorage 和 localStorage，他們其實也是類數(shù)組對象，擁有l(wèi)ength屬性，可以進(jìn)行轉(zhuǎn)換。

  localStorage.length // 2
  Array.from(localStorage) // [undefined, undefined]
  

  以上代碼，就是對localStorage的處理，擁有兩個值，但由于是字符串鍵值對，無法轉(zhuǎn)成數(shù)字索引，所以數(shù)組兩個元素都是 undefined。

總結(jié)

本文描述了什么是類數(shù)組對象，它的主要特點，以及如何創(chuàng)建一個類數(shù)組對象，還有將類數(shù)組對象轉(zhuǎn)換成真正數(shù)組的幾種方式，接著也介紹了前端開發(fā)中可能會遇到的已有的各種類數(shù)組對象。
事實上，絕大部分的類數(shù)組對象是不需要專門去轉(zhuǎn)換為數(shù)組的，直接遍歷操作即可，但深入掌握這些類數(shù)組的知識，也是前端開發(fā)中不可少的。文章來源地址http://www.zghlxwxcb.cn/news/detail-468107.html

到了這里，關(guān)于一文搞懂前端的所有類數(shù)組類型的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！