Question

我读到： “ for ... in循环的问题在于它会循环访问原型链中的属性。当使用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()方法确定此属性是否是对象的 direct 属性。

您可以了解有关inheritance and the prototype chain here的更多信息。

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]);
});

如何使用for / in遍历js中的对象？

2 个答案: