如何使用for / in循環遍歷js中的對象？

Question

我讀到：“for ... in循環中的問題是它遍歷Prototype鏈中的屬性。當你使用for ... in循環遍歷一個對象時，你需要檢查屬性是否屬於對象。你可以用hasOwnProperty來做到這一點。“ 那么原型鏈中的屬性是什么，以及如何通過它們進行迭代？

我嘗試使用和不使用hasOwnProperty運行代碼，但它給出了相同的結果

var myCar = {
    color : "red" ,
    type  : "sedan" ,
    price : "100,000" ,
    model : "2020"
};
var prop ;
for (prop in myCar) {
    if (myCar.hasOwnProperty(prop)){
        console.log(prop + " : " + myCar[prop])
    }
};

for (prop in myCar) {
        console.log(prop + " : " + myCar[prop])
};

兩個代碼的結果是：顏色：紅色類型：轎車價格：100,000型號：2020

Answer 1

您可以向對象的原型添加屬性，這些屬性將被視為對象的屬性，以用於for..in 。 hasOwnProperty（）方法確定此屬性是否是對象的直接屬性。

您可以在此處閱讀有關繼承和原型鏈的更多信息。

 function Car() { this.color = 'red'; this.type = 'sedan'; this.price = '100,000'; this.model = '2020'; } Car.prototype.foo = 'bar'; const car = new Car(); console.log('Props'); for (let prop in car) { console.log(`${prop}: ${car[prop]}`); }; console.log('Own props'); for (let prop in car) { if (car.hasOwnProperty(prop)){ console.log(`${prop}: ${car[prop]}`); } }; 

Answer 2

下面修改后的代碼顯示了問題所在：

function Car(){
  this.color = "red";
  this.type  = "sedan";
  this.price = "100,000";
  this.model = "2020";
}

Car.prototype.test = function() {};

let myCar = new Car();

var prop ;
for (prop in myCar) {
    if (myCar.hasOwnProperty(prop)){
        console.log(prop + " : " + myCar[prop])
    }
};

for (prop in myCar) {
        console.log(prop + " : " + myCar[prop])
};

輸出：

color : red
type : sedan
price : 100,000
model : 2020
color : red
type : sedan
price : 100,000
model : 2020
test : function() {}

在第二個循環的最后一次迭代中，顯示原型函數（或Car類的方法），即使它不是屬性但屬於Car 。

我相信循環對象屬性的最佳方法是使用Object.keys ：

Object.keys(myCar).forEach(prop => {
  console.log(prop + " : " + myCar[prop]);
});