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 — это преобразовать объект в массив одним из приведенных выше способов. А потом нужно будет пройтись по массиву любимым циклом, в общем, работать как с обычным массивом.

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

JSX. Что это за расширение, где и для чего оно используется
JavaScript

JSX. Что это за расширение, где и для чего оно используется

Консоль JavaScript: определение, как вывести, команды и итог
JavaScript

Консоль JavaScript: определение, как вывести, команды и итог

Все про уязвимости JavaScript: как их обнаружить и устранить
JavaScript

Все про уязвимости JavaScript: как их обнаружить и устранить

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

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

×