在 JavaScript 中建立數組的正確姿式

JavaScript 中數組的特殊性

• 每一項均可以保存任意類型的數據，數組大小能夠動態調整，便可以隨着數據的添加自動增加以容納新數據
• 數組中可能會存在空位
• 稀疏數組

具備不連續索引的數組，其 length 屬性值大於元素的個數。

• 密集數組

具備連續索引的數組，其 length 屬性值等於元素的個數。

在 JavaScript 中，數組本質上也是對象，是對象的一種特殊形式。

數組索引實際上和碰巧是整數名的對象屬性沒有什麼差異，不過數組的實現是通過了優化的，經過數組索引訪問數組元素比訪問通常對象的屬性要快的多。

規定數組索引的範圍是 0 ~ 4294967294 （2^32 - 2）, 全部的索引都是屬性名， 可是隻有在這個範圍內的整數纔是數組索引，數組索引會觸發數組的特殊行爲。

數組的建立方式

數組字面量

這是咱們平時使用最多，最簡單的數組建立方式。

const arr1 = []
複製代碼

構造函數

利用構造函數建立數組的時候，在只有一個參數的狀況下，根據參數的類型不一樣，會返回不一樣的結果。

// 注：這種方式建立的數組屬於稀疏數組，每一項都是空位，下邊會具體介紹稀疏數組。
// 請避免使用這樣的方式建立數組。
const arr1 = Array(3) // [empty × 3]
const arr2 = Array('3') // ["3"]
複製代碼

of() 方法

這是 ES6 中新增的方法，用來彌補構造函數的的缺陷。 不會根據參數的類型不一樣致使建立行爲的不一樣。

const arr1 = Array.of(3) // [3]
const arr2 = Array.of('3') // ['3']
複製代碼

from() 方法

ES6 新增的方法，這個方法的主要用途就是將類數組對象轉爲數組對象。 建立給定長度的數組這個方法會很好用。

const arr1 = Array.from({length: 3}) // [undefined, undefined, undefined]
複製代碼

稀疏數組

稀疏數組就是存在空位的數組，這裏簡單介紹一下：

空位的檢測 in

空位是沒有任何值，能夠用 in 運算符檢測。咱們能夠根據 in 字符來檢測數組某一項是不是空位。

const a = [,,,] // [empty × 3]
0 in a // false
const b = [1,2,3]
0 in b //true
複製代碼

形成稀疏數組的操做

• delete 操做符

使用 delete 操做符能夠將數組項從數組中刪除，數組的長度並不會發生變化，而是會留下一個空位。

const b = [1,2,3]
delete b[0]
console.log(b) // [empty, 2, 3]
複製代碼

• 構造函數

const a = Array(3)
console.log(a) // [empty × 3]
複製代碼

• 在數組字面量中省略值

[,,,] // [empty × 3]
複製代碼

• 指定數組索引大於數組長度

const c = []
c[10] = 0;
console.log(c) // [empty × 10, 0]
複製代碼

• 指定數組長度大於當前數組長度

const a = []
a.length = 10 // [empty × 10]
複製代碼

咱們在平時要儘可能避免建立和使用稀疏數組，由於在 ES6 以前的方法，對稀疏數組的處理存在不少不統一的地方。

操做的不統一

ES5 對空位的處理，已經很不一致了，大多數狀況下會忽略空位。

• forEach(), filter(), reduce(), every() 和 some() 都會跳過空位。
• map() 會跳過空位，但會保留這個值。
• join() 和 toString() 會將空位視爲 undefined，而 undefined 和 null 會被處理成空字符串。

ES6 則是明確將空位轉爲 undefined。

• Array.from 方法會將數組的空位，轉爲 undefined。
• 擴展運算符（...）也會將空位轉爲 undefined。
• copyWithin() 會連空位一塊兒拷貝。
• fill() 會將空位視爲正常的數組位置。
• for...of 循環也會遍歷空位。
• entries()、keys()、values()、find()和 findIndex() 會將空位處理成 undefined。

參考：阮一峯《ECMAScript 6 入門》- 數組的擴展 - 數組的空位

注意： 操做的不統一可能會有產生不少意料以外的結果，因此「牆裂」建議不要建立和使用稀疏數組。

固定長度的 undefined 數組建立

有些時候，咱們並不關心數組的內容是什麼，咱們只是須要一個真正的數組，而且可以使用數組的方法。

能夠參考如下方法來建立：

1. Array.apply

// 這個方法也是將一個類數組對象轉爲數組對象。
// 在建立 undefined 值的數組時有些奇怪和繁瑣，可是結果遠比 Array(3) 更準確可靠。
Array.apply(null, {length: 4}) // [undefined, undefined, undefined, undefined]
複製代碼

2. Array.from()

// 將類數組對象轉換爲數組對象
Array.from({length: 4}) // [undefined, undefined, undefined, undefined]
複製代碼

3. 擴展運算符

[...Array(4)] // [undefined, undefined, undefined, undefined]
複製代碼

總而言之

• 不要建立和使用稀疏數組
• 避免使用 Array 構造函數建立數組
• 推薦對象字面量、of()、from()、擴展運算符...建立數組

參考連接

阮一峯《ECMAScript 6 入門》- 數組的擴展 - 數組的空位

建立 0-100 的數組

稀疏數組和 filter 方法