Итерация по свойствам объекта

Question

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

Как переменная propt представляет свойства объекта?Это не встроенный метод или свойство.Почему он подходит к каждому свойству объекта?

Answer 1

Для итерации по свойствам требуется дополнительная проверка hasOwnProperty:

for (var property in object) {
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

Это необходимо, поскольку прототип объекта содержит дополнительные свойства для объекта, которые технически являются частью объекта.Эти дополнительные свойства унаследованы от базового класса объектов, но все еще являются свойствами object.

hasOwnProperty, просто проверяет, является ли это свойство специфичным для этого класса, ини один не унаследован от базового класса.

Answer 2

Начиная с JavaScript 1.8.5, вы можете использовать Object.keys(obj), чтобы получить массив свойств, определенных для самого объекта (те, которые возвращают true для obj.hasOwnProperty(key)).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

Это лучше(и более читабельно), чем использование цикла for-in.

Поддерживается в следующих браузерах:

• Firefox (Gecko): 4 (2.0)
• Chrome: 5
• Internet Explorer: 9

См. Сеть разработчиков Mozilla Object.keys () , ссылка для получения дополнительной информации.

Answer 3

Девочки и парни, мы находимся в 2017 году, и у нас не так много времени для набора текста ... Итак, давайте сделаем этот крутой новый модный ECMAScript 2016:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

Answer 4

Это for...in statement ( MDN , Спецификация ECMAScript ).

Вы можете прочитать его как " ЗА каждое свойство IN объект obj, присвойте каждое свойство переменной PROPT по очереди ".

Answer 5

В следующих версиях ES вы можете использовать Object.entries:

for (const [key, value] of Object.entries(obj)) { }

или

Object.entries(obj).forEach(([key, value]) => ...)

Если вы просто хотите перебрать значения, используйте Object.values:

for (const value of Object.values(obj)) { }

или

Object.values(obj).forEach(value => ...)

Answer 6

Это просто for...in петля. Ознакомьтесь с документацией в Mozilla .

Answer 7

jquery позволяет вам сделать это сейчас:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

Answer 8

Ответ Доминика идеален, я просто предпочитаю делать это так, потому что читать чище:

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}

Answer 9

Если ваша среда поддерживает ES2017 , то я бы порекомендовал Object.entries :

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`);
});

Как показано в Mozillas Object.entries () документация:

Метод Object.entries () возвращает массив пар собственного перечисляемого свойства [ключ, значение] данного объекта в том же порядке, что и предоставленныйс помощью цикла for ... in (разница состоит в том, что цикл for-in перечисляет свойства и в цепочке прототипов).

В основном с Object.entries мы можем отказаться от следующего дополнительного шага, которыйтребуется со старшим for ... in loop:

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

Answer 10

Приведенные выше ответы немного раздражают, потому что они не объясняют, что вы делаете внутри цикла for после того, как убедитесь, что это объект: ВЫ НЕ ПОЛУЧАЕТЕ ЕГО ПРЯМО! На самом деле вы получили только КЛЮЧ, который вам нужен для подачи заявления в OBJ:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

Это все ECMA5 безопасно. Даже работает в хромых версиях JS, таких как Rhino;)