JavaScript

Перебор объектов в JavaScript: что это и зачем нужно

Lorem ipsum dolor

Перебор объекта в JS — это способ обойти все имеющиеся объекты и получить список их свойств. Особенно обход объектов полезен в тех случаях, когда нужно работать не с индивидуальными свойствами отдельных объектов, а с общими.

Перебор объекта в JS (JavaScript) выполняется при помощи цикла «for...in». Этот цикл отлично «отрабатывает», однако имеет один недостаток. Каждое найденное свойство потом необходимо проверять на принадлежность свойству объекта. Такая операция делается при помощи метода «hasOwnProperty». Однако с внедрением новшеств в JavaScript появились новые методы, чтобы осуществить перебор объекта.

Перебор объекта в JS

Перебор объекта по новому методу также осуществляется при помощи цикла «for...in». Однако перед его применением нужно преобразовать объект в массив.

Объект преобразуется в массив одним из трех методов:

  1. «Object.keys». Этот метод преобразует объект в массив, который будет содержать в себе только ключевые свойства объекта.

  2. «Object.values». Этот метод преобразует объект в массив, который будет содержать все свойства объекта.

  3. «Object.entries». Этот метод преобразует объект в «массив из массивов». Вложенный массив будет содержать 2 компонента: ключевое свойство объекта и его значение.

Преобразование объекта в массив: пример

После преобразования объекта в массив по массиву можно пройтись привычным циклом — в этом нет ничего сложного. Как выглядит само преобразование смотрите чуть ниже.

Object.keys:

const myFruits = {

  banana: 29,

  grapefruit: 18,

  prune: 55,

}

 

const keys = Object.keys(myFruits)

console.log(keys)  // Результат будет [banana, grapefruit, prune]

 

Object.values:

const myFruits = {

  banana: 29,

  grapefruit: 18,

  prune: 55,

}

 

const values = Object.values(myFruits)

console.log(values)  // Результат будет [29, 18, 55]

 

Object.entries:

const myFruits = {

  banana: 29,

  grapefruit: 18,

  prune: 55,

}

 

const entries = Object.entries(myFruits)

console.log(entries)

//  Результат будет[ [banana, 29], [grapefruit, 18], [prune, 55] ]

 

Заключение

Самый удобный способ осуществить перебор объекта в JS — это преобразовать объект в массив одним из приведенных выше способов. А потом нужно будет пройтись по массиву любимым циклом, в общем, работать как с обычным массивом.

Схожие статьи

Учебный курс по React, часть 13: компоненты, основанные на классах
JavaScript

Учебный курс по React, часть 13: компоненты, основанные на классах

Vue JS: функции, события и жизненный цикл. Базовая терминология
JavaScript

Vue JS: функции, события и жизненный цикл. Базовая терминология

Реализация паттерн Singleton Java (Одиночка): подводные камни
JavaScript

Реализация паттерн Singleton Java (Одиночка): подводные камни

Графический редактор в Java: создание и работа с примерами
JavaScript

Графический редактор в Java: создание и работа с примерами