Ответ 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)
(у которого есть закрытие), поэтому мы можем использовать как индекс, так и ценность, и будьте уверены, что они имеют которое мы ожидаем.