JavaScript 數組

JavaScript 數組用于在單一變量中存儲多個值。

實例

var cars = ["Saab", "Volvo", "BMW"];

親自試一試

什么是數組？

數組是一種特殊的變量，它能夠一次存放一個以上的值。

如果您有一個項目清單（例如，汽車品牌列表），在單個變量中存儲汽車品牌應該是這樣的：

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

不過，假如您希望遍歷所有汽車并找到一個特定的值？假如不是三個汽車品牌而是三百個呢？

解決方法就是數組！

數組可以用一個單一的名稱存放很多值，并且還可以通過引用索引號來訪問這些值。

創建數組

使用數組文本是創建 JavaScript 數組最簡單的方法。

語法：

var array-name = [item1, item2, ...];

實例

var cars = ["Saab", "Volvo", "BMW"];

親自試一試

空格和折行并不重要。聲明可橫跨多行：

實例

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

親自試一試

請不要最后一個元素之后寫逗號（比如 "BMW",）。

可能存在跨瀏覽器兼容性問題。

使用 JavaScript 關鍵詞 new

下面的例子也會創建數組，并為其賦值：

實例

var cars = new Array("Saab", "Volvo", "BMW");

親自試一試

以上兩個例子效果完全一樣。無需使用 new Array()。

出于簡潔、可讀性和執行速度的考慮，請使用第一種方法（數組文本方法）。

訪問數組元素

我們通過引用索引號（下標號）來引用某個數組元素。

這條語句訪問 cars 中的首個元素的值：

var name = cars[0];

這條語句修改 cars 中的首個元素：

cars[0] = "Opel";

實例

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

親自試一試

[0] 是數組中的第一個元素。[1] 是第二個。數組索引從 0 開始。

改變數組元素

這條語句修改了 cars 中第一個元素的值：

cars[0] = "Opel";

實例

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

親自試一試

訪問完整數組

通過 JavaScript，可通過引用數組名來訪問完整數組：

實例

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

親自試一試

數組是對象

數組是一種特殊類型的對象。在 JavaScript 中對數組使用 typeof 運算符會返回 "object"。

但是，JavaScript 數組最好以數組來描述。

數組使用數字來訪問其“元素”。在本例中，person[0] 返回 Bill：

數組：

var person = ["Bill", "Gates", 62];

親自試一試

對象使用名稱來訪問其“成員”。在本例中，person.firstName 返回 Bill：

對象：

var person = {firstName:"Bill", lastName:"Gates", age:19};

親自試一試

數組元素可以是對象

JavaScript 變量可以是對象。數組是特殊類型的對象。

正因如此，您可以在相同數組中存放不同類型的變量。

您可以在數組保存對象。您可以在數組中保存函數。你甚至可以在數組中保存數組：

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

數組屬性和方法

JavaScript 數組的真實力量隱藏在數組的屬性和方法中：

實例

var x = cars.length;   // length 屬性返回元素的數量
var y = cars.sort();   // sort() 方法對數組進行排序

我們將在下一章學習數組方法。

length 屬性

length 屬性返回數組的長度（數組元素的數目）。

實例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits 的長度是 4

親自試一試

length 屬性始終大于最高數組索引（下標）。

訪問第一個數組元素

實例

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

親自試一試

訪問最后一個數組元素

實例

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

親自試一試

遍歷數組元素

遍歷數組的最安全方法是使用 "for" 循環：

實例

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

親自試一試

您也可以使用 Array.foreach() 函數：

實例

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

親自試一試

添加數組元素

向數組添加新元素的最佳方法是使用 push() 方法：

實例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一個新元素 (Lemon)

親自試一試

也可以使用 length 屬性向數組添加新元素：

實例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一個新元素 (Lemon)

親自試一試

警告！

添加最高索引的元素可在數組中創建未定義的“洞”：

實例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // 向 fruits 添加一個新元素 (Lemon)

親自試一試

關聯數組

很多編程元素支持命名索引的數組。

具有命名索引的數組被稱為關聯數組（或散列）。

JavaScript 不支持命名索引的數組。

在 JavaScript 中，數組只能使用數字索引。

實例

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length 返回 3
var y = person[0];              // person[0] 返回 "Bill"

親自試一試

警告！

假如您使用命名索引，JavaScript 會把數組重定義為標準對象。

之后，所有數組的方法和屬性將產生非正確結果。

實例：

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length 將返回 0
var y = person[0];              // person[0] 將返回 undefined

親自試一試

數組和對象的區別

在 JavaScript 中，數組使用數字索引。

在 JavaScript 中，對象使用命名索引。

數組是特殊類型的對象，具有數字索引。

何時使用數組，何時使用對象？

  • JavaScript 不支持關聯數組
  • 如果希望元素名為字符串（文本）則應該使用對象。
  • 如果希望元素名為數字則應該使用數組。

避免 new Array()

沒有必要使用 JavaScript 的內建數組構造器 new Array()。

請使用 [] 取而代之！

下面兩條不同的語句創建了名為 points 的新的空數組：

var points = new Array();         // 差
var points = [];                  // 優

下面兩條不同的語句創建包含六個數字的新數組：

var points = new Array(40, 100, 1, 5, 25, 10); // 差
var points = [40, 100, 1, 5, 25, 10];          // 優

親自試一試

new 關鍵詞只會使代碼復雜化。它還會產生某些不可預期的結果：

var points = new Array(40, 100);  // 創建包含兩個元素的數組（40 和 100）

假如刪除其中一個元素會怎么樣？

var points = new Array(40);       // 創建包含 40 個未定義元素的數組！！！

親自試一試

如何識別數組

常見的問題是：我如何知曉某個變量是否是數組？

問題在于 JavaScript 運算符 typeof 返回 "object"：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // 返回 object

親自試一試

typeof 運算符返回 "object"，因為 JavaScript 數組屬于對象。

解決方案 1：

為了解決這個問題，ECMAScript 5 定義了新方法 Array.isArray()：

Array.isArray(fruits);     // 返回 true

親自試一試

此方案的問題在于 ECMAScript 5 不支持老的瀏覽器。

解決方案 2：

創建您自己的 isArray() 函數以解決此問題：

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

親自試一試

假如參數為數組，則上面的函數始終返回 true。

或者更準確的解釋是：假如對象原型包含單詞 "Array" 則返回 true。

解決方案 3：

假如對象由給定的構造器創建，則 instanceof 運算符返回 true：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // 返回 true

親自試一試