關於JavaScript數組，你所不知道的3件事-js教程-PHP中文網

在程式語言當中，數組（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]);

登入後複製

以上就是关于JavaScript数组，你所不知道的3件事的内容，更多相关内容请关注PHP中文网（www.php.cn）！