前言
最近有空在看一本關(guān)于 JS 數(shù)據(jù)結(jié)構(gòu)和算法的書，里面有提到數(shù)組讲衫，卻對(duì)數(shù)組的基本概念輕輕帶過(guò)缕棵，雖然用了 JS 很久但是一直忙于需求業(yè)務(wù)的實(shí)現(xiàn)從未停下好好回視一下這個(gè) 既熟悉又陌生的朋友，于是查閱了一些資料焦人，尤其是密集數(shù)組和稀疏數(shù)組的區(qū)別挥吵，意猶未盡之下，寫了這篇文章花椭，以便更好地幫助理解書中的要點(diǎn)忽匈，稍顯淺顯，也有不足望各位提點(diǎn)矿辽。
什么是稀疏數(shù)組丹允？
通常編程語(yǔ)言中（C郭厌、JAVA等）數(shù)組都是預(yù)先設(shè)定好長(zhǎng)度的，他們的內(nèi)存占用是固定的雕蔽，內(nèi)存地址是連續(xù)不間斷折柠、緊密相連的，我們稱之為密集數(shù)組批狐，好比 JS 中類型化數(shù)組（TypedArray）的 ArrayBuffer扇售，但我們這里著重要說(shuō)的是通過(guò) Array 創(chuàng)建的數(shù)組，它其實(shí)是個(gè)對(duì)象嚣艇，當(dāng)我們通過(guò) new Array() 創(chuàng)建一個(gè)數(shù)組時(shí)承冰，它只是一個(gè)帶有 length 屬性的數(shù)組對(duì)象，我們可以像對(duì)象一樣去操作它的屬性：
let array = new Array(10)
// 下標(biāo)可以是任何的字符串食零，就像操作 Object 一樣
array.name = 'This is an Array.'
array['name'] = 'This is an Array.' // 等效 array.name
雖然可以像操作 Object 那樣為數(shù)組對(duì)象添加屬性困乒，但是真正計(jì)入數(shù)組元素的只能是以整數(shù)類型的字符作為下標(biāo)去映射值的元素，同時(shí)會(huì)影響其長(zhǎng)度屬性 length贰谣，我們接上段代碼繼續(xù)：
// 雖然之前賦上了一個(gè)新的屬性 name娜搂，但是其長(zhǎng)度仍然輸出10，而非11
console.log(array.length) // 10
// 用整數(shù)類型下標(biāo)定義一個(gè)數(shù)組元素才會(huì)計(jì)入數(shù)組長(zhǎng)度
array['0'] = 'first' // 下標(biāo)其實(shí)都是字符串
array[11] = 'eleventh' // 看起來(lái)這個(gè)下標(biāo)是一個(gè)數(shù)字吱抚，但是 JS 會(huì)自動(dòng)把它轉(zhuǎn)為字符
console.log(array.length) // 12
長(zhǎng)度屬性是可以手動(dòng)變更的：
array.length = 100
console.log(array.length) // 100
數(shù)組對(duì)象本身可能不占用太多內(nèi)存百宇，它只是包含了映射關(guān)系和長(zhǎng)度，真正占用內(nèi)存的是元素所映射的目標(biāo)频伤，也就是“鍵值”中的“值”恳谎。在V8引擎里芝此，JS 的數(shù)組得到進(jìn)一步的優(yōu)化憋肖，其中有個(gè)概念叫 Holey（有孔洞的），也就是那些沒有被指明映射關(guān)系的空間婚苹，他們不占用內(nèi)存岸更。如上看到，作為一門動(dòng)態(tài)語(yǔ)言膊升，我們隨時(shí)可以向這個(gè)數(shù)組對(duì)象里添加怎炊、修改元素映射，也能隨時(shí)改變其長(zhǎng)度 length廓译。自然地评肆，其元素所占的內(nèi)存地址也就無(wú)所謂固定連續(xù)了，我們稱這種數(shù)組為稀疏數(shù)組（Sparse Array）非区。
創(chuàng)建帶有孔洞的稀疏數(shù)組
- 使用 Array 構(gòu)造函數(shù)：
let sparse = new Array(100)
- 通過(guò)字面量：
let sparse = []
// 用一個(gè)超過(guò)原始長(zhǎng)度的下標(biāo)為元素賦值瓜挽，也就為該元素創(chuàng)建了一個(gè)映射關(guān)系，同時(shí)改變了該數(shù)組的長(zhǎng)度
sparse[99] = 'last'
console.log(sparse.length) // 100
// 用對(duì)象字面量書寫數(shù)組時(shí)征绸，允許元素留空
sparse = [, , ,] // 這就創(chuàng)建了長(zhǎng)度為3的空洞的數(shù)組
console.log(sparse.length) // 3
- 手動(dòng)修改一個(gè)大于原數(shù)組長(zhǎng)度的
length值：
let sparse = ['red', 'green', 'blue'] // 三個(gè)元素的數(shù)組
sparse.length = 100 // 此時(shí)長(zhǎng)度已是100久橙，但有效元素仍然只有3個(gè)
刪除元素的映射
從數(shù)組中刪除某個(gè)元素可以使用 pop俄占、shift、splice 方法淆衷，那如何解除元素與某個(gè)對(duì)象的映射關(guān)系呢缸榄？我們可以像操作對(duì)象一樣用 delete，它不會(huì)刪除映射目標(biāo)祝拯，僅僅是將元素和目標(biāo)對(duì)象的關(guān)聯(lián)斷開甚带，從而形成一個(gè)孔洞，所以也不會(huì)改變這個(gè)數(shù)組的 length佳头。
let one = '壹'
let array = []
array[0] = one // 將數(shù)組的第一個(gè)元素指到對(duì)象 one欲低，長(zhǎng)度變?yōu)?1
console.log(array, array.length) // ['壹'], 1
delete array[0] // 刪除數(shù)組第一個(gè)元素的映射關(guān)系
console.log(array) // [空]
console.log(array.length) // 因?yàn)橹皇莿h除了元素的映射，長(zhǎng)度并沒有改變畜晰，仍然輸出 1
console.log(one) // one 的值并不會(huì)刪除砾莱，仍然保留，輸出 '壹'
現(xiàn)象
我們說(shuō)到凄鼻，JS 的數(shù)組本質(zhì)上是對(duì)象——由整數(shù)字符作為下標(biāo)與目標(biāo)值構(gòu)成映射關(guān)系的自帶長(zhǎng)度屬性的對(duì)象腊瑟，長(zhǎng)度可以大于有效（已創(chuàng)建映射關(guān)系的）元素的個(gè)數(shù)。從映射狀態(tài)來(lái)看块蚌，完全映射的數(shù)組有著和傳統(tǒng)密集數(shù)組類似的表現(xiàn)闰非，而不完全映射的數(shù)組在生產(chǎn)中會(huì)有些特別，但又在情理之中。
- 訪問沒有映射關(guān)系的數(shù)組元素時(shí)腔剂，相當(dāng)于一個(gè)申明了卻沒有定義值的變量痴脾，所以會(huì)輸出
undefined：
let sparse = new Array(10)
console.log(sparse[0]) // undefined
- 不完全映射的數(shù)組，在用
map()辆毡、forEach()等方法做遍歷時(shí)，它們只會(huì)遍歷已有映射關(guān)系的元素：
// 此時(shí)數(shù)組元素的映射關(guān)系一個(gè)都沒有創(chuàng)建甜害，所以 forEach 不會(huì)有任何輸出
sparse.forEach((value, i) => {
console.log(i, value)
}) // nothing
// 根據(jù)下標(biāo)為最后一個(gè)元素賦值
sparse[sparse.length - 1] = 'tenth'
// 只會(huì)輸出已建立映射的元素 sparse[sparse.length-1] 的值 'tenth'
sparse.forEach((value, i) => {
console.log(i, value)
}) // 9, tenth
- 使用
for語(yǔ)句是用數(shù)組的length值作為循環(huán)依據(jù)舶掖，它不會(huì)主動(dòng)判斷當(dāng)前位置是否有映射值，所以當(dāng)循環(huán)體試圖通過(guò)下標(biāo)訪問沒有映射關(guān)系的位置時(shí)尔店，會(huì)輸出undefined：
for( let i = 0; i < sparse.length; i += 1){
console.log(i, sparse[i])
}
- 映射完全的數(shù)組眨攘，可以被所有常用數(shù)組方法遍歷：
// 一個(gè)完全映射的數(shù)組，這里的 undefined 是主動(dòng)賦值的有效映射
let array = ['1', 'day', 'white', 'Jake', undefined, null, 0]
// 輸出每個(gè)元素嚣州，包括null鲫售、undefined、0
array.forEach((value, i) => {
console.log(i, value)
})
- 在做
some()该肴、every()等操作時(shí)情竹，不完全映射的數(shù)組的表現(xiàn)是特殊的，但也在情理之中沙庐，這取決于這些方法的設(shè)計(jì)鲤妥，例如some()佳吞，即便長(zhǎng)度大于0，但因?yàn)槠渲袥]有任何建立映射的元素棉安，所以底扳，相當(dāng)于給一個(gè)空數(shù)組（[]）做操作：
let sparse = new Array(10)
// 由于還沒有建立映射關(guān)系，所以 some 的回調(diào)也沒有觸發(fā)贡耽，于是得到的結(jié)果依然是 false
console.log(sparse.some(item => !item)) // false
// 在所有元素都被賦值后衷模，用同樣的回調(diào)，some 的結(jié)果發(fā)生了變化
sparse.fill(false) // 賦值
console.log(sparse.some(item => !item)) // true
- 當(dāng)把長(zhǎng)度設(shè)成小于實(shí)際元素個(gè)數(shù)的值時(shí)蒲赂，會(huì)把超出長(zhǎng)度的元素從當(dāng)前數(shù)組中剔除：
let array = ['one', 'two', 'three']
array.length = 1
console.log(array) // ['one']
稀疏數(shù)組的快速映射（強(qiáng)制創(chuàng)建映射關(guān)系）
只是讓數(shù)組中的映射元素個(gè)數(shù)與長(zhǎng)度屬性相同阱冶，并不能改變其稀疏的特性：
let sparse = new Array(5)
// Array.apply
let array1 = Array.apply(null, sparse)
// Array.from方法
let array2 = Array.from(sparse)
// 解構(gòu)
let array3 = new Array(...sparse)
let array4 = [...sparse]
// 把所有元素映射為 undefined 了
array1.forEach((item, i) => {
console.log(i, item) // 輸出 undefined × 5
})
……
總結(jié)
以上是對(duì) JS Array 數(shù)組的粗淺認(rèn)知，在 JS 這門動(dòng)態(tài)語(yǔ)言里滥嘴，通過(guò) Array 所創(chuàng)建的數(shù)組無(wú)所謂疏密木蹬，因?yàn)樗鼈儽举|(zhì)上還是對(duì)象。在實(shí)際生產(chǎn)時(shí)若皱，對(duì)于數(shù)據(jù)集合的操作應(yīng)當(dāng)盡量保持映射完全镊叁，避免不合預(yù)期的意外。
