在絕大多數(shù)JavaScript的實(shí)現(xiàn)中节预,數(shù)組是稀疏的,我們可以認(rèn)為js的數(shù)組都是稀疏的(雖然ES標(biāo)準(zhǔn)并沒有這樣規(guī)定)属韧。
稀疏數(shù)組是什么
稀疏數(shù)組與密集數(shù)組最大的不同,就是稀疏數(shù)組中可以有“孔”(hole)蛤吓。孔是邏輯上存在于數(shù)組中宵喂,但物理上不存在與內(nèi)存中的那些數(shù)組項(xiàng)。在那些僅有少部分項(xiàng)被使用的數(shù)組中会傲,孔可以大大減少內(nèi)存空間的浪費(fèi)锅棕。比如,我們要表示一個長度為10000的數(shù)組淌山,它的最后一個項(xiàng)是字符串'a'裸燎。如果按照密集數(shù)組的做法,我們需要開辟10000個項(xiàng)的空間泼疑,有9999個項(xiàng)的空間都被浪費(fèi)了德绿。而如果按照稀疏數(shù)組的做法,稀疏數(shù)組只需要記錄:“數(shù)組第10000個項(xiàng)的值為'a'”退渗,這節(jié)省了很多內(nèi)存空間移稳。
JavaScript數(shù)組天生就是稀疏數(shù)組
js數(shù)組就是若干個下標(biāo)(數(shù)字)與值之間的映射。從下標(biāo)x到值y的映射表示:“數(shù)組第x個項(xiàng)的值為y”会油。這實(shí)際上就是上例中稀疏數(shù)組的記錄方法个粱。
如上圖囊蓝,如果你調(diào)用
new Array(3)
酣栈,你得到的數(shù)組中只有一個屬性length慢睡,記錄了它的長度乾戏,但是沒有任何下標(biāo)(數(shù)字)與值之間的映射兔乞。這是一個只有3個孔的數(shù)組创坞。
如上圖异吻,如果你繼續(xù)執(zhí)行
a[1] = 'aaa'
怨规,那么實(shí)際上是在這個稀疏數(shù)組中增加了一條從1到"aaa"之間的映射絮吵。
如上圖弧烤,如果你繼續(xù)執(zhí)行
a[10000]='bbb'
,也只不過是又增加了一條從10000到"bbb"之間的映射而已蹬敲。length自動變?yōu)榱?0001暇昂,這符合我們的直覺。不存在映射關(guān)系伴嗡,但又處在數(shù)組長度范圍內(nèi)的數(shù)組項(xiàng)急波,就是孔。此時瘪校,這個數(shù)組與長度為2的普通數(shù)組['aaa', 'bbb']澄暮,占用相同大小的內(nèi)存空間名段。
JavaScript數(shù)組稀疏特性帶來的“怪異現(xiàn)象”
slice會復(fù)制孔
var arr = [ 'a', , 'b' ]
// ["a", undefined × 1, "b"]
arr.slice(1,2)
// [undefined × 1]
arr.slice()
// ["a", undefined × 1, "b"]
forEach、every會跳過孔(不對孔調(diào)用回調(diào)函數(shù))
var arr = [ 'a', , 'b' ]
// ["a", undefined × 1, "b"]
arr.forEach(function (x, i) { console.log(i+'.'+x) })
// 0.a
// 2.b
arr.every(function (x) { return x.length === 1 })
// true
map不對孔調(diào)用回調(diào)函數(shù)泣懊,但是孔會保留
arr.map(function (x,i) { return i+'.'+x })
// [ '0.a', undefined × 1, '2.b' ]
filter不對孔調(diào)用回調(diào)函數(shù)伸辟,但是孔會被過濾掉
arr.filter(function (x) { return true })
// [ 'a', 'b' ]
join會將孔轉(zhuǎn)化為一個空字符串進(jìn)行拼接,與undefined一樣
arr.join('-')
// 'a--b'
[ 'a', undefined, 'b' ].join('-')
// 'a--b'
而其他所有的數(shù)組方法會正常對待孔馍刮,就像數(shù)組中真的存在這個“空位”一樣:
var arr2 = arr.slice()
arr2.sort()
// [ 'a', 'b', undefined × 1 ]
初始化無孔數(shù)組的方法
因?yàn)閿?shù)組中的孔會造成上述的那些“怪異現(xiàn)象”信夫,所以我們有時希望初始化一個沒有孔的數(shù)組。
比如我們希望初始化[0,1,2]這樣的數(shù)組卡啰,但是我們無法通過new Array(3)與map方法得到:
var a1 = new Array(3)
// [undefined × 3]
a1.map(function (x, i) { return i })
// [undefined × 3]
// 因?yàn)閙ap會跳過孔静稻,所以實(shí)際上回調(diào)函數(shù)沒有被調(diào)用過
正確的方法:
var a2 = Array.apply(null, Array(3))
// [undefined, undefined, undefined]
a2.map(function (x, i) { return i })
// [0, 1, 2]
// map的回調(diào)函數(shù)執(zhí)行了3次
[undefined × 3]和[undefined, undefined, undefined],chrome控制臺用這兩種表示方式來區(qū)分孔和真正的undefined值匈辱!
從上面兩幅圖的對比可以看出振湾,第一種方法沒有構(gòu)造出映射,只創(chuàng)造出了3個孔亡脸。而第二種方法創(chuàng)建出了真正的“從下標(biāo)到值之間的映射”押搪,映射的值為undefined。因此map不會跳過這些數(shù)組項(xiàng)梗掰。
Array.apply(null, Array(n))的原理
為什么var a2 = Array.apply(null, Array(3))
能創(chuàng)造出無孔的數(shù)組呢嵌言?
我們將一個含有3個孔的數(shù)組作為第二個參數(shù)傳遞給apply,apply將利用這個數(shù)組來決定調(diào)用Array()的參數(shù)及穗。
因?yàn)?strong>apply將數(shù)組中的孔視為undefined摧茴,所以Array調(diào)用的參數(shù)實(shí)際上為Array(undefined, undefined, undefined)。
又因?yàn)橥ㄟ^Array(a,b,c)這種方法調(diào)用Array會返回[a,b,c]埂陆,所以Array(undefined, undefined, undefined)返回的是[undefined, undefined, undefined]苛白。
參考資料
http://2ality.com/2012/06/dense-arrays.html
http://2ality.com/2013/07/array-iteration-holes.html
http://2ality.com/2013/11/initializing-arrays.html
http://2ality.com/2015/09/holes-arrays-es6.html