1. 程式人生 > >理解JS裏的稀疏數組與密集數組

理解JS裏的稀疏數組與密集數組

應該 share begin asc 現在 thead 之間 一點 也會

  一般來說,JavaScript中的數組是稀疏的。

  什麽是稀疏呢?稀疏也就是說,數組中的元素之間可以有空隙,因為一個數組其實就是一個鍵值映射。本文解釋了如何創建稀疏數組和不稀疏的數組。

1、稀疏數組

  創建一個指定長度的稀疏數組很簡單:技術分享圖片

  當你遍歷它時,你會發現,它並沒有元素,JavaScript會跳過這些縫隙。

  還有一些其他情況會生成稀疏數組,比如:技術分享圖片,數組元素實際只有2個,但是長度確實101。

2、密集數組

  1、創建密集數組的技巧:var a = Array.apply(null, Array(3));

技術分享圖片

//上面的語句其實等同於:
Array(undefined, undefined, undefined)

  你現在可以看到數組裏面有真實元素了,雖然元素的值是undefined,但是你可以遍歷到這些數組元素了,還可以為每個元素重新賦值:

技術分享圖片

  實際上,JavaScript並沒有常規的數組,所有的數組其實就是個對象,只不過會自動管理一些"數字"屬性和length屬性罷了

  說的更直接一點,JavaScript中的數組根本沒有索引,因為索引應該是數字,而JavaScript中數組的索引其實是字符串:arr[1]其實就是arr["1"],給arr["1000"] = 1,arr.length也會自動變為1001。

  這些表現的根本原因就是:JavaScript中的對象就是字符串到任意值的鍵值對。註意鍵只能是字符串

。這和AWK類似,不信可以試試awk ‘BEGIN{a[1]=1;print(a["1"])}‘。也許這是因為Brendan Eich在發明JavaScript時參考了不少awk的設計的原因。不過目前,ES6中已經有了類似於Java等語言的Map類型,鍵可以是任意類型的值。

  2、另外一個技巧:

Array.apply(null, Array(3)).map(Function.prototype.call.bind(Number))
//[ 0, 1, 2 ]

  這大概等同於下面的寫法

Array.apply(null, Array(3)).map(
    function (x,i,...) { 
return Number.call(x,i,...) })

  註意:x是call方法的第一個參數,它作為了Number函數中的this值。這個值沒有什麽意義,相當於被忽略,我更喜歡下面這個能讓人一眼就看明白的寫法

Array.apply(null, Array(3)).map(function (x,i) { return i })

  3、另外一種方式,突然想到之前這麽轉化過,這樣來也是個密集數組。

  在JavaScript中,可以用Array(100).join("a")來創建密集數據。但是有個問題就是兩個元素才1個坑,因為2個才能join。100個元素就需要101個。我們可以看下

技術分享圖片

3、實際用途

  在實際生產中,使用上面講的創建密集數組的方法會讓別人無法讀懂你的代碼。所以封裝成一個工具函數會更好

//比如 _.range:
 _.range(3)    //[ 0, 1, 2 ]

//和map配合使用,可以使用某個指定的值填充整個數組。
 _.range(3).map(function () { return "a" })
//[ ‘a‘, ‘a‘, ‘a‘ ]

理解JS裏的稀疏數組與密集數組