如何將類陣列轉化為陣列
首先，什麼是類陣列(Array Like)？
一個簡單的定義，如果一個物件有 length 屬性值，則它就是類陣列
那常見的類陣列有哪些呢？
這在 DOM 中甚為常見，如各種元素檢索 API 返回的都是類陣列，如 document.getElementsByTagName，document.querySelectorAll 等等。除了 DOM API 中，常見的 function 中的 arguments 也是類陣列
那如何把類陣列轉化為陣列呢？這是類陣列操作時一個典型的場景，也是一個典型的面試題
以下我們將以 { length: 3 } 來指代類陣列，來作為演示
節選自 日文 【Q168】在 js 中如何把類陣列轉化為陣列。另外這裡有更多的 前端面試題，歡迎交流
ES6+
ES6 中有現成的 API：Array.from，極為簡單
// [undefined, undefined, undefined]
Array.from({ length: 3 })除了 Array.from 還有更簡單的運算子 ... 擴充套件運算子，不過它只能作用於 iterable 物件，即擁有 Symbol(Symbol.iterator) 屬性值
擁有 Symbol(Symbol.iterator) 屬性值，意味著可以使用 for of 來迴圈迭代
// 適用於 iterable 物件
[...document.querySelectorAll('div')]但是嚴格意義上來說，它不能把類陣列轉化為陣列，如 { length: 3 }
// Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
[...{length: 3}]ES5
在此之前，我們先不使用 { length: 3 }，使用以下資料來代表類陣列
const arrayLike = {
0: 3,
1: 4,
2: 5,
length: 3
}在 ES5 中可以借用 Array API 通過 call/apply 改變 this 或者 arguments 來完成轉化。
最常見的轉換是 Array.prototype.slice
Array.prototype.slice.call(arrayLike)當然由於借用 Array API，一切以陣列為輸入，並以陣列為輸出的 API 都可以來做陣列轉換，如
Array(借用 arguments)Array.prototype.concat(借用 arguments)Array.prototype.slice(借用 this)Array.prototype.map(借用 this)Array.prototype.filter(借用 this)
Array.apply(null, arrayLike)
Array.prototype.concat.apply([], arrayLike)
Array.prototype.slice.call(arrayLike)
Array.prototype.map.call(arrayLike, x => x)
Array.prototype.filter.call(arrayLike, x => 1)此時一切正常，但是忘了一個特例，稀疏陣列。在此之前，先做一個題，以下程式碼輸出多少
// 該程式碼輸出多少
Array(100).map(x => 1)參考 Array(100).map(x => 1) 結果是多少
稀疏陣列 (sparse array)
使用 Array(n) 將會建立一個稀疏陣列，為了節省空間，稀疏陣列內含非真實元素，在控制檯上將以 empty 顯示，如下所示
[,,,] 與 Array(3) 都將返回稀疏陣列
> [,,,]
[empty × 3]
> Array(3)
[empty × 3]當類陣列為 { length: 3 } 時，一切將類陣列做為 this 的方法將都返回稀疏陣列，而將類陣列做為 arguments 的方法將都返回密集陣列
總結
由上總結，把類陣列轉化成陣列最靠譜的方式是以下三個
Array.from(arrayLike)
Array.apply(null, arrayLike)
Array.prototype.concat.apply([], arrayLike)以下幾種方法需要考慮稀疏陣列的轉化
Array.prototype.filter.call(divs, x => 1)
Array.prototype.map.call(arrayLike, x => x)
Array.prototype.filter.call(arrayLike, x => 1)以下方法要注意是否是 iterable object
[...arrayLike]