Object.values ​​и Object.entries в JavaScript

Development, Java | Amber | Комментировать запись

Конструктор объектов JavaScript 2017 (ES8) включает два метода: Object.values() и Object.entries().

В данном мануале мы рассмотрим, как работают эти методы.

Требования

Чтобы следовать этому руководству, нужно иметь базовое знакомство с объектами JavaScript. Узнать больше по этой теме можно в руководстве Объекты в JavaScript.

Также вы должны уметь пользоваться консолью JavaScript в браузере (в этом руководстве мы используем консоль Javascript в веб-браузере Chrome). Чтобы узнать больше, читайте материал Использование консоли разработчика JavaScript.

Как работает метод Object.values()

Object.values() принимает объект и возвращает массив значений. Откройте консоль JavaScript в любом веб-браузере и создайте объект со следующими строками:

const person = {
  firstName: 'James',
  lastName: 'Bond',
  occupation: 'Classified'
};

Создав объект, вы можете получить его значения с помощью метода Object.values(). Передайте свой объект в качестве аргумента в метод, чтобы вывести значения на консоль:

console.log(Object.values(person));

Вы получите такой вывод:

(3) ['James', 'Bond', 'Classified']

Вы также можете сохранить его в переменной, чтобы иметь удобный доступ к значениям:

const personValues = Object.values(person);

personValues;

Примечание: Object.values() не следует цепочке прототипов и перебирает только те значения, которые находятся непосредственно в предоставленном объекте. Он не возвращает неисчислимые значения, такие как функции.

Читайте также: Прототипы и наследование в JavaScript

Как работает метод Object.entries()

Подобно Objects.values(), метод Object.entries() возвращает вложенный массив с парами «ключ-значение». Давайте используем созданный ранее объект person и попробуем вывести как ключ, так и значение, передав объект в качестве аргумента в этот метод:

const person = {
  firstName: 'James',
  lastName: 'Bond',
  occupation: 'Classified'
};

console.log(Object.entries(person));

Вы получите:

(3) [Array(2), Array(2), Array(2)]
    0: (2) ['firstName', 'James']
    1: (2) ['lastName', 'Bond']
    2: (2) ['occupation', 'Classified']
    length: 3

Также вы можете использовать цикл .forEach() вместе с деструктуризацией массива для перебора пар «ключ-значение» и вывода значений на консоль:

Object.entries(person).forEach(([key, value]) => console.log(`${key}: ${value}`));

Вы получите:

firstName: James
  lastName: Bond
  occupation: Classified

Теперь вы знаете, как с помощью этого метода получить доступ к парам ключ-значение и вывести их на консоль.

Заключение

В этом руководстве мы вкратце рассмотрели пару методов конструктора объектов JavaScript. Если вы хотите узнать больше о других методах объектов, прочитайте мануал Методы объектов в JavaScript.