關於JavaScript數組你所不知道的3件事_javascript技巧

在程式設計語言當中，數組（Array）是一個非常常用的功能；它是一種特殊的變數，可以用來同時儲存多個數值。然而，在JavaScript方面，數組的功能還有很多其他值得探索的地方。

在這篇文章中，我們將會討論JavaScript數組的三個並不那麼常見的功能。

1. 給數組添加自訂屬性

在網上搜尋有關JavaScript數組的定義時，你會發現幾乎所有人對於數組的定義都一樣：一種對象。

事實上，我們用JavaScript處理的所有東西，都可以視為是一種對象。JavaScript中有兩種資料類型，基本類型數物件類型，但是基本類型基本都是包括在物件類型之中的。

數組、函數、Date在JavaScript中都是預定義的對象，它們內部都包含了方法、屬性和各自的標準化句法。

JavaScript數組有以下三種不同的屬性：

1） 數組的索引也是其屬性

2） 內建屬性

3） 你可以自己添加自訂屬性

前兩種屬性是大家比較熟知的，你可能每天都在使用，但是我還是想在這裡簡單的多說兩句，然後再來談談如何給數組添加自訂屬性。

將索引作為屬性

JavaScript數組可以使用方括弧句法，例如var ary = [“orange”,”apple”,”lychee”];。

數組元素的索引基本上也是一種屬性，而其屬性的名稱永遠都是非負整數。

數組的索引元素對類似一個對象的關索引值對。索引是數組對象的獨特特性，與其他內建屬性不同，它們可以單獨通過方括弧進行配置，例如 ary[3] = “peach”;。

內建屬性

數組擁有內建屬性，例如array.length。這個長度屬性包含了一個整數值，用來表示數組的長度。

一般情況下，內建屬性經常可以在數組等預先定義的JavaScript對象中找到。內建屬性與內建方法聯合在一起，它們可以對普通對象進行自訂，讓對象滿足不同的需求。

在訪問內建屬性的時候，你可以使用兩種句法：object.key或是object[“key”]。也就是說，在擷取數組長度的時候，你可以寫成ary[“length”]。

為數組對象建立自訂屬性

現在我們來談一談如何為數組添加自訂屬性。數組是一種預定義對象，它在不同的索引中儲存了不同的種類的值。

通 常情況下，我們沒有給數組添加自訂屬性的需要；也是出於這個原因，我們在剛剛學習JavaScript的時候，沒有人告訴我們可以給數組添加屬性。事實 上，如果你想要向對待一般對象那樣，給數組添加關索引值對，你也可以使用一般的對象來達到目的。但是，這並不是說完全沒有特殊情況，在某些情況下，你可以利 用數組也是一種對象的事實，給它添加一個或多個自訂屬性。

例如，你可以給數組添加一個可以識別元素“類型（kind）”或是“類（class）”的自訂屬性。具體請參見下方執行個體：

var ary = ["orange","apple","lychee"];ary.itemClass = "fruits";console.log(ary + " are " + ary.itemClass);

請注意，你給數組所添加的自訂屬性都是可數的，也就是說，它可以被for……in等迴圈所揀選。

2. 在數組元素中進行迴圈

你可能會說：“這個我早就知道了。”沒錯，你已經知道如何對數組元素進行索引了。但是“在數組元素中進行迴圈”這樣的說法你可能會覺得有些抽象，因為我們真正迴圈的，是數組的索引。

由於數組索引都是又非負整數所構成的，因此通常情況下，我們都會從0開始，直到數組的全部長度，來對整數值進行迭代，然後使用那個迭代後的值來根據特定的索引來擷取數組元素。

然而，自從ECMAScript6出現之後，我們可以不再管索引，直接在數組值中進行迴圈，而且這個操作可以使用for……of迴圈來完成。

在數組中，for……of迴圈可以根據索引的順序對數組元素進行迴圈，換句話說，它可以掌管索引的迭代，根據給予的索引擷取一個已經存在的數組值。如果你只是想要在所有數組元素中進行迴圈，並且使用它們，這個迴圈非常實用。

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. 元素的數量不等同於其長度

一般情況下，當我們在談到數組長度的時候，我們會認為其長度要麼是數組值的數量，要麼是我們手動給數組設定的長度。但是事實上，數組的長度取決於其內部最大的已經存在的索引。

長度是一個非常靈活的屬性。無論你是否曾實現調整了數組的長度，只要你不斷的給數組添加新的值，它的長度也會隨之增長。

var ary = [];ary.length = 3;console.log(ary.length);ary[5] = "abcd";console.log(ary.length);

在上面的例子中，你可以看到我給數組的索引5隻指定了一個值，之後長度變成了6。現在，如果你覺得給index 5添加一個值，數組就會自動建立索引0-4，那麼你的推測就出現了錯誤。數組中並沒有應經存在的索引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數組被我們成為稀疏數組（sparse array），這個數組的索引不會持續的被建立，而且索引之間有空氣。sparse數組的對立面為密集數組（dense array）。密集數組的索引會被持續的建立，其元素的數量等於其長度。

數組的長度屬性也可以用來縮短數字，確保數組中索引的最大數量永遠小於數組本身，因為在預設情況下，長度的數值永遠會大於索引數量的最高值。

在下面的例子中，你可以看到，我利用減少ary數組長度的方式，社區了索引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]);

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。