javascript 數組
javascript 數組用于在單一變量中存儲多個值。
以下為 javascript 數組范例:
>var cars = ["saab", "volvo", "bmw"];
1. 什么是數組?
數組是一種特殊的變量,它能夠一次存放一個以上的值。
如果您有一個項目清單(例如,汽車品牌列表),在單個變量中存儲汽車品牌應該是這樣的:
var car1 = "saab"; var car2 = "volvo"; var car3 = "bmw";
不過,假如您希望遍歷所有汽車并找到一個特定的值?假如不是三個汽車品牌而是三百個呢?
解決方法就是數組!
數組可以用一個單一的名稱存放很多值,并且還可以通過引用索引號來訪問這些值。
2. 創建數組
使用數組文本是創建 javascript 數組最簡單的方法。
語法:
var array-name = [item1, item2, ...];
范例
var cars = ["saab", "volvo", "bmw"];
空格和折行并不重要。聲明可橫跨多行:
范例
var cars = [ "saab", "volvo", "bmw" ];
請不要最后一個元素之后寫逗號(比如 "bmw",)。
可能存在跨瀏覽器兼容性問題。
3. 使用 javascript 關鍵詞 new
下面的例子也會創建數組,并為其賦值:
范例
var cars = new array("saab", "volvo", "bmw");
以上兩個例子效果完全一樣。無需使用 new array()。
出于簡潔、可讀性和執行速度的考慮,請使用第一種方法(數組文本方法)。
4. 訪問數組元素
我們通過引用索引號(下標號)來引用某個數組元素。
這條語句訪問 cars 中的首個元素的值:
var name = cars[0];
這條語句修改 cars 中的首個元素:
cars[0] = "opel";
范例
var cars = ["saab", "volvo", "bmw"]; document.getelementbyid("demo").innerhtml = cars[0];
[0] 是數組中的第一個元素。[1] 是第二個。數組索引從 0 開始。
5. 改變數組元素
這條語句修改了 cars 中第一個元素的值:
cars[0] = "opel";
范例
var cars = ["saab", "volvo", "bmw"]; cars[0] = "opel"; document.getelementbyid("demo").innerhtml = cars[0];
6. 訪問完整數組
通過 javascript,可通過引用數組名來訪問完整數組:
范例
var cars = ["saab", "volvo", "bmw"]; document.getelementbyid("demo").innerhtml = cars;
7. 數組是對象
數組是一種特殊類型的對象。在 javascript 中對數組使用 typeof 運算符會返回 "object"。
但是,javascript 數組最好以數組來描述。
數組使用數字來訪問其“元素”。在本例中,person[0] 返回 bill:
數組:
var person = ["bill", "gates", 62];
對象使用名稱來訪問其“成員”。在本例中,person.firstname 返回 bill:
對象:
var person = {firstname:"john", lastname:"doe", age:46};
8. 數組元素可以是對象
javascript 變量可以是對象。數組是特殊類型的對象。
正因如此,您可以在相同數組中存放不同類型的變量。
您可以在數組保存對象。您可以在數組中保存函數。你甚至可以在數組中保存數組:
myarray[0] = date.now; myarray[1] = myfunction; myarray[2] = mycars;
9. 數組屬性和方法
javascript 數組的真實力量隱藏在數組的屬性和方法中:
范例
var x = cars.length; // length 屬性返回元素的數量 var y = cars.sort(); // sort() 方法對數組進行排序
我們將在下一章學習數組方法。
10. length 屬性
length 屬性返回數組的長度(數組元素的數目)。
范例
var fruits = ["banana", "orange", "apple", "mango"];
fruits.length; // fruits 的長度是 4
length 屬性始終大于最高數組索引(下標)。
11. 訪問第一個數組元素
范例
fruits = ["banana", "orange", "apple", "mango"]; var first = fruits[0];
12. 訪問最后一個數組元素
范例
fruits = ["banana", "orange", "apple", "mango"]; var last = fruits[fruits.length - 1];
13. 遍歷數組元素
遍歷數組的最安全方法是使用 "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>"; }
14. 添加數組元素
向數組添加新元素的最佳方法是使用 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)
15. 關聯數組
很多編程元素支持命名索引的數組。
具有命名索引的數組被稱為關聯數組(或散列)。
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
16. 數組和對象的區別
在 javascript 中,數組使用數字索引。
在 javascript 中,對象使用命名索引。
數組是特殊類型的對象,具有數字索引。
17. 何時使用數組,何時使用對象?
- javascript 不支持關聯數組
- 如果希望元素名為字符串(文本)則應該使用對象。
- 如果希望元素名為數字則應該使用數組。
18. 避免 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 個未定義元素的數組!!!
19. 如何識別數組
常見的問題是:我如何知曉某個變量是否是數組?
問題在于 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