[javascript] for….in的用法與注意事項

在 javascript 中,有 for、foreach 及 for…in 這幾個走訪陣列的迴圈可以使用,然而 for..in 它可以走訪物件的屬性名稱與值。

但 for…in 也有一些特別需要注意的地方。

我們先來看一些基本的用法吧~

// 列出陣列內容
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

上面這段程式碼可以看到 for…in 可以應用在走訪陣列與物件屬性上面。

接下來我們看 for…in 有沒有什麼需要注意的地方

// 試著讓 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

我們從上面這段程式碼,可以發現 for…in 是會連繼承的屬性和方法都會走訪。

但是在大多數時候,我們是不需要走訪所繼承的屬性及方法。

因此我們必須使用 hasOwnProperty() 檢查這是否為非繼承的屬性(true/false)

例如將上面程式碼改為以下:

// 試著讓 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

這樣就不會把原型(prototype)中的方法也印出來囉!

參考資料:
https://pjchender.blogspot.tw/2016/06/javascript-for-in-function.html

Leave a Reply

Your email address will not be published. Required fields are marked *