JavaScript數組用於多個值存儲在一個變量。
顯示陣列
在本教程中,我們將使用腳本來顯示一個數組裡面<p>與元素id="demo" :
例
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
第一行(腳本)創建了一個汽車陣列命名。
第二行“發現”與元素id="demo"和"displays"在陣"innerHTML"吧;
試一試
創建一個數組,並賦值給它:
空格和換行並不重要。 一個聲明可以跨越多行:
不要把一個逗號的最後一個元素(如後"BMW" )。
效果是跨瀏覽器不一致。
什麼是數組?
陣列是一個特殊的變量,其可以在一個時間持有多個值。
如果你有一個項目列表(車名的列表,例如),存儲車在單變量看起來是這樣的:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
但是,如果您通過汽車要循環什麼,並找到一個特定的一個? 如果你有沒有3輛汽車,但300?
該解決方案是一個數組!
數組可以在一個單一的名稱包含多個值,你可以通過參考索引號訪問值。
創建陣列
使用數組文本是創建一個JavaScript陣列的最簡單方法。
句法:
var array-name = [ item1 , item2 , ...];
例:
var cars = ["Saab", "Volvo", "BMW"];
使用JavaScript的新關鍵字
下面的例子還創建一個數組,並賦值給它:
上面兩個例子做同樣的。 沒有必要使用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 :
對象使用的名稱來訪問它的“成員”。 在這個例子中,person.firstName返回John :
陣列屬性和方法
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
試一試»