談談js中for in 需要注意的地方

來源:互聯網
上載者:User

s中for in 可以遍曆對象或數組的顯性屬性,也就是說我們自己定義的屬性是可以遍曆的,那些原型上預設已有的屬性,例如:Object.prototype.toString、Object.prototype.hasOwnProperty 是遍曆不出來的。

for in 的基本規則如上,不過還有“坑”的地方需要我們注意:

1、for in迴圈出的值不一定是按順序的。代碼如下:

var b = {3:1,42:2,11:3}
for( var key in b ){
    alert( b[key] )
}

低版本瀏覽器彈窗的順序是:1、2、3。現代瀏覽器彈窗的順序是1、3、2。

2、在原型上加擴充方法,會被for in 出來。代碼如下:

Object.prototype.test = "I am test"
var b = {"name":"txj"}
for( var key in b ){
    alert(key + " : "+ b[key])
}

我們手動加在原型上的方法,for in的時候會被遍曆出來。一般我們遍曆對象並不需要其原型的屬性,所以遍曆時最好Object.prototype.hasOwnProperty方法進行判斷。

3、在執行個體中定義原型中已有的方法,瀏覽器for in 情況不一致。代碼如下:

var b = {"name":"txj"}
b.toString = function(){ alert("I am toString") }
for( var key in b ){
    alert(key + " : "+ b[key])
}

我們給b執行個體加了一個原型上已有的方法toString。現代瀏覽器能迴圈出toString 低版本瀏覽器卻不能。所以給執行個體定屬性名稱時,不要和原型已有的一致。

4、各瀏覽器迴圈出的屬性順序不同。代碼與2中的一樣:

Object.prototype.test = "I am test"
var b = {"name":"txj"}
for( var key in b ){
    alert(key + " : "+ b[key])
}

現代瀏覽器先迴圈執行個體中的屬性,再迴圈原型中的屬性。低版本瀏覽器相反。

這讓我想到了jQuery對$.isPlainObject()方法實現的一段代碼:

// Own properties are enumerated firstly, so to speed up,
// if last one is own, then all properties are own.
var key
for ( key in obj ) {}
return key === undefined hasOwn.call( obj, key );

它這裡說如果一個對象的最後一個屬性是執行個體自己的屬性,那麼所有的屬性都是執行個體自己的屬性。這對低版本瀏覽器來說應該是不對的。所以jquery後來又加了如下代碼修複:


// Support: IE<9
// Handle iteration over inherited properties before own properties.
if ( support.ownLast ) {
    for ( key in obj ) {
        return hasOwn.call( obj, key );
    }
}



最後想吐槽一下,一般不要在原型上加自訂方法;數組的迴圈一般不用for in 。哈哈!



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。