一、數組的定義
數組是按次序排列的一組值,單個值稱為元素,他們的位置都有編號,從 0 開始,整個數組用方括號表示。
var arr = [ 12, 34, 56 ];
上面代碼就表示,創建了一個數組,12是0號位置,34是1一號位置,56是2號位置,和Java中的數組下標是一樣的,都是從0 開始。
除了定義時賦值,數組也可以先定義,後賦值。
var arr;
arr[0] = 12;
arr[1] = 34;
arr[2] = 56;
任意一種數據類型都可以放入數組,
var arr = [12,3.14,'a',"123",null,undefined, function (){return true;} ];
上面分別放入了 整形,浮點型,字符型,字符串,null,undefined,函數。
數組也可以放進去,如果放進去數組的話,就構成了多維數組。
二、數組與對象的關系
本質上數組也屬於對象,是字典結構的一個變種。
console.log( typeof [1,2,3] ) //object
上面代碼說明數組是一種特殊的對象,所有typeof運算符,返回數組的類型是object。
數組的特殊性體現在,它的鍵默認是按次序排列的整數(1,2,3,4....),所有數組不用為每個元素指定鍵名,而對象的每個成員都必須指定鍵名,另外,數組以字符串來識別鍵名,非字符串的鍵名會被轉化為字符串,所以數值或字符串作為鍵名,都能讀取數組的成員。
var arr = [12, 34, 56];
arr['0'] // 12
arr[0] // 12
上面代碼分別用數值或字符串作為鍵名,都能讀取數組。
需喲注意的是,上面的一條規定在賦值時也成立,如果一個值可以被轉化為整數,則以該值為鍵名,等於以對應的整數為鍵名,
var a = [];
a['1000'] = 'abc';
a[1000] // 'abc'
a[1.00] = 6;
a[1] // 1
通過上面代碼可以看到,'1000'和 1.00都可以被轉化為整數。
對象有兩種讀取成員的方法:點結構(object.key)和方括號結構(object[key]),但是對於數組的鍵名不能使用點結構,arr.0是非法的,因為單獨的數字不能作為標示符,所以數組成員只能通過 方括號結構來讀取成員。arr[0](方括號是運算符,可以接受數值)。
三、length屬性
數組的length屬性,返回的是數組成員的數量。
var arr = [12,34,56];
console.log(arr.length); //3
JavaScript使用一個32位整數保存數組的元素個數,這意味著,這組成員最多有 2的32次方-1(4294967295),也就是說length屬性的最大值就是4294967295。
數組的length屬性和對象的length屬性是有區別的,主要是數組,就一定有length屬性,而對象不一定有。而且,數組的length屬性是一個動態的值,等於鍵名中最大整數加1。
var arr = ['a', 'b'];
arr.length // 2
arr[2] = 'c';
arr.length // 3
arr[9] = 'd';
arr.length // 10
arr[1000] = 'e';
arr.length // 1001
上面代碼也表示,數組的鍵值不需要連續,length屬性的值總是比最大的那個整數加 1,另外,這也表明數組是一種動態的數據結構,可以隨時的增減成員。
length屬性是可寫的,如果人為設置一個小於當前成員個數的值,該數組的成員就會自動縮減到length設置的值。
var arr = [ 'a', 'b', 'c' ];
arr.length // 3
arr.length = 2;
alert(arr); // ["a", "b"]
上面代碼,length屬性被設置為 2,則數組下標的最大值只能是 1,所以arr[2]這個值被刪除了。
通過這個我們可以找到一個清空數組元素的一個最簡單的方法,就是將length屬性設置為0。
var arr = [ 'a', 'b', 'c' ];
arr.length = 0;
alert(arr); // []
反過來,如果將length值設置為大於當前元素的個數,則數組的成員數量會增加到這個值,新的位置填入空元素(undefined)。
var arr = [1,2];
arr.length = 3;
for(var i=0; i
console.log(arr[i]);
}
//打印 1 2 undefined
上面代碼表示,當length屬性的值設為大於數組個數時,新增的位置都填充為undefined。
如果設置length為不合法的值,JavaScript會報錯。
// 設置負值
[].length = -1
// RangeError: Invalid array length
// 數組元素個數大於等於2的32次方
[].length = Math.pow(2,32)
// RangeError: Invalid array length
// 設置字符串
[].length = 'abc'
// RangeError: Invalid array length
值得注意的是,由於數組本質上也是一種對象,所以我們可以為數組添加屬性,但是這並不影響length屬性的值。
var a = [];
a["p"] = "abc";
a.length // 0
a[2.1] = "abc";
a.length // 0
很奇怪吧,因為length屬性的值等於最大的整數鍵加 1,這個數組中沒有整數鍵,所以length屬性的值保持為 0。
四、數組的空位
當數組的某個位置是空元素(比如,兩個逗號之間沒有任何值,或者值為undefined),我們就稱該數組存在空位(hole)。
var a = [1,,1];
a // [1, undefined, 1]
a.length // 3
需要注意的是,如果最後一個元素後面還有逗號的話,並不會產生空位。也就是說,有沒有這個逗號,結果都是一樣的,IE8以下的版本除外。
var a = [1,2,3,];
a.length // 3
a // [1, 2, 3]
上面代碼可以看出,有沒有逗號,結果都是一樣的。
使用delete命令刪除一個值,會形成空位。
var a = [1,2,3,];
delete arr[1];
for(var i=0; i
console.log(arr[i]);
}
console.log(a.length);// 3
//打印 1 undefined 3
需要注意的是,使用delete命令並不會改變數組length屬性。
使用delete命令時,只是把值變為 undefined,也就是說,length屬性不會過濾undefined的值,所以使用length屬性便利書組的時候,一定要小心。
空位通過空值生成還是通過顯式設置為undefined生成,有一個細微的差別,如果通過空值生成,使用數組的forEach方法或者for...in...變量數組時,空位就會被跳過。
var arr = [,,];
for( var i in arr ){
console.log(arr[i]);
} //不產生任何輸出
arr.forEach( function (x,i){console(i+" "+x);})
//同樣沒有任何輸出
如果空位通過顯示的undefined生成的話,則不會被跳過。
var arr = [undefined,undefined,undefined];
for( var i in arr ){
console.log(arr[i]);
} //undefined,undefined,undefined
arr.forEach( function (x,i){console(i+" "+x);})
//undefined,undefined,undefined
五、in運算符,for...in循環
檢查某個鍵是否存在運算符in,使用與對象,也使用與數組。
console.log( 4 in [1,2,3,4] ); //false
console.log( 3 in [1,2,3,4] ); //true
上面代碼,可以看到,下標 4不存在,因為下標最大為3,所以是false。
使用for...in 循環可以遍歷數組中的所有元素,需要注意的是,for...in會遍歷所有的鍵,即使是非數字鍵。
var a = [1,2,3];
a.foo = true;
for (var key in a) {
console.log(key);
}
// 0
// 1
// 2
// foo
上面代碼在遍歷數組時,也遍歷到了非整數鍵foo。所以,使用for-in遍歷數組的時候,一定要小心。
另一種遍歷的做法是用for循環或者while循環結合length屬性。
var a = [1,2,3];
for(var i = 0; i
console.log(a[i]);
}
// or
var i = 0;
while (i
console.log(a[i]);
i++;
}
// or
var l = a.length;
while (l--){
console.log(a[l]);
}
上面代碼是三種遍歷數組的寫法。最後一種寫法是逆向遍歷,即從最後一個元素向第一個元素遍歷。
六、Array的構造方法
除了直接使用方括號創建,數組還可以使用JavaScript內置的Array構造函數創建。
var a = new Array();
a // []
a.length // 0
var a = new Array(1);
a // [undefined × 1]
a.length // 1
var a = new Array(2);
a // [undefined × 2]
a.length // 2
var a = new Array(1,2);
a // [1,2]
a.length // 2
上面代碼說明,Array構造函數的用法不符合直覺。沒有參數時,返回一個空數組;使用一個參數時,返回一個指定長度的空數組;使用多個參數,返回一個指定成員的數組。所以,建議總是直接采用方括號創建數組。Array構造函數的詳細介紹,參見我的另一篇博文:JavaScript之Array對象
注:更多精彩教程請關注網頁設計教程 欄目,