Array 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];

亲自试一试

Akses array penuh

Dengan JavaScript, anda boleh mengakses array penuh melalui nama array:

实例

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

亲自试一试

Array adalah objek

Array adalah jenis objek khusus. Dalam JavaScript, digunakan array untuk typeof Operator akan mengembalikan "object".

Namun, array JavaScript paling baik untuk digambarkan dengan array.

Penggunaan array數字untuk mengakses 'elemen'. Dalam contoh ini,person[0] Kembalikan Bill:

Array:

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

亲自试一试

Objek menggunakanNamauntuk mengakses 'anggota'. Dalam contoh ini,person.firstName Kembalikan Bill:

Objek:

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

亲自试一试

Elemen array boleh menjadi objek

Variable JavaScript boleh menjadi objek. Array adalah jenis objek khusus.

Disebabkan itu, anda boleh menempatkan jenis variable yang berbeza dalam array yang sama.

Anda boleh menyimpan objek dalam array. Anda boleh menyimpan fungsi dalam array. Anda bahkan boleh menyimpan array dalam array:

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

Properti dan metode array

Kekuatan sebenar JavaScript array tersembunyi dalam properti dan metode array:

实例

var x = cars.length;   // Properti length mengembalikan jumlah elemen
var y = cars.sort();   // Metode sort() mengurutkan array

Kami akan belajar metode array di bab berikutnya.

Properti length

length Properti ini mengembalikan panjang array (jumlah elemen array).

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // Panjang fruits adalah 4

亲自试一试

length Properti selalu lebih besar daripada indeks terbesar array (indeks bawah).

Akses elemen array pertama

实例

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

亲自试一试

Akses elemen array terakhir

实例

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

亲自试一试

Melintasi elemen array

Pembolehkan untuk melintasi array paling selamat adalah untuk menggunakan "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

亲自试一试