JavaScript之數組

  一、數組的定義

       數組是按次序排列的一組值,單個值稱爲元素,他們的位置都有編號,從 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<arr.length; 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<arr.length; 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 < a.length; i++){
    console.log(a[i]);
}

// or
var i = 0;
while (i< a.length){
    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對象






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章