23

Итерация через свойства объекта

19

Проблема:

Я изучаю JavaScript и столкнулся с некоторыми вопросами о том, как работает цикл for...in, когда я пытаюсь перебрать свойства объекта.

Вот мой код:

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

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

Вопрос заключается в следующем: как переменная propt представляет собой свойства объекта? Это ведь не встроенный метод или свойство. Почему она показывает каждое свойство в объекте?

Буду признателен за объяснение механизма работы for...in в данном контексте.

4 ответ(ов)

3

Всем привет! Мы уже в 2019 году, и у нас нет времени на долгие наборы текста... Давайте использовать новый крутой синтаксис ECMAScript 2016:

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

Этот код позволяет пройтись по всем ключам объекта obj и вывести их на консоль вместе с соответствующими значениями. Использование стрелочных функций и шаблонных строк делает его более лаконичным и читаемым.

0

Цикл for...in представляет каждое свойство объекта, и по сути он похож на обычный цикл for. В вашем примере, вы определяете переменную propt в цикле for...in следующим образом:

for (var propt in obj) {
    alert(propt + ': ' + obj[propt]);
}

Цикл for...in проходит по перечисляемым свойствам объекта. Переменная, которую вы определяете в цикле, будет изменяться каждый раз, когда цикл переходит к следующему свойству. В этой конструкции переменная propt итерируется по ключам, а значение obj[propt] соответствует значению этого ключа. Например:

for (var propt in obj) {
    console.log(propt); // выводит имя свойства
    console.log(obj[propt]); // выводит "Simon"
}

Вы можете увидеть, как переменная propt отличается от её значения в объекте. В свою очередь, цикл for...of работает наоборот, так как он итерируется по значениям коллекции, а не по ключам.

Надеюсь, это поможет!

0

В jQuery вы можете сделать это следующим образом:

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

В этом коде мы используем метод $.each(), чтобы пройтись по всем свойствам объекта obj. В качестве аргументов key и value передаются имя текущего свойства и его значение соответственно. В данном примере для каждого свойства выводится всплывающее окно с его именем и значением.

0

Для перевода кода на русский и стилизации под формат ответа на StackOverflow, вот пример:

let obj = {"a": 3, "b": 2, "6": "a"};

Object.keys(obj).forEach((item) => {
    console.log("item", obj[item]);
});

// Вывод в консоль будет:
// item 3  // для ключа "a"
// item 2  // для ключа "b"
// item "a" // для ключа "6"

Этот код создает объект obj с тремя свойствами: "a" со значением 3, "b" со значением 2 и "6" со значением "a". Затем с помощью Object.keys мы получаем массив ключей объекта и применяем метод forEach, чтобы пройтись по каждому ключу и вывести соответствующее значение.

Итоговый вывод будет таким:

item 3
item 2
item a

Надеюсь, это поможет вам лучше понять, как работает данный код! Если у вас есть дополнительные вопросы, не стесняйтесь задавать их.

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