前面博文有介紹JavaScript中陣列的一些特性，通過對這些陣列特性的深入梳理，能夠加深我們對陣列相關知識的理解，詳見博文：
一文搞懂JavaScript陣列的特性
其實，在前端開發中，除了陣列以外，還有一種類似陣列的物件，一般叫做類陣列、或偽陣列，也是我們需要掌握的知識點。
首先，我們先嚐試給類陣列加個簡單的定義：擁有length屬性的物件(非陣列)。類陣列的核心特徵就是擁有length屬性，擁有length屬性又不是真正陣列的物件，基本可以被認定為類陣列。
雖然這個定義很簡單，只突出了length屬性，但類陣列的基本特點，我們還是可以總結如下：
根據以上類陣列的特點，我們可以自己建立類陣列的物件，也比較簡單，只需要擁有length，如下所示：
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
以上程式碼，建立了一個length屬性為3的物件，通過for迴圈遍歷物件，並且下標輸出對應的值。
length屬性並不會動態新增，比如我們給al物件增加一個屬性，但length值仍為3：
al[3] = 444
console.log(al.length) // 3
如果把該類陣列物件轉換成一個真正的陣列後，就可以進行陣列操作了。
事實上，我們可以省略其他屬性，只保留length，同樣可當做一個類陣列使用：
const al = { length: 3 }
雖然我們可以通過類似這種方式，自己建立類陣列，但實際開發過程中，幾乎沒人這麼處理。
真正在前端開發中，接觸到的類陣列，都是JavaScript語言或者Web環境下提供的各種類陣列的物件。
在介紹這些類陣列物件之前，我們先看下類陣列物件如何才能轉換成陣列。
類陣列只是類似陣列的物件，缺少很多相應的方法，有時候我們可能需要把類陣列轉換成陣列，才能更好的操作，這時候就需要找到方便有效的轉換方式。
當前常用的轉換方式，大致有如下幾類，我們一個個介紹。
首先是ES6提供的新的陣列靜態方法：Array.from，它用於從一個類陣列或可迭代物件中建立一個新的陣列。基本上，只要擁有length屬性的物件，都能被Array.from轉換成陣列。
語法：Array.from(arrayLike, mapFn, thisArg)。
三個引數說明：
下面看一個範例：
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
以上程式碼，我們自定義了一個擁有length屬性的物件，然後通過Array.from方法進行轉換，得到了一個長度為3的新陣列。
這種方式簡單方便，在當前前端開發的絕大多數情況下，都應該是首選。
在ES6沒出來之前，如果想較好的進行類陣列的轉換，一般使用的是該方法：Array.prototype.slice.call()。
它基於陣列的slice()方法，把執行時的this指向類陣列物件，讓類陣列物件像陣列一樣使用slice()方法返回一個新的陣列，因此擁有length屬性的類陣列物件都能被轉換成陣列。
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定義同樣的類陣列物件，通過Array.prototype.slice.call轉換，效果是一樣的。
以上兩種方式，是最正確有效的轉換，推薦日常使用。
除此以外，還有其他的方式，但各有缺陷，要麼較複雜、要麼對部分類陣列物件不適用，所以並不太推薦。
[...'hello'] // ['h', 'e', 'l', 'l', 'o']
[...{ length: 3 }] // Uncaught TypeError: {(intermediate value)} is not iterable
Array.from({ length: 3 }) // [undefined, undefined, undefined]
以上程式碼，通過擴充套件運運算元，字串能被轉換成陣列，但自定義類陣列物件 { length: 3 } 則不行，並報錯；而使用Array.from則轉成了擁有3個 undefined 元素的陣列。
前端開發中最常見且被認可的類陣列物件，是函數的arguments引數物件，另外字串也是一個類陣列物件，其他的還有各種Web環境提供的API。
如果把這些分成兩類的話：
下面我們就一一介紹下這些類陣列物件。
arguments是JS中函數內部的一個物件，用於處理不定數目的引數，是一個類陣列物件。
在ES6推出之前，arguments的使用還是非常廣泛的，但在ES6推出預設引數和擴充套件引數後，它的使用就減少了。
通過下面的範例，轉成陣列：
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物件。
注意，箭頭函數內部不存在arguments物件。
JavaScript中的字串也是一個類陣列物件，它擁有length屬性，可以通過下標數位索引存取，也可以轉換成陣列，字串中的每一個字元都變成新陣列的一個元素。
const str = 'abc'
str.length // 3
str[1] // 'b'
Array.from(str) // ['a', 'b', 'c']
[...str] // ['a', 'b', 'c']
字串擁有一個實體方法 split，可以將字串按照傳入的分隔符進行處理，返回一個分割出來的每個子字串都作為元素的陣列：
'abc'.split('') // ['a', 'b', 'c']
'abc'.split('b') // ['a', 'c']
以上程式碼，
當使用空字元做分隔符的時候，就是將每一個字元都分割成陣列元素，與類陣列的轉換方式相同。
當使用 b 字元做分隔符的時候，返回的陣列元素就只有2個了。
由於split操作分隔符的靈活性，可以給我們處理字串帶來方便，所以常用該方法，而少用類陣列轉換。
型別陣列也是一種類陣列物件，提供了存取記憶體緩衝區中二進位制資料的機制，它擁有11個物件，如Uint8Array、Uint8ClampedArray、Int32Array、Float64Array等等。具體知識可見博文前端二進位制API知識總結
型別陣列都擁有和陣列相同的大部分用於遍歷的實體方法，但它不是真正的陣列，它不能動態變化，不支援push、pop、shift、unshift等修改陣列的方法，型別判斷也不是陣列：
const u8 = new Uint8Array()
u8 instanceof Uint8Array // true
Array.isArray(u8) // false
[...u8] // []
Array.from(u8) // []
以上程式碼，可以看出，型別陣列並不是真正的陣列，但可以通過擴充套件運運算元轉換成陣列(其他方式也行)。
當然，型別陣列的使用場景一般在於處理二進位制資料，能夠遍歷讀取資料做一些操作即可，並不太需要做轉換。
自定義類陣列物件
前面已有介紹，開發中幾乎不用。
function
函數作為一個物件，也擁有length屬性，所以它也可以轉換成陣列。
函數的length屬性表示的是引數的個數，轉成陣列後，就表示有幾個元素，但元素值都為undefined。
const fun = (al) => {}
fun.length // 1
Array.from(fun) // [undefined]
FileList物件是一個我們常常用到的類陣列物件，主要是在檔案上傳的過程中，我們選擇檔案後，前端用於接收檔案資訊的物件，就是它，可以讀取到單個或多個檔案資料。
FileList是一個擁有length屬性並且屬性索引值是數位的物件，它的每一個子成員屬性都是一個 File 物件，處理檔案資訊。
inputFile.addEventListener('change', (e) => {
const files = e.target.files
console.log(Array.from(files))
})
// [File]
以上程式碼，就是監聽一個上傳控制元件的change事件，讀取到對應的檔案列表，並轉換輸出為陣列，元素為File物件。
一般也用不著轉換，直接遍歷讀取FileList即可。
在Web開發中，DOM操作也有很多類陣列物件，如元素集合HTMLCollection、節點NodeList等等。
HTMLCollection來自於頁面的document等節點元素物件，主要是各種屬性：
const links = document.links
Object.prototype.toString.call(links) // '[object HTMLCollection]'
const linkArr = Array.from(links) // []
Array.isArray(linkArr) // true
以上程式碼，讀取了頁面所有的連結，返回的一個HTMLCollection類陣列物件，可以轉換成對應的陣列，當前頁面並不存在連結，所以返回的是空陣列。
通過以下方法或屬性獲取的節點列表(NodeList)：
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物件，是一個類陣列物件，可以通過擴充套件運運算元轉換成一個真正的陣列。
以下也是DOM操作中，常見的一些類陣列物件：
DOM中的物件都是由DOM-API提供給JavaScript呼叫的，因為不止JS要用，所以使用類陣列較合適。
window
window物件也擁有length，所以它也是類陣列物件？
是的，window的length屬性表示頁面擁有的frame/iframe的數量。
所以也可以轉換成陣列：
window.length // 0
Array.from(window) // []
當前頁面沒有frame，長度為0，轉換成了空陣列。
DataTransferItemList
用於從拖拽或貼上事件中讀取到的 Datatransfer 物件的一個唯讀屬性 items，同一級的唯讀屬性還有 files，也是一個類陣列物件 FileList，上面已有介紹。
在貼上事件中，可以通過該物件讀取到貼上的資料內容。
資料儲存
瀏覽器中的資料儲存機制，如 sessionStorage 和 localStorage，他們其實也是類陣列物件，擁有length屬性，可以進行轉換。
localStorage.length // 2
Array.from(localStorage) // [undefined, undefined]
以上程式碼，就是對localStorage的處理，擁有兩個值，但由於是字串鍵值對，無法轉成數位索引，所以陣列兩個元素都是 undefined。
本文描述了什麼是類陣列物件，它的主要特點，以及如何建立一個類陣列物件，還有將類陣列物件轉換成真正陣列的幾種方式，接著也介紹了前端開發中可能會遇到的已有的各種類陣列物件。
事實上，絕大部分的類陣列物件是不需要專門去轉換為陣列的，直接遍歷操作即可，但深入掌握這些類陣列的知識，也是前端開發中不可少的。