JavaScript稀疏數(shù)組與孔hole示例詳解

第JavaScript稀疏數(shù)組與孔hole示例詳解目錄稀疏數(shù)組是什么JavaScript數(shù)組天生就是稀疏數(shù)組JavaScript數(shù)組稀疏特性帶來(lái)的怪異現(xiàn)象slice會(huì)復(fù)制孔forEach、every會(huì)跳過(guò)孔（不對(duì)孔調(diào)用回調(diào)函數(shù)）map不對(duì)孔調(diào)用回調(diào)函數(shù)，但是孔會(huì)保留filter不對(duì)孔調(diào)用回調(diào)函數(shù)，但是孔會(huì)被過(guò)濾掉join會(huì)將孔轉(zhuǎn)化為一個(gè)空字符串進(jìn)行拼接，與undefined一樣初始化無(wú)孔數(shù)組的方法Array.apply(null,Array(n))的原理

稀疏數(shù)組是什么

在絕大多數(shù)JavaScript的實(shí)現(xiàn)中，數(shù)組是稀疏的，我們可以認(rèn)為js的數(shù)組都是稀疏的（雖然ES標(biāo)準(zhǔn)并沒(méi)有這樣規(guī)定）。

稀疏數(shù)組與密集數(shù)組最大的不同，就是稀疏數(shù)組中可以有孔(hole)。孔是邏輯上存在于數(shù)組中，但物理上不存在與內(nèi)存中的那些數(shù)組項(xiàng)。在那些僅有少部分項(xiàng)被使用的數(shù)組中，孔可以大大減少內(nèi)存空間的浪費(fèi)。比如，我們要表示一個(gè)長(zhǎng)度為10000的數(shù)組，它的最后一個(gè)項(xiàng)是字符串a(chǎn)。如果按照密集數(shù)組的做法，我們需要開(kāi)辟10000個(gè)項(xiàng)的空間，有9999個(gè)項(xiàng)的空間都被浪費(fèi)了。而如果按照稀疏數(shù)組的做法，稀疏數(shù)組只需要記錄：數(shù)組第10000個(gè)項(xiàng)的值為a，這節(jié)省了很多內(nèi)存空間。

JavaScript數(shù)組天生就是稀疏數(shù)組

js數(shù)組就是若干個(gè)下標(biāo)（數(shù)字）與值之間的映射。從下標(biāo)x到值y的映射表示：數(shù)組第x個(gè)項(xiàng)的值為y。這實(shí)際上就是上例中稀疏數(shù)組的記錄方法。

在Chrome控制臺(tái)的執(zhí)行結(jié)果

如上圖，如果你調(diào)用newArray(3)，你得到的數(shù)組中只有一個(gè)屬性length，記錄了它的長(zhǎng)度，但是沒(méi)有任何下標(biāo)（數(shù)字）與值之間的映射。這是一個(gè)只有3個(gè)孔的數(shù)組。

如上圖，如果你繼續(xù)執(zhí)行a[1]=aaa，那么實(shí)際上是在這個(gè)稀疏數(shù)組中增加了一條從1到aaa之間的映射。

如上圖，如果你繼續(xù)執(zhí)行a[10000]=bbb，也只不過(guò)是又增加了一條從10000到bbb之間的映射而已。length自動(dòng)變?yōu)榱?0001，這符合我們的直覺(jué)。不存在映射關(guān)系，但又處在數(shù)組長(zhǎng)度范圍內(nèi)的數(shù)組項(xiàng)，就是孔。此時(shí)，這個(gè)數(shù)組與長(zhǎng)度為2的普通數(shù)組[aaa,bbb]，占用相同大小的內(nèi)存空間。

JavaScript數(shù)組稀疏特性帶來(lái)的怪異現(xiàn)象

slice會(huì)復(fù)制孔

vararr=['a',,'b']

//["a",undefined×1,"b"]

arr.slice(1,2)

//[undefined×1]

arr.slice()

//["a",undefined×1,"b"]

forEach、every會(huì)跳過(guò)孔（不對(duì)孔調(diào)用回調(diào)函數(shù)）

vararr=['a',,'b']

//["a",undefined×1,"b"]

arr.forEach(function(x,i){console.log(i+'.'+x)})

//0.a

//2.b

arr.every(function(x){returnx.length===1})

//true

map不對(duì)孔調(diào)用回調(diào)函數(shù)，但是孔會(huì)保留

arr.map(function(x,i){returni+'.'+x})

//['0.a',undefined×1,'2.b']

filter不對(duì)孔調(diào)用回調(diào)函數(shù)，但是孔會(huì)被過(guò)濾掉

arr.filter(function(x){returntrue})

//['a','b']

join會(huì)將孔轉(zhuǎn)化為一個(gè)空字符串進(jìn)行拼接，與undefined一樣

arr.join('-')

//'a--b'

['a',undefined,'b'].join('-')

//'a--b'

而其他所有的數(shù)組方法會(huì)正常對(duì)待孔，就像數(shù)組中真的存在這個(gè)空位一樣：

vararr2=arr.slice()

arr2.sort()

//['a','b',undefined×1]

初始化無(wú)孔數(shù)組的方法

因?yàn)閿?shù)組中的孔會(huì)造成上述的那些怪異現(xiàn)象，所以我們有時(shí)希望初始化一個(gè)沒(méi)有孔的數(shù)組。

比如我們希望初始化[0,1,2]這樣的數(shù)組，但是我們無(wú)法通過(guò)newArray(3)與map方法得到：

vara1=newArray(3)

//[undefined×3]

a1.map(function(x,i){returni})

//[undefined×3]

//因?yàn)閙ap會(huì)跳過(guò)孔，所以實(shí)際上回調(diào)函數(shù)沒(méi)有被調(diào)用過(guò)

a1有孔

正確的方法：

vara2=Array.apply(null,Array(3))

//[undefined,undefined,undefined]

a2.map(function(x,i){returni})

//[0,1,2]

//map的回調(diào)函數(shù)執(zhí)行了3次

a2無(wú)孔

[undefined3]和[undefined,undefined,undefined]，chrome控制臺(tái)用這兩種表示方式來(lái)區(qū)分孔和真正的undefined值！

從上面兩幅圖的對(duì)比可以看出，第一種方法沒(méi)有構(gòu)造出映射，只創(chuàng)造出了3個(gè)孔。而第二種方法創(chuàng)建出了真正的從下標(biāo)到值之間的映射，映射的值為undefined。因此map不會(huì)跳過(guò)這些數(shù)組項(xiàng)。

Array.apply(null,Array(n))的原理

為什么vara2=Array.apply(null,Array(3))能創(chuàng)造出無(wú)孔的數(shù)組呢？

我們將一個(gè)含有3個(gè)孔的數(shù)組作為第二個(gè)參數(shù)傳遞給apply，apply將利用這個(gè)數(shù)組來(lái)決定調(diào)用Array()的參數(shù)。

因?yàn)閍pply將數(shù)組中的孔視為undefined，所以Array調(diào)用的參數(shù)實(shí)際上為Array(undefined,undefined,undefined)。

又因?yàn)橥ㄟ^(guò)Array(a,b,c)這種方法調(diào)用Array會(huì)返回[a,b,c]，所以Array(undefined,undefined,undefined)返回的是[undefined,undefined,undefined]。

參考資料

https://2/2013/11/initializing-arrays.html

https://2/2013/07/array-iteration-holes.html

https