DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript中for/in循環及使用技巧
javascript中for/in循環及使用技巧
編輯:關於JavaScript     

JavaScript 支持不同類型的循環:

for - 循環代碼塊一定的次數

for/in - 循環遍歷對象的屬性

while - 當指定的條件為 true 時循環指定的代碼塊

do/while - 同樣當指定的條件為 true 時循環指定的代碼塊

1. in運算符:要求其左邊的運算數是一個字符串,或可以被轉換為字符串,右邊的運算數是一個對象或數組。如果該運算符左邊的值是右邊對象的一個屬性名,則返回true。

例如:

   var point={x:1,y:2}; //對象直接量
   var has_x="x" in point; //返回true
   var has_z="z" in point; //返回false
   var ts="toString" in point;//返回true,toString為繼承方法

   2. for/in語句:語法,

for (variable in object)
                           statement;

      提供了一種遍歷對象屬性的方法。

例:

for(var prop in my_object) {
    document.write("name:"+prop+";value:"+my_object[prop],"<br>");
  }

      javascript的數組是一種特殊的對象,因此for/in循環可以像枚舉對象屬性一樣枚舉數組下標。

可以把一個對象的所有屬性名復制到一個數組中,

例:

var o= {x:1,y:2,z:3};
  var a=new Array();
  var i=0;
  for (a[i++] in o) 
  ;//空語句,用於初始化數組

    3. in運算符與for/in語句不同,for/in語句in的左邊可以是聲明一個變量的var語句,數組的一個元素或者是對象的一個屬性,不能使字符串。

    4. 數組常用的存取屬性運算符是“[]”,而不是“.”。使用“[]”來命名屬性名師字符串值,是動態的,可以在運行時改變,而不是一個標識符“.”。

例:

var stock_name= get_stock_name_from_user();//從用戶處獲取股票名
  var share= get_number_of_shares();//得到股票數量
  portfolio[stock_name]= share;//動態地創建數組股票,並為每支股票賦值
  將該例子與for/in循環一起使用,當用戶輸入了他的投資組合,可以計算當前總值
  var value= 0;
  for (stock in portfolio) {
    value +=get_share_value(stock)*portfolio[stock];
  }

stock存取的是每支股票的名字。     

portfolio[stock]存取的是每支股票的數量。

for-in循環

功能:遍歷對象屬性,把屬性名和屬性值都提出來

var obj = {
 "key1":"value1",
 "key2":"value2",
 "key3":"value3"
};
function EnumaKey(){
 for(var key in obj ){
  alert(key);
 }
}
function EnumaVal(){
 for(var key in obj ){
  alert(obj[key]);
 }
}
EnumaKey(obj)
//key1 key2 key3
EnumaVal(obj)
//value1 value2 value3

數組也可以這樣遍歷,但不推薦,因為不能保證順序,而且如果在Array的原型上添加了屬性,這個屬性也會被遍歷出來。

for-in循環應該用在非數組對象的遍歷上,使用for-in進行循環也被稱為“枚舉”。

從技術上將,你可以使用for-in循環數組(因為JavaScript中數組也是對象),但這是不推薦的。因為如果數組對象已被自定義的功能增強,就可能發生邏輯錯誤。另外,在for-in中,屬性列表的順序(序列)是不能保證的。所以最好數組使用正常的for循環,對象使用for-in循環。

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