在 javascript 中，有 for、foreach 及 for…in 這幾個走訪陣列的迴圈可以使用，然而 for..in 它可以走訪物件的屬性名稱與值。
但 for…in 也有一些特別需要注意的地方。
我們先來看一些基本的用法吧~
[javascript] // 列出陣列內容 var items=[“a”, “b”, “c”]; for(var item in items) { console.log(“index:“+item+” “+items[item]); } // index:0 a // index:1 b // index:2 c // 列出物件屬性與值 var items={ “first”: “a”, “second”: “b”, “third”: “c” }; for(var item in items) { console.log(“name:“+item+” “+items[item]); } // name:first a // name:second b // name:third c [/javascript]
上面這段程式碼可以看到 for…in 可以應用在走訪陣列與物件屬性上面。
接下來我們看 for…in 有沒有什麼需要注意的地方
[javascript] // 試著讓 Array 繼承一些屬性或方法 Array.prototype.test=“test123”; var items=[“a”, “b”, “c”]; for(var item in items) { console.log(“index:“+item+” “+items[item]); } // index:0 a // index:1 b // index:2 c // index:test test123 [/javascript]
我們從上面這段程式碼，可以發現 for…in 是會連繼承的屬性和方法都會走訪。
但是在大多數時候，我們是不需要走訪所繼承的屬性及方法。
因此我們必須使用 hasOwnProperty() 檢查這是否為非繼承的屬性(true/false)
例如將上面程式碼改為以下：
[javascript] // 試著讓 Array 繼承一些屬性或方法 Array.prototype.test=“test123”; var items=[“a”, “b”, “c”]; for(var item in items) { if(items.hasOwnProperty(item)) console.log(“index:“+item+” “+items[item]); } // index:0 a // index:1 b // index:2 c [/javascript]
這樣就不會把原型(prototype)中的方法也印出來囉!
參考資料： https://pjchender.blogspot.tw/2016/06/javascript-for-in-function.html