DIV CSS 佈局教程網

JavaScript之數組
編輯: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

  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對象

        :更多精彩教程請關注網頁設計教程 欄目,

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved