Как перебрать обычный объект JavaScript с объектами в качестве элементов?
Как можно пройтись по всем элементам объекта в JavaScript, включая те значения, которые являются объектами?
Например, как можно перебрать следующие данные, чтобы получить доступ к "your_name" и "your_msg" для каждого элемента?
var validation_messages = {
"key_1": {
"your_name": "jimmy",
"your_msg": "hello world"
},
"key_2": {
"your_name": "billy",
"your_msg": "foo equals bar"
}
}
Буду признателен за любые советы или примеры кода!
5 ответ(ов)
Конечно! Вот перевод вашего кода на русский язык в стиле ответа на StackOverflow:
for (var key in validation_messages) {
// пропускаем итерацию, если свойство принадлежит прототипу
if (!validation_messages.hasOwnProperty(key)) continue;
var obj = validation_messages[key];
for (var prop in obj) {
// пропускаем итерацию, если свойство принадлежит прототипу
if (!obj.hasOwnProperty(prop)) continue;
// ваш код
alert(prop + " = " + obj[prop]);
}
}
В данном коде выполняется перебор объектов validation_messages
, при этом используются два вложенных цикла для доступа к свойствам каждого объекта. Проверки hasOwnProperty()
обеспечивают, что будут обрабатываться только собственные свойства, игнорируя унаследованные от прототипа.
В ECMAScript 5 вы можете комбинировать методы Object.keys()
и Array.prototype.forEach()
для итерации по собственным перечисляемым свойствам объекта. В приведенном ниже примере мы создаем объект obj
, содержащий ключи first
и last
, и затем используем Object.keys()
для получения массива ключей этого объекта. Затем мы применяем forEach()
для перебора ключей и вывода их значений в консоль:
var obj = {
first: "John",
last: "Doe"
};
//
// Перебираем собственные перечисляемые ключи
//
Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});
Этот код выведет в консоль:
first John
last Doe
Таким образом, вы сможете легко получить доступ к каждому собственному свойству объекта и работать с его значениями.
Проблема с этим кодом:
for (var key in validation_messages) {
var obj = validation_messages[key];
for (var prop in obj) {
alert(prop + " = " + obj[prop]);
}
}
в том, что он также будет перебирать свойства, унаследованные от прототипа объекта.
Используя такой вариант, вы избежите этой проблемы:
for (var key in validation_messages) {
if (validation_messages.hasOwnProperty(key)) {
var obj = validation_messages[key];
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
alert(prop + " = " + obj[prop]);
}
}
}
}
Здесь мы добавили проверку с помощью hasOwnProperty
, что позволяет обойтись только свойствами, непосредственно принадлежащими объекту, и избежать нежелательного перебора свойств из прототипа.
Если вы используете рекурсию, вы можете возвращать свойства объектов любой глубины. Вот пример функции lookdeep
, которая выполняет такую задачу:
function lookdeep(object){
var collection= [], index= 0, next, item;
for(item in object){
if(object.hasOwnProperty(item)){
next= object[item];
if(typeof next== 'object' && next!= null){
collection[index++]= item +
':{ '+ lookdeep(next).join(', ')+'}';
}
else collection[index++]= [item+':'+String(next)];
}
}
return collection;
}
// Пример использования
var O={
a:1, b:2, c:{
c1:3, c2:4, c3:{
t:true, f:false
}
},
d:11
};
var lookdeepSample= 'O={'+ lookdeep(O).join(',\n')+'}';
/* Возвращаемое значение: (String)
O={
a:1,
b:2,
c:{
c1:3, c2:4, c3:{
t:true, f:false
}
},
d:11
}
*/
В этом примере функция lookdeep
принимает объект и рекурсивно проходит через все его свойства. Если текущее свойство является объектом, функция вызывает сама себя, чтобы углубиться в этот объект. В результате вы получаете строку, в которой перечислены все свойства, включая вложенные объекты, отформатированные в виде удобного для чтения формата.
Ваш код перебирает объекты в массиве validation_messages
с использованием цикла for...in
. Однако стоит отметить, что цикл for...in
не рекомендуется использовать для массивов и объектов, которые могут иметь унаследованные свойства. Вместо этого лучше применять методы, специально предназначенные для работы с массивами.
Вот пример кода с использованием forEach
, который более безопасен и понятен:
validation_messages.forEach(function(o) {
do_something_with(o.your_name);
do_something_else_with(o.your_msg);
});
Этот код будет выполнять те же действия, что и исходный, но с меньшим риском случайной обработки унаследованных свойств. Если validation_messages
не является массивом, вам следует использовать методы, которые могут работать с объектами, например, Object.keys()
в комбинации с forEach
:
Object.keys(validation_messages).forEach(function(k) {
var o = validation_messages[k];
do_something_with(o.your_name);
do_something_else_with(o.your_msg);
});
Таким образом, вы сможете избежать проблем, связанных с методом for...in
, и сделать код более безопасным и читаемым.
Как перебрать или перечислить объекты в JavaScript?
Итерация через свойства объекта
JavaScript замыкания внутри циклов — простой практический пример
Цикл по массиву в JavaScript
Как создать диалог с кнопками "Ок" и "Отмена"