關于JavaScript數(shù)組你所不知道的3件事
在編程語言當中,數(shù)組(Array)是一個非常常用的功能;它是一種特殊的變量,可以用來同時儲存多個數(shù)值。然而,在JavaScript方面,數(shù)組的功能還有很多其他值得探索的地方。
在這篇文章中,我們將會討論JavaScript數(shù)組的三個并不那么常見的功能。
1. 給數(shù)組添加自定義屬性
在網(wǎng)上搜尋有關JavaScript數(shù)組的定義時,你會發(fā)現(xiàn)幾乎所有人對于數(shù)組的定義都一樣:一種對象。
事實上,我們用JavaScript處理的所有東西,都可以視為是一種對象。JavaScript中有兩種數(shù)據(jù)類型,基本類型數(shù)對象類型,但是基本類型基本都是包括在對象類型之中的。
數(shù)組、函數(shù)、Date在JavaScript中都是預定義的對象,它們內(nèi)部都包含了方法、屬性和各自的標準化句法。
JavaScript數(shù)組有以下三種不同的屬性:
1) 數(shù)組的索引也是其屬性
2) 內(nèi)置屬性
3) 你可以自己添加自定義屬性
前兩種屬性是大家比較熟知的,你可能每天都在使用,但是我還是想在這里簡單的多說兩句,然后再來談談如何給數(shù)組添加自定義屬性。
將索引作為屬性
JavaScript數(shù)組可以使用方括號句法,例如var ary = [“orange”,”apple”,”lychee”];。
數(shù)組元素的索引基本上也是一種屬性,而其屬性的名稱永遠都是非負整數(shù)。
數(shù)組的索引元素對類似一個對象的關鍵值對。索引是數(shù)組對象的獨特特性,與其他內(nèi)置屬性不同,它們可以單獨通過方括號進行配置,例如 ary[3] = “peach”;。
內(nèi)置屬性
數(shù)組擁有內(nèi)置屬性,例如array.length。這個長度屬性包含了一個整數(shù)值,用來表示數(shù)組的長度。
一般情況下,內(nèi)置屬性經(jīng)??梢栽跀?shù)組等預先定義的JavaScript對象中找到。內(nèi)置屬性與內(nèi)置方法聯(lián)合在一起,它們可以對普通對象進行自定義,讓對象滿足不同的需求。
在訪問內(nèi)置屬性的時候,你可以使用兩種句法:object.key或是object[“key”]。也就是說,在獲取數(shù)組長度的時候,你可以寫成ary[“l(fā)ength”]。
為數(shù)組對象創(chuàng)建自定義屬性
現(xiàn)在我們來談一談如何為數(shù)組添加自定義屬性。數(shù)組是一種預定義對象,它在不同的索引中儲存了不同的種類的值。
通 常情況下,我們沒有給數(shù)組添加自定義屬性的需要;也是出于這個原因,我們在剛剛學習JavaScript的時候,沒有人告訴我們可以給數(shù)組添加屬性。事實 上,如果你想要向對待一般對象那樣,給數(shù)組添加關鍵值對,你也可以使用一般的對象來達到目的。但是,這并不是說完全沒有特殊情況,在某些情況下,你可以利 用數(shù)組也是一種對象的事實,給它添加一個或多個自定義屬性。
例如,你可以給數(shù)組添加一個可以識別元素“類型(kind)”或是“類(class)”的自定義屬性。具體請參見下方實例:
var ary = ["orange","apple","lychee"]; ary.itemClass = "fruits"; console.log(ary + " are " + ary.itemClass);
請注意,你給數(shù)組所添加的自定義屬性都是可數(shù)的,也就是說,它可以被for……in等循環(huán)所揀選。
2. 在數(shù)組元素中進行循環(huán)
你可能會說:“這個我早就知道了?!睕]錯,你已經(jīng)知道如何對數(shù)組元素進行索引了。但是“在數(shù)組元素中進行循環(huán)”這樣的說法你可能會覺得有些抽象,因為我們真正循環(huán)的,是數(shù)組的索引。
由于數(shù)組索引都是又非負整數(shù)所構成的,因此通常情況下,我們都會從0開始,直到數(shù)組的全部長度,來對整數(shù)值進行迭代,然后使用那個迭代后的值來根據(jù)特定的索引來獲取數(shù)組元素。
然而,自從ECMAScript6出現(xiàn)之后,我們可以不再管索引,直接在數(shù)組值中進行循環(huán),而且這個操作可以使用for……of循環(huán)來完成。
在數(shù)組中,for……of循環(huán)可以根據(jù)索引的順序對數(shù)組元素進行循環(huán),換句話說,它可以掌管索引的迭代,根據(jù)給予的索引獲取一個已經(jīng)存在的數(shù)組值。如果你只是想要在所有數(shù)組元素中進行循環(huán),并且使用它們,這個循環(huán)非常實用。
var ary = ["orange","apple","lychee"];
for (let item of ary){
console.log(item);
}
For comparison, with the regular for loop, we get the indices instead of the values as output.
var ary = ["orange","apple","lychee"];
for (var item = 0; item < ary.length; item++){
console.log(item);
}
3. 元素的數(shù)量不等同于其長度
一般情況下,當我們在談到數(shù)組長度的時候,我們會認為其長度要么是數(shù)組值的數(shù)量,要么是我們手動給數(shù)組設定的長度。但是事實上,數(shù)組的長度取決于其內(nèi)部最大的已經(jīng)存在的索引。
長度是一個非常靈活的屬性。無論你是否曾實現(xiàn)調(diào)整了數(shù)組的長度,只要你不斷的給數(shù)組添加新的值,它的長度也會隨之增長。
var ary = []; ary.length = 3; console.log(ary.length); ary[5] = "abcd"; console.log(ary.length);
在上面的例子中,你可以看到我給數(shù)組的索引5只指定了一個值,之后長度變成了6?,F(xiàn)在,如果你覺得給index 5添加一個值,數(shù)組就會自動創(chuàng)建索引0-4,那么你的推測就出現(xiàn)了錯誤。數(shù)組中并沒有應經(jīng)存在的索引0-4。你可以使用in operator來查看。
var ary = []; ary.length = 3; console.log(ary.length); ary[5] = "abcd"; console.log(ary.length); console.log(0 in ary);
上面的ary數(shù)組被我們成為稀疏數(shù)組(sparse array),這個數(shù)組的索引不會持續(xù)的被創(chuàng)建,而且索引之間有空氣。sparse數(shù)組的對立面為密集數(shù)組(dense array)。密集數(shù)組的索引會被持續(xù)的創(chuàng)建,其元素的數(shù)量等于其長度。
數(shù)組的長度屬性也可以用來縮短數(shù)字,確保數(shù)組中索引的最大數(shù)量永遠小于數(shù)組本身,因為在默認情況下,長度的數(shù)值永遠會大于索引數(shù)量的最高值。
在下面的例子中,你可以看到,我利用減少ary數(shù)組長度的方式,社區(qū)了索引5中的元素。
var ary = []; ary.length = 3; console.log(ary.length); ary[5] = "abcd"; console.log(ary.length); ary.length = 2; console.log(ary.length); console.log(ary[5]);
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- JS array 數(shù)組詳解
- js split 的用法和定義 js split分割字符串成數(shù)組的實例代碼
- js數(shù)組循環(huán)遍歷數(shù)組內(nèi)所有元素的方法
- js二維數(shù)組定義和初始化的三種方法總結
- js數(shù)組與字符串的相互轉換方法
- Js數(shù)組的操作push,pop,shift,unshift等方法詳細介紹
- JS解析json數(shù)據(jù)并將json字符串轉化為數(shù)組的實現(xiàn)方法
- js中通過split函數(shù)分割字符串成數(shù)組小例子
- 體驗js中splice()的強大(插入、刪除或替換數(shù)組的元素)
- JS數(shù)組的遍歷方式for循環(huán)與for...in
相關文章
微信小程序調(diào)用wx.getImageInfo遇到的坑解決
這篇文章主要介紹了微信小程序調(diào)用wx.getImageInfo遇到的坑解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
BootStrap下的彈出框加載select2框架失敗的解決方法
本文通過簡單的代碼給大家介紹了BootStrap下的彈出框加載select2框架失敗的解決方法,需要的朋友參考下吧2017-08-08
微信小程序如何調(diào)用新聞接口實現(xiàn)列表循環(huán)
這篇文章主要介紹了微信小程序如何調(diào)用新聞接口實現(xiàn)列表循環(huán),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
PhantomJS快速入門教程(服務器端的 JavaScript API 的 WebKit)
Phantom JS是一個服務器端的 JavaScript API 的 WebKit。其支持各種Web標準: DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG2015-08-08

