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

Перебор объекта в JavaScript кажется простой задачей, пока не упираешься в различие между собственными свойствами, цепочкой прототипов и разными стандартными API вроде Object.keys, Object.values и Object.entries.

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

• Цикл for in
• Object.keys
• Object.values
• Object.entries
• Object getOwnPropertyNames

Цикл 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.values;
• Object.entries;
• Object getOwnPropertyNames.

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