Цикл for in
Цикл for in
помогает получать на каждой итерации ключ объекта, используя который, мы получаем доступ к значению объекта.
Проблема с циклом for in
заключается в том, что он перебирает свойства в цепочке Prototype
. Когда мы перебираем объект с помощью цикла for in
, нам нужно проверить, принадлежит ли свойство этому объекту. Можно сделать это при помощи hasOwnProperty
.
const obj = {
width: 300,
height: 200,
title: "Menu"
}
for (let key in obj) {
if(obj.hasOwnProperty(key)){
console.log(`${key} : ${obj[key]}`)
}
}
// width : 300
// height : 200
// title : Menu
Также, есть другие способы перебрать объект, которые не требуют полагаться на for in
и hasOwnProperty
. Для начала нужно преобразовать объект в массив, а затем перебирать сам массив.
Мы можем преобразовать объект в массив четермя способами:
Object.keys
Метод Object.keys()
принимает объект в качестве аргумента и возвращает массив с заданными ключами объекта.
Итерируя метод Object.keys
с методом forEach
, мы получаем доступ к паре ключ-значение объекта.
Например:
const obj = {
width: 300,
height: 200,
title: "Menu"
}
const keys = Object.keys(obj);
// ["width", "height", "title"]
keys.forEach(key => {
console.log(`${key} : ${obj[key]}`);
});
// width : 300
// height : 200
// title : Menu
Object.values
Метод Object.values()
принимает объект в качестве аргумента и возвращает массив с заданными значениями объекта.
Используя данный метод, мы получаем доступ только к значениям объекта.
Например:
const obj = {
width: 300,
height: 200,
title: "Menu"
}
const values = Object.values(obj);
// [300, 200, "Menu"]
values.forEach(value => {
console.log(value);
});
// 300
// 200
// Menu
Object.entries
Метод Object.entries()
принимает объект в качестве аргумента и возвращает массив с массивами, которые являются парами [key, value]
данного объекта.
Например:
const obj = {
width: 300,
height: 200,
title: "Menu"
}
const entries = Object.entries(obj);
// [["width", 300], ["height", 200], ["title", "Menu"]]
entries.forEach(([key, value]) => {
console.log(`${key}: ${value}`)
})
// width : 300
// height : 200
// title : Menu
Так как Object.entries
возвращает массив массивов, то мы деструктурируем массив в его ключ и свойство.
Object getOwnPropertyNames
Метод Object.getOwnPropertyNames также принимает объект в качестве аргумента и возвращает массив строк, соответствующих перечисляемым и неперечисляемым свойствам, найденным непосредственно в объекте.
Например:
const obj = {
width: 300,
height: 200,
title: "Menu"
}
const getOwnPropertyNames = Object.getOwnPropertyNames(obj);
// ["width", "height", "title"]
getOwnPropertyNames.forEach(key => {
console.log(`${key} : ${obj[key]}`);
})
// width : 300
// height : 200
// title : Menu