Итерация через свойства объекта
Проблема:
Я изучаю 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 ответ(ов)
Всем привет! Мы уже в 2019 году, и у нас нет времени на долгие наборы текста... Давайте использовать новый крутой синтаксис ECMAScript 2016:
Object.keys(obj).forEach(e => console.log(`key=${e} value=${obj[e]}`));
Этот код позволяет пройтись по всем ключам объекта obj
и вывести их на консоль вместе с соответствующими значениями. Использование стрелочных функций и шаблонных строк делает его более лаконичным и читаемым.
Цикл 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
работает наоборот, так как он итерируется по значениям коллекции, а не по ключам.
Надеюсь, это поможет!
В jQuery вы можете сделать это следующим образом:
$.each(obj, function(key, value) {
alert(key + ": " + value);
});
В этом коде мы используем метод $.each()
, чтобы пройтись по всем свойствам объекта obj
. В качестве аргументов key
и value
передаются имя текущего свойства и его значение соответственно. В данном примере для каждого свойства выводится всплывающее окно с его именем и значением.
Для перевода кода на русский и стилизации под формат ответа на 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
Надеюсь, это поможет вам лучше понять, как работает данный код! Если у вас есть дополнительные вопросы, не стесняйтесь задавать их.
Как удалить свойство из объекта JavaScript?
Цикл по массиву в JavaScript
Как получить доступ к вложенным объектам, массивам или JSON и обработать их?
Как удалить все дубликаты из массива объектов?
Почему null является объектом и в чем разница между null и undefined?