Как перебрать объекты в 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 () определяет, является ли это свойство свойством direct объекта.

Подробнее о наследовании и цепочке прототипов можно прочитать здесь .

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 class) отображается, хотя это не свойство, но оно принадлежит Car.

Я считаю, что лучший способ перебрать свойства объекта - использовать Object.keys:

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