34. Object.keys, values, entries, fromEntries

JavaScript: Object.keys, values, entries, fromEntries - Ключи, Значения, Пары и Обратно

Объекты в JavaScript - это мощный инструмент для хранения данных. Но как нам получить доступ к ключам, значениям или парам ключ-значение? Для этого и существуют методы Object.keys(), Object.values(), Object.entries() и Object.fromEntries(). Давайте разберемся!

Object.keys()

Этот метод возвращает массив, содержащий все ключи объекта.

const user = {
  name: "Alice",
  age: 30,
  city: "New York"
};

const keys = Object.keys(user);
console.log(keys); // Output: ["name", "age", "city"]

В этом примере Object.keys(user) вернул массив ключей объекта user.

Object.values()

Метод Object.values() возвращает массив, содержащий все значения объекта.

const user = {
  name: "Alice",
  age: 30,
  city: "New York"
};

const values = Object.values(user);
console.log(values); // Output: ["Alice", 30, "New York"]

Здесь Object.values(user) вернул массив значений объекта user.

Object.entries()

Метод Object.entries() возвращает массив массивов, где каждый внутренний массив содержит пару [ключ, значение] объекта.

const user = {
  name: "Alice",
  age: 30,
  city: "New York"
};

const entries = Object.entries(user);
console.log(entries); // Output: [["name", "Alice"], ["age", 30], ["city", "New York"]]

Object.entries(user) вернул массив пар ключ-значение из объекта user.

Object.fromEntries()

Этот метод преобразует массив пар [ключ, значение] обратно в объект. Это как обратная операция для Object.entries().

const entries = [["name", "Alice"], ["age", 30], ["city", "New York"]];

const user = Object.fromEntries(entries);
console.log(user); // Output: {name: "Alice", age: 30, city: "New York"}

В этом примере мы преобразовали массив entries обратно в объект user.

Практические примеры кода

1. Перебор ключей объекта:

   const product = {
     name: "Laptop",
     price: 1200,
     inStock: true
   };
   
   for (const key of Object.keys(product)) {
     console.log(`Key: ${key}, Value: ${product[key]}`);
   }
   // Output:
   // Key: name, Value: Laptop
   // Key: price, Value: 1200
   // Key: inStock, Value: true

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

   const params = {
     name: "product",
     category: "electronics",
     price: 100
   };
   
   const queryString = Object.entries(params)
     .map(([key, value]) => `${key}=${value}`)
     .join("&");
   
   console.log(queryString); // Output: name=product&category=electronics&price=100

Жизненный пример

Представьте, что вы разрабатываете веб-приложение, которое отображает данные о пользователях. Данные о каждом пользователе хранятся в виде объекта. Вам нужно отобразить эти данные в таблице.

Используя Object.keys() и Object.values(), вы можете легко получить ключи (заголовки столбцов) и значения (данные для каждой строки) для создания HTML-таблицы. Многие фреймворки и библиотеки, такие как React или Vue, используют эти методы для динамического отображения данных, полученных из API. Например, при работе с формами часто данные из формы (которые хранятся в виде ключ-значение пар) нужно преобразовать в JSON объект для отправки на сервер. Object.fromEntries() может быть полезен в этом случае.

Ключевые моменты

• Object.keys() возвращает массив ключей объекта.
• Object.values() возвращает массив значений объекта.
• Object.entries() возвращает массив пар [ключ, значение] объекта.
• Object.fromEntries() преобразует массив пар [ключ, значение] обратно в объект.
• Эти методы полезны для итерации по объектам, преобразования данных и динамического отображения информации в веб-приложениях.

Интерактивный пример