JavaScript中的稀疏數(shù)組與密集數(shù)組[譯]
更新時間:2012年09月17日 02:44:38 作者:
一般來說,JavaScript中的數(shù)組是稀疏的,也就是說,數(shù)組中的元素之間可以有空隙,因為一個數(shù)組其實就是一個鍵值映射.本文解釋了如何創(chuàng)建稀疏數(shù)組和不稀疏的數(shù)組
1.稀疏數(shù)組
創(chuàng)建一個指定長度的稀疏數(shù)組很簡單:
> var a = new Array(3);
> a
[ , , ]
> a.length
3
> a[0]
undefined
當(dāng)你遍歷它時,你會發(fā)現(xiàn),它并沒有元素.JavaScript會跳過這些縫隙.
> a.forEach(function (x, i) { console.log(i+". "+x) });
> a.map(function (x, i) { return i })
[ , , ]
譯者注:還有一些其他情況會生成稀疏數(shù)組,比如
>var arr = [];
>arr[0] = 0;
>arr[100] = 100>a.forEach(function (x, i) { console.log(i+". "+x) });0. 0100. 100
2.密集數(shù)組
> var a = Array.apply(null, Array(3));
> a
[ undefined, undefined, undefined ]
上面的語句其實等同于:
Array(undefined, undefined, undefined)
但從表面上看,貌似這個數(shù)組和之前的稀疏數(shù)組并沒有太多的區(qū)別:
> a.length
3
> a[0]
undefined
可是,你現(xiàn)在可以遍歷到這些數(shù)組元素了,還可以為每個元素重新賦值:
> a.forEach(function (x, i) { console.log(i+". "+x) });
0. undefined
1. undefined
2. undefined
> a.map(function (x, i) { return i })
[ 0, 1, 2 ]
譯者注:實際上,JavaScript并沒有常規(guī)的數(shù)組,所有的數(shù)組其實就是個對象,只不過會自動管理一些"數(shù)字"屬性和length屬性罷了.說的更直接一點,JavaScript中的數(shù)組根本沒有索引,因為索引應(yīng)該是數(shù)字,而JavaScript中數(shù)組的索引其實是字符串.arr[1]其實就是arr["1"],給arr["1000"] = 1,arr.length也會自動變?yōu)?001.這些表現(xiàn)的根本原因就是,JavaScript中的對象就是字符串到任意值的鍵值對.注意鍵只能是字符串.這和AWK類似.不信可以試試awk 'BEGIN{a[1]=1;print(a["1"])}'.也許這是因為Brendan Eich在發(fā)明JavaScript時參考了不少awk的設(shè)計的原因.不過目前,ES6中已經(jīng)有了類似于Java等語言的Map類型,鍵可以是任意類型的值.請參考我翻譯的MDN文檔Map
3.另一個技巧
郵件里還提到了另外一個技巧:
> 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方法的第一個參數(shù),它作為了Number函數(shù)中的this值.這個值沒有什么意義,相當(dāng)于被忽略.我更喜歡下面這個能讓人一眼就看明白的寫法:
Array.apply(null, Array(3)).map(function (x,i) { return i })
譯者注:
Array.apply(null, Array(3)).map(Function.prototype.call.bind(Number))
//等同于Array.apply(null, Array(3)).map(Function.prototype.call,Number)
雖然使用自定義的函數(shù)更清晰,但自定義的函數(shù)肯定沒有原生方法快.舉個例子:
var a = ["aaa ", " bbb", " ccc "]
a.map(function(x) { return x.trim(); }); // ['aaa', 'bbb', 'ccc']
a.map(Function.prototype.call, String.prototype.trim); // ['aaa', 'bbb', 'ccc']
上面使用map方法來trim掉每個數(shù)組元素的空格,使用原生的方法雖然難理解.但效率高.看不懂的可以查看下我翻譯的MDN文檔Array.prototype.map()
4.實際用途?
> _.range(3)
[ 0, 1, 2 ]
和map配合使用,可以使用某個指定的值填充整個數(shù)組.
> _.range(3).map(function () { return "a" })
[ 'a', 'a', 'a' ]
譯者注:其他語言里,都有方便的生成遞增數(shù)字列表的辦法,比如perl和ruby里使用1..100,python里使用range(100),還有一個常見的需求就是生成一個重復(fù)某個字段的字符串,在ruby和python里,可以用"a"*100,在perl里用"a"x100,在JavaScript中,可以用Array(100).join("a")
5.相關(guān)文章
創(chuàng)建一個指定長度的稀疏數(shù)組很簡單:
復(fù)制代碼 代碼如下:
> var a = new Array(3);
> a
[ , , ]
> a.length
3
> a[0]
undefined
當(dāng)你遍歷它時,你會發(fā)現(xiàn),它并沒有元素.JavaScript會跳過這些縫隙.
復(fù)制代碼 代碼如下:
> a.forEach(function (x, i) { console.log(i+". "+x) });
> a.map(function (x, i) { return i })
[ , , ]
譯者注:還有一些其他情況會生成稀疏數(shù)組,比如
復(fù)制代碼 代碼如下:
>var arr = [];
>arr[0] = 0;
>arr[100] = 100>a.forEach(function (x, i) { console.log(i+". "+x) });0. 0100. 100
2.密集數(shù)組
Brandon Benvie 最近在es-discuss郵件討論組中提到了一個創(chuàng)建密集數(shù)組的技巧:
復(fù)制代碼 代碼如下:
> var a = Array.apply(null, Array(3));
> a
[ undefined, undefined, undefined ]
上面的語句其實等同于:
Array(undefined, undefined, undefined)
但從表面上看,貌似這個數(shù)組和之前的稀疏數(shù)組并沒有太多的區(qū)別:
復(fù)制代碼 代碼如下:
> a.length
3
> a[0]
undefined
可是,你現(xiàn)在可以遍歷到這些數(shù)組元素了,還可以為每個元素重新賦值:
復(fù)制代碼 代碼如下:
> a.forEach(function (x, i) { console.log(i+". "+x) });
0. undefined
1. undefined
2. undefined
> a.map(function (x, i) { return i })
[ 0, 1, 2 ]
譯者注:實際上,JavaScript并沒有常規(guī)的數(shù)組,所有的數(shù)組其實就是個對象,只不過會自動管理一些"數(shù)字"屬性和length屬性罷了.說的更直接一點,JavaScript中的數(shù)組根本沒有索引,因為索引應(yīng)該是數(shù)字,而JavaScript中數(shù)組的索引其實是字符串.arr[1]其實就是arr["1"],給arr["1000"] = 1,arr.length也會自動變?yōu)?001.這些表現(xiàn)的根本原因就是,JavaScript中的對象就是字符串到任意值的鍵值對.注意鍵只能是字符串.這和AWK類似.不信可以試試awk 'BEGIN{a[1]=1;print(a["1"])}'.也許這是因為Brendan Eich在發(fā)明JavaScript時參考了不少awk的設(shè)計的原因.不過目前,ES6中已經(jīng)有了類似于Java等語言的Map類型,鍵可以是任意類型的值.請參考我翻譯的MDN文檔Map
3.另一個技巧
郵件里還提到了另外一個技巧:
復(fù)制代碼 代碼如下:
> Array.apply(null, Array(3)).map(Function.prototype.call.bind(Number))
[ 0, 1, 2 ]
這大概等同于下面的寫法
復(fù)制代碼 代碼如下:
Array.apply(null, Array(3)).map(
function (x,i,...) { return Number.call(x,i,...) })
注意,x是call方法的第一個參數(shù),它作為了Number函數(shù)中的this值.這個值沒有什么意義,相當(dāng)于被忽略.我更喜歡下面這個能讓人一眼就看明白的寫法:
復(fù)制代碼 代碼如下:
Array.apply(null, Array(3)).map(function (x,i) { return i })
譯者注:
復(fù)制代碼 代碼如下:
Array.apply(null, Array(3)).map(Function.prototype.call.bind(Number))
//等同于Array.apply(null, Array(3)).map(Function.prototype.call,Number)
雖然使用自定義的函數(shù)更清晰,但自定義的函數(shù)肯定沒有原生方法快.舉個例子:
復(fù)制代碼 代碼如下:
var a = ["aaa ", " bbb", " ccc "]
a.map(function(x) { return x.trim(); }); // ['aaa', 'bbb', 'ccc']
a.map(Function.prototype.call, String.prototype.trim); // ['aaa', 'bbb', 'ccc']
上面使用map方法來trim掉每個數(shù)組元素的空格,使用原生的方法雖然難理解.但效率高.看不懂的可以查看下我翻譯的MDN文檔Array.prototype.map()
4.實際用途?
在實際生產(chǎn)中,使用上面講的創(chuàng)建密集數(shù)組的方法會讓別人無法讀懂你的代碼.所以封裝成一個工具函數(shù)會更好,比如 _.range:
復(fù)制代碼 代碼如下:
> _.range(3)
[ 0, 1, 2 ]
和map配合使用,可以使用某個指定的值填充整個數(shù)組.
復(fù)制代碼 代碼如下:
> _.range(3).map(function () { return "a" })
[ 'a', 'a', 'a' ]
譯者注:其他語言里,都有方便的生成遞增數(shù)字列表的辦法,比如perl和ruby里使用1..100,python里使用range(100),還有一個常見的需求就是生成一個重復(fù)某個字段的字符串,在ruby和python里,可以用"a"*100,在perl里用"a"x100,在JavaScript中,可以用Array(100).join("a")
5.相關(guān)文章
相關(guān)文章
javascript 如何生成不重復(fù)的隨機數(shù)
javascript 如何生成不重復(fù)的隨機數(shù)...2007-11-11TypeScript中的交叉類型和聯(lián)合類型示例講解
交叉類型簡單來說就是通過&符號將多個類型進(jìn)行合并成一個類型,然后用type來聲明新生成的類型,聯(lián)合類型和交叉類型比較相似,聯(lián)合類型通過|符號連接多個類型從而生成新的類型,本文就這兩個類型結(jié)合示例代碼詳細(xì)講解,感興趣的朋友跟隨小編一起學(xué)習(xí)吧2022-12-12