Главная Категории Контакты Поиск

Как перебрать свойства объекта в JavaScript

Различные способы переборки свойств объекта в JavaScript.

JavaScript·08.01.2020·читать 2 мин 🤓·Автор: Alexey Myzgin

Цикл 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

Website, name & logo
Copyright © 2022. Alex Myzgin