最新的Web開發教程
 

JavaScript數組


JavaScript數組用於多個值存儲在一個變量。


顯示陣列

在本教程中,我們將使用腳本來顯示一個數組裡面<p>與元素id="demo"

<p id="demo"></p>

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

第一行(腳本)創建了一個汽車陣列命名。

第二行“發現”與元素id="demo""displays"在陣"innerHTML"吧;


試一試

創建一個數組,並賦值給它:

var cars = ["Saab", "Volvo", "BMW"];
試一試»

空格和換行並不重要。 一個聲明可以跨越多行:

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];
試一試»

不要把一個逗號的最後一個元素(如後"BMW" )。
效果是跨瀏覽器不一致。


什麼是數組?

陣列是一個特殊的變量,其可以在一個時間持有多個值。

如果你有一個項目列表(車名的列表,例如),存儲車在單變量看起來是這樣的:

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

但是,如果您通過汽車要循環什麼,並找到一個特定的一個? 如果你有沒有3輛汽車,但300?

該解決方案是一個數組!

數組可以在一個單一的名稱包含多個值,你可以通過參考索引號訪問值。


創建陣列

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

句法:

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

例:

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

使用JavaScript的新關鍵字

下面的例子還創建一個數組,並賦值給它:

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

上面兩個例子做同樣的。 沒有必要使用new Array()
為了簡單起見,可讀性和執行速度,使用第一個(在陣列字面方法)。


訪問數組的元素

你通過參照索引號指一個數組元素。

這個語句訪問在汽車的第一個元素的值:

var name = cars[0];

這個語句修改了汽車的第一個元素:

cars[0] = "Opel";

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


您可以有不同的物體在同一陣列

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

正因為如此,可以在同一個陣列不同類型的變量。

您可以在一個數組對象。 您可以在陣列功能。 您可以在一個數組的數組:

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

數組是對象

陣列是一種特殊類型的對象。 該typeof在JavaScript中運算符返回"object"的陣列。

但是,JavaScript數組是最好的形容為數組。

陣列使用numbers來訪問它"elements" 。 在這個例子中, person[0]返回John

陣列:

var person = ["John", "Doe", 46];
試一試»

對象使用的名稱來訪問它的“成員”。 在這個例子中,person.firstName返回John

目的:

var person = {firstName:"John", lastName:"Doe", age:46};
試一試»

陣列屬性和方法

JavaScript數組的真正實力是內置陣列的屬性和方法:

例子

var x = cars.length;         // The length property returns the number of elements in cars
var y = cars.sort();         // The sort() method sort cars in alphabetical order

Array方法覆蓋在下一章。


length屬性

length的陣列的屬性返回一個數組(數組元素的數目)的長度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // the length of fruits is 4
試一試»

長度屬性總是比最高數組索引多一個。


添加數組元素

一個新的元素添加到陣列的最簡單方法是使用push方法:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // adds a new element (Lemon) to fruits
試一試»

新的元素也可以加入到使用數組length屬性:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits
試一試»

警告 !

添加高指標可以創建不確定因素"holes"中的數組:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon";                // adds a new element (Lemon) to fruits
試一試»

循環數組元素

通過數組循環最好的方法,是用"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>";
}
試一試»

關聯數組

許多編程語言都支持一個名為索引的數組。

名為索引數組稱為關聯數組(或哈希)。

JavaScript 支持數組名為索引。

在JavaScript中, 數組總是使用編號的索引

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
試一試»

警告 !!
如果你使用了一個名為索引的JavaScript將重新定義數組一個標準的對象。
在此之後, 所有陣列的方法和屬性將產生不正確的結果

例:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
試一試»

數組和對象之間的差異

在JavaScript中, 數組使用編號的索引

在JavaScript中, 對象使用命名的索引

數組是一種特殊的對象,並編號的索引。


當使用數組。 當使用對象。

  • JavaScript不支持關聯數組。
  • 當你想要的元素名稱是字符串(文本),你應該使用對象
  • 當你想要的元素名稱是數字您應該使用數組

避免new Array()

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

使用[]代替。

這兩種不同的語句都創建一個新的空數組命名為幾點:

var points = new Array();         // Bad
var points = [];                  // Good 

這兩種不同的語句都創建一個包含6個號碼一個新的數組:

var points = new Array(40, 100, 1, 5, 25, 10)  // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good
試一試»

new關鍵字唯一代碼的複雜性。 它也可以產生一些意想不到的結果:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

如果我刪除哪些因素之一?

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!
試一試»

如何識別一個數組

一個常見的問題是:我怎麼知道,如果一個變量是一個數組?

問題是,JavaScript的運營商typeof返回“對象”:

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

typeof fruits;             // returns object
試一試»

typeof運算符返回對象,因為JavaScript數組是一個對象。

解決方案1:

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

Array.isArray(fruits);     // returns true
試一試»

這種解決方案的問題是, ECMAScript 5 不能在較早瀏覽器支持

解決方案2:

為了解決這個問題,你可以創建自己的isArray()函數:

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

如果參數是一個數組就永遠的函數返回true。

或者更準確地說:如果對象原型包含單詞“陣列”則返回true。

解決方案3:

instanceof如果對象是由給定的構造函數創建運算符返回true:

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

fruits instanceof Array     // returns true
試一試»

自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5»