淺談Javascript數(shù)組的使用
上一篇說了數(shù)組的索引,這一篇說下數(shù)組的使用。
數(shù)組的大小
js的數(shù)組可以動態(tài)調(diào)整大小,更確切點說,它沒有數(shù)組越界的概念,a[a.length]沒什么問題。比如聲明一個數(shù)組a = [1, 3, 5],現(xiàn)在的數(shù)組大小是3,最后一個元素的索引是2,但是你依然可以使用a[3],訪問a[3]返回的是undefined,給a[3]賦值:a[3] = 7,是給數(shù)組a添加了一個元素,現(xiàn)在數(shù)組a的長度是4了。你可以試試把下面這段代碼放到瀏覽器里運行下:
var a = []; for(int i = 0; i <= a.length; i++) { a[a.length] = i; }
在我的電腦上,火狐會立馬崩掉,chrome這一個標(biāo)簽cpu占用99%(使用chrome的任務(wù)管理器查看的)。
js的length的值會隨著數(shù)組元素的改變而改變,當(dāng)然你也可以手動設(shè)置數(shù)組的 length 屬性,設(shè)置更大的length不會給數(shù)組分配更多的空間,但是設(shè)置更小的length則會導(dǎo)致所有下標(biāo)大于等于新length的屬性被刪除。
另外有一點就是,數(shù)組的length值是怎么來的,有的資料說是最大一個數(shù)字索引值加一,應(yīng)該是對的,不過如果把空槽也算數(shù)的話,length值就是數(shù)組的元素數(shù)。上張圖解釋下:
從圖里可以看到,有個數(shù)組a,a[0]和a[10]都已賦值,這時候a的length是11,中間有9個empty slot(姑且就翻譯為空槽好了)。那這九個空槽算不算數(shù)呢,我覺得應(yīng)該算,這樣就能合理的解釋length值了。那這些空槽的值是什么呢?undefined!所以呢,如果在chrome里,使用foreach遍歷(forin),那么這些空槽正好都能跳過,而使用for遍歷,則會打印出undefined。至于在firefox里,表現(xiàn)不太一樣,自己試吧。
數(shù)組的遍歷
昨天在看微博上轉(zhuǎn)的js教程的時候,里面說在遍歷數(shù)組的時候,判斷語句i<a.length會造成每循環(huán)一次都要計算一次長度,從而對性能有一點點影響。這一點我表示疑問,我不確定到底是不是這樣,而且不同的瀏覽器對這種情況可能還有不同的優(yōu)化,我在網(wǎng)上搜了下,找到了幾個網(wǎng)頁說了要緩存數(shù)組大小,但是都是抄的,沒主見,也沒說明原理,所以我表示很懷疑,而且我在chrome測試了下,性能上沒什么明顯差異。關(guān)鍵是我覺得,length是個數(shù)組的屬性,每次調(diào)用a.length的時候,只是訪問這個屬性而已,屬性都是用hash的方式存儲的,所以訪問的時間復(fù)雜度是O(1)。這是我的看法,如果不對,請告訴我。
關(guān)于數(shù)組的foreach遍歷,js的方式相對于java/c#等語言是很奇怪的:
for(var name in ['huey', 'dewey', 'louie']) { console.log(name); } /* 打印結(jié)果: 0 1 2 */
可以看到,打印的結(jié)果不是數(shù)組的元素,而是數(shù)字索引值(感覺這好像也可以說明,js的數(shù)組也是用hash的方式存儲的),不管怎樣,這一點要注意。(至于為什么這樣,我覺得數(shù)組元素都是數(shù)組的屬性,這個遍歷是遍歷的length值,從0到length。而不是逐個輸出數(shù)組的元素,因為元素是屬性,數(shù)組又不只數(shù)字索引這一種屬性,那么為什么這樣遍歷的時候只輸出它們呢,而不是length,push,join等方法?公平起見,只好輸出數(shù)組的數(shù)字索引了。當(dāng)然,這只是我自己的看法,具體怎么樣我沒研究。)
數(shù)組的一些方法
數(shù)組有push和pop方法,這樣數(shù)組就像堆棧一樣了。對數(shù)組使用delete,可以將數(shù)組中某個元素移除,但是那樣會在數(shù)組中留下一個空洞(也就是說delete也可以刪除數(shù)組中的元素,但是只是刪除該位置的值,不改變數(shù)組大小,原位置類型是undefined),這是因為排在被刪除元素之后的元素保留著它們最初的屬性,所以應(yīng)該使用splice對進行過delete操作的數(shù)組進行瘦身,它會將被刪除的屬性移除,但這樣效率并不是很高。數(shù)組中還有map、reduce、filter等方法,這里就不多說了(跟python中的list挺像的)。
補充
最后補充一點,我前面說過,js中的數(shù)組就是對象(廢話,本來就是對象),那么是不是說,數(shù)組和對象可以互相互替換著用呢?答案是可以的。不過為了明確,還是分開用比較好,下面說下什么時候該用數(shù)組,什么時候該用對象(參考《javascript語言精粹》):
當(dāng)屬性名是小而連續(xù)的整數(shù)時,應(yīng)該使用數(shù)組,否則,使用對象。
另外由于js中對數(shù)組和對象使用 typeof 的結(jié)果都是 Object,因此判斷一個對象是否為數(shù)組的方法:
var is_array = function(value) { return Object.prototype.toString.apply(value) === '[object Array]'; };
番外
覺得閉包被神化了,可能語言層面上的實現(xiàn)有技術(shù),但是在應(yīng)用層面我覺得就應(yīng)該那樣啊,使用的時候都感覺不到那是在用閉包。但是這個閉包卻幾乎成了面試前端必問的概念了。
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- javascript數(shù)組去重的六種方法匯總
- javascript實現(xiàn)數(shù)組中的內(nèi)容隨機輸出
- JavaScript數(shù)組對象賦值用法實例
- JavaScript數(shù)組各種常見用法實例分析
- javascript數(shù)組排序匯總
- javascript中數(shù)組方法匯總
- JavaScript通過select動態(tài)更換圖片的方法
- javascript實現(xiàn)無限級select聯(lián)動菜單
- javascript模擬select,jselect的方法實現(xiàn)
- JavaScript實現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法
相關(guān)文章
學(xué)習(xí)JavaScript圖片預(yù)加載模塊
這篇文章主要介紹了js實現(xiàn)圖片預(yù)加載的方法,內(nèi)容很詳細,帶領(lǐng)大家全面認識js圖片預(yù)加載模塊,感興趣的小伙伴們可以參考一下2016-11-11JavaScript庫之vanilla-tilt使用教程(一個平滑的3D傾斜庫)
vanilla-tilt.js是Javascript中一個平滑的3D傾斜庫,可以讓網(wǎng)頁的一些控件變得動態(tài)起來,下面這篇文章主要給大家介紹了關(guān)于JavaScript庫之vanilla-tilt使用的相關(guān)資料,需要的朋友可以參考下2023-02-02js獲取網(wǎng)頁可見區(qū)域、正文以及屏幕分辨率的高度
這篇文章主要介紹了js獲取網(wǎng)頁的各種高度,例如可見區(qū)域、正文以及屏幕分辨率的高度,需要的朋友可以參考下2014-05-05javascript中BOM基礎(chǔ)知識總結(jié)
本文主要對javascript中BOM基礎(chǔ)知識進行總結(jié)。具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02