Каждый для объекта?

Возможный дубликат:
Итерация над объектными значениями объектов

У меня есть объект в JavaScript:

var object = someobject;

Object { aaa=true, bbb=true, ccc=true }

Как я могу использовать каждый для этого?

 object.each(function(index, value)) {
      console.log(value);
 }

Не работает.

Ответ 1

Объект javascript не имеет стандартной функции .each. Функция jQuery предоставляет функцию. См. http://api.jquery.com/jQuery.each/ Ниже должно работать

$.each(object, function(index, value) {
    console.log(value);
}); 

Другой вариант - использовать ванильный Javascript, используя функции Object.keys() и Array .map(), подобные этой

Object.keys(object).map(function(objectKey, index) {
    var value = object[objectKey];
    console.log(value);
});

См. https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Object/keys и https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Обычно это лучше, чем использование javascript for-loop для ванилей, если вы действительно не понимаете значения использования обычного цикла for и видите, что для него используются определенные характеристики, такие как цикл по цепочке свойств.

Но обычно цикл for не работает лучше, чем jQuery или Object.keys().map(). Я рассмотрю две потенциальные проблемы с использованием простой для цикла ниже.


Правильно, так и в других ответах, простая альтернатива Javascript была бы

for(var index in object) { 
    var attr = object[index]; 
}

С этим связаны две потенциальные проблемы:

1. Вы хотите проверить, находится ли атрибут, который вы находите, от самого объекта, а не от цепи прототипа. Это можно проверить с помощью функции hasOwnProperty так:

for(var index in object) { 
   if (object.hasOwnProperty(index)) {
       var attr = object[index];
   }
}

Для получения дополнительной информации см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty.

Функции jQuery.each и Object.keys позаботятся об этом автоматически.

2. Другой потенциальной проблемой с равным для цикла является область видимости и незакрытия. Это немного сложно, но возьмите, например, следующий код. У нас есть куча кнопок с идентификаторами button0, button1, button2 и т.д., И мы хотим установить onclick на них и сделать console.log следующим образом:

<button id='button0'>click</button>
<button id='button1'>click</button>
<button id='button2'>click</button>

var messagesByButtonId = {"button0" : "clicked first!", "button1" : "clicked middle!", "button2" : "clicked last!"];
for(var buttonId in messagesByButtonId ) { 
   if (messagesByButtonId.hasOwnProperty(buttonId)) {
       $('#'+buttonId).click(function() {
           var message = messagesByButtonId[buttonId];
           console.log(message);
       });
   }
}

Если через какое-то время мы нажмем любую из кнопок, мы всегда получим "щелкнули последним!" в консоли, и никогда не "щелкали первым!". или "щелкнули по середине!". Зачем? Поскольку в момент выполнения функции onclick в этот момент будет отображаться messagesByButtonId[buttonId] с использованием переменной buttonId. И так как цикл завершен в этот момент, переменная buttonId по-прежнему будет "button2" (значение, которое она имела во время последней итерации цикла), и поэтому messagesByButtonId[buttonId] будет messagesByButtonId["button2"], то есть "щелкнул последним!"..

Подробнее о закрытии см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures. Особенно последняя часть этой страницы, которая охватывает наш пример.

Опять же, jQuery.each и Object.keys().map() решить эту проблему автоматически для нас, поскольку она предоставляет нам function(index, value) (у которого есть закрытие), поэтому мы можем использовать как индекс, так и ценность, и будьте уверены, что они имеют которое мы ожидаем.

Ответ 2

for(var key in object) {
   console.log(object[key]);
}

Ответ 3

var object = { "a": 1, "b": 2};
$.each(object, function(key, value){
  console.log(key + ": " + object[key]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>