Object.entries(), keys(), values()

Методы Object.entries(), keys() и values() предназначены для работы с простыми объектами, результатом будет получение массива данных:

Object.entries() - возвращает свойства объекта в формате [key, value];

Object.keys() - возвращает имена свойств;

Object.values() - возвращает значения свойств.

Рассмотрим каждый метод отдельно, а также задачи, которые можно решить с помощью них.

Object.keys()

Для примера возьмем список ежемесячных расходов expenses и получим с помощью Object.keys() массив с категориями трат, который запишем в array.

  let expenses  = {
      food: 30000,
      rent: 20000,
      gym: 5000,
      education: 15000,
      other: 25000,
  }
  
  let array = Object.keys(expenses) // ['food', 'rent', 'gym', 'education', 'other']

На основе полученных данных можно подсчитать количество категорий.

  Object.keys(expenses).length // 5

Или написать проверку на наличие данных.

  Object.keys(expenses).length === 0 // false

Object.values()

С помощью Object.values() и метода reduce() подсчитаем бюджет.

  let expenses  = {
      food: 30000,
      rent: 20000,
      gym: 5000,
      education: 15000,
      other: 25000,
  }
  
  let array = Object.values(expenses) // [30000, 20000, 5000, 15000, 25000]
  
  array.reduce((budget, value) => {
      return budget = budget + value
  }) // 95000

Для начала в array записали все расходы, далее с помощью reduce(), который работает с массивами, подсчитали сумму элементов.

Object.entries()

Если в предыдущих случаях методы возвращали либо имена свойств либо их значения, с помощью Object.entries() мы получим и то и другое.

  let expenses  = {
      food: 30000,
      rent: 20000,
      gym: 5000,
      education: 15000,
      other: 25000,
  }
  
  let array = Object.entries(expenses) // [['food', 30000], ['rent', 20000], ['gym', 5000], ['education', 15000], ['other', 25000]]

С массивами работать проще, например, можно отсортировать имена свойств по алфавиту и трансформировать всё это обратно в объект.

  let sortArray = array.sort((a, b) => a[0].localeCompare(b[0]))
  
  Object.fromEntries(sortArray) // {education: 15000, food: 30000, gym: 5000, other: 25000, rent: 20000}

C помощью методов sort() и localeCompare() мы сортируем элементы массива по алфавиту по категориям трат. Метод fromEntries() преобразует sortArray в объект.

Итого

Массивы предоставляют больше возможностей для работы с данными чем объекты, таким образом методы Object.entries(), keys() и values() это отличные инструменты для переупаковки данных и дальнейшей их обработки.