JavaScript之坑我--陣列原理探析

基礎坑必知：
js中的陣列宣告時不需要指定資料型別，不強制指定長度，可以同時儲存各種資料型別的資料。這在java中任何一個都是不可想象的。

陣列的宣告方式：

var arr = [2, “luozhixiao”, 4, 5, 6]; //隱式建立

var arr = new Array(2, “luozhixiao”, 4, 5, 6); //構造方法（這裡可以看出js中陣列也是個物件，是構造出來的）

var arr = new Array(5);//建立一個長度為5的陣列:這容易和上面的構造方法混淆，故極少用。

在學習語法的時候我們需要知道一點：語法模擬：僅僅為了簡便起見而已;

         如:陣列的宣告，[]  ----〉 new Array();（這是一個構造方法！！！）

      物件的宣告，{}  ----〉 new Object();

      正則的宣告，//  ----〉 new RegExp();

陣列的遍歷：

(1) for(var i = 0 ; i<arr.length ; i++){alert(arr[i]);}

(2) for(var  i  in  arr){ alert(arr[i]);}

   Java中，forEach 遍歷ArrayList , i 就是arr中的一個元素了；可是在js中，i 僅僅是arr的下標而已！！！

其實我覺得這個設計比java的for…in更優秀，畢竟在java中我們for…in無法獲取對應的下標而僅僅得到其元素而已。

 二維陣列：

var arr = [[],[],[],[]];

var arr2 = [["luozhixiao",22,"huazhou"],["limeisheng",44,"meizhou"]];

原理坑須知：

1.  在js中，我們要明確一點是，陣列不是資料型別，而是Object型別，物件！！！

     Js 中 for …in  可以遍歷一個物件的所有屬性，也可以遍歷一個陣列的所有屬性。
    遍歷一個物件的所有屬性：

      Var  obj = {name : “luozhixiao”  ,  age:22  ,  address:”huazhou”};

      For(var i  in  obj){  alert(obj[i]) ;  }
      遍歷一個陣列的所有元素：見下例。

 

2. 在js中，陣列真的是被設計的好靈活：下標可以是字串！！！即：文字下標！！(然而，真的是下標麼？且看下面分析)

<script type="text/javascript">

  var arr = new Array("luo" , "zhi" , "xiao" , 22);

  document.write("（1）陣列長度："+arr.length+"<br/>");

  arr["address"] = "huazhou";

  arr["country"] = "China";

  document.write("（2）陣列長度："+arr.length+"<br/>");//對比（1）的結果

 

  document.write("for...in遍歷："+"<br/>");

  for(var i in arr){

         document.write(""+ i + " : " +arr[i]+"<br/>");

  }

  document.write("普通for迴圈遍歷："+"<br/>");

  for(var i = 0 ; i<arr.length ; i++){

    document.write(""+ i + " : " +arr[i]+"<br/>");

  }

</script>

執行結果如下：

（1）陣列長度：4
（2）陣列長度：4
for...in遍歷：
0 : luo
1 : zhi
2 : xiao
3 : 22
address : huazhou
country : China
普通for迴圈遍歷：
0 : luo
1 : zhi
2 : xiao
3 : 22

其實，到目前為止，我們可以重新來理解陣列了：陣列真的是一個{ }！！我們通過除錯一下即知道：

 解析：
如上圖arr 其實和普通物件一樣：{ 0 : “luo” , 1:”zhi” , 2:”xiao” , 3:22 , address:”huazhou” , length:4}，其中0，1，2，3 都是一個物件的屬性，和address，length一樣。所謂的文字下標，其實是物件的屬性而已。

注意的是 ， length是陣列物件的一個屬性，只記錄著 陣列元素的總個數，沒有記錄陣列物件的屬性總個數。因此，我們遍歷陣列物件時，普通的for迴圈是無法列印出陣列物件的屬性的；而for…in 則全部屬性都可以！！

然而，我們可以通過arr.address，arr.length 訪問屬性的值，卻無法通過arr.0, arr.1, arr.2, arr.3訪問到陣列元素，因為js中沒有這種語法。因此有了這個注意點：

for…in 遍歷陣列，不可以使用arr.i的形式訪問屬性的值，因為這樣子是訪問arr陣列物件中的屬性名為i 的那個屬性的值！！！如：

例子中arr物件中沒有名為i 的屬性，所以輸出的都是undefined

<script type="text/javascript">

  var arr = new Array("luo" , "zhi" , "xiao" , 22);

  arr["address"] = "huazhou";

  arr["country"] = "China"; 

  document.write("for...in遍歷："+"<br/>");

  for(var i in arr){

         document.write(""+ i + " : " +arr.i+"<br/>");

  }

</script>

結果如下：

for...in遍歷：
0 : undefined
1 : undefined
2 : undefined
3 : undefined
10 : undefined
address : undefined
country : undefined

 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29900383/viewspace-1819337/，如需轉載，請註明出處，否則將追究法律責任。