數(shù)組Array進行原型prototype擴展后帶來的for in遍歷問題

更新時間：2010年02月07日 11:57:13 作者：

不同的程序語言都有多種循環(huán)語句，而且功能是差不多的，當然使用場合還是有些區(qū)別的，比如for與for in，for in比較好用，它不需要預先知道對象屬性的長度。

通常在JavaScript中用for與for in遍歷數(shù)組結(jié)果是沒有什么區(qū)別的，它的循環(huán)變量i都是從0開始的數(shù)組索引（for in如果遍歷的是非數(shù)組對象的屬性集合，則這個i就是屬性名，或稱之為key）。另外要注意一點是：用for in遍歷數(shù)組，循環(huán)變量i是字符串類型的。如果對Array進行原型擴展后，再用for in來對數(shù)組進行遍歷時就要注意些問題了。
測試代碼：

復制代碼代碼如下:

 
Array.prototype.max = function() 
{ 
return Math.max.apply({}, this); 
}; 
var company = ['Adobe','Apple','Google','Intel','Microsoft','Oracle','IBM','SUN']; 
alert(company.length); //這里輸出的長度是8，與上面定義的數(shù)組長度一致 
//下面循環(huán)了9次，在IE6、IE7第一次循環(huán)時i值不是0而是上面原型擴展的方法名max，而在IE8、FF瀏覽器最后一次循環(huán)時i值才為max 
for (var i in company) 
{ 
alert('index is:'+i+'\nvalue is:'+company[i]); 
} 
//此時，你若僅想打印上面8個公司列表，用for in循環(huán)是不行了，即使你非要這樣做，也要在循環(huán)內(nèi)部做點判斷，比如像下面這樣： 
for (var i in company) 
{ 
if (!isNaN(i)) 
alert('index is:'+i+'\nvalue is:'+company[i]); 
} 
//當然，為了安全起見，也不要那么懶，就寫成普通的for循環(huán)才是最科學的，像下面這樣： 
for (var i=0; i< company.length; i++) 
{ 
alert('index is:'+i+'\nvalue is:'+company[i]); 
} 
//這種對數(shù)組原型擴展屬性帶來的循環(huán)問題通常是導致你得不到預期的結(jié)果，但不注意也可能給你代碼帶來難以發(fā)現(xiàn)的問題，看看下面的例子： 
var userInfo = [["Tom",21,"020-12345678"],["Mike",23,"020-87654321"]]; //顯然這里是數(shù)組嵌套 
for (var i in userInfo) 
{ 
//此時通過userInfo[i][0]可能根本得不到你預想的值，比如在這個循環(huán)中，你將看到有一次值為undefined的結(jié)果，這是因為當i值為max時，userInfo[i]是一個function而不是像這樣的子數(shù)組 ["Tom",21,"020-12345678"] 
alert('Name:' + userInfo[i][0] + '\nAge:' + userInfo[i][1] + '\nPhone:' + userInfo[i][2]); 
} 

一般來說for in是用來遍歷對象屬性的，而數(shù)組還是要用for來遍歷（當然數(shù)組也是對象）。據(jù)了解，for要比for in的遍歷效率高，另外像C#、ActionScript3.0還有foreach循環(huán)，這將是效率最高的循環(huán)，不過JavaScript沒有這種循環(huán)。最科學的數(shù)組遍歷應該像這樣：使用普通的for循環(huán)，而且預存數(shù)組長度。代碼如下：

復制代碼代碼如下:

 
var company = ['Adobe', 'Apple', 'Google', 'Intel', 'Microsoft', 'Oracle', 'IBM', 'SUN']; 
for (var i = 0, companyNum = company.length; i < companyNum; i++) 
{ 
alert('index is:' + i + '\nvalue is:' + company[i]); 
} 

作者：WebFlash
出處：http://webflash.cnblogs.com

您可能感興趣的文章: