18

Как перебрать обычный объект JavaScript с объектами в качестве элементов?

9

Как можно пройтись по всем элементам объекта в 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 ответ(ов)

22

Конечно! Вот перевод вашего кода на русский язык в стиле ответа на 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() обеспечивают, что будут обрабатываться только собственные свойства, игнорируя унаследованные от прототипа.

9

В 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

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

3

Проблема с этим кодом:

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, что позволяет обойтись только свойствами, непосредственно принадлежащими объекту, и избежать нежелательного перебора свойств из прототипа.

0

Если вы используете рекурсию, вы можете возвращать свойства объектов любой глубины. Вот пример функции 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 принимает объект и рекурсивно проходит через все его свойства. Если текущее свойство является объектом, функция вызывает сама себя, чтобы углубиться в этот объект. В результате вы получаете строку, в которой перечислены все свойства, включая вложенные объекты, отформатированные в виде удобного для чтения формата.

0

Ваш код перебирает объекты в массиве 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, и сделать код более безопасным и читаемым.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь