Преобразование объекта в массив пар ключ-значение в JS

Быстрый ответ

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

const obj = { x: 1, y: 2 };
const arr = Object.entries(obj); // [['x', 1], ['y', 2]]

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

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

В JavaScript существует несколько методов преобразования объектов в массивы. Выбор метода зависит от ваших задач, особенностей объектов и способов, с помощью которых вы планируете работать с данными.

Преобразуем ключи в массив

Для получения массива пар ключ-значение можно использовать функцию Object.keys() вместе с методом map():

const obj = { x: 1, y: 2 };
const arr = Object.keys(obj).map(key => [key, obj[key]]); // [['x', 1], ['y', 2]]

Метод map() позволяет преобразовывать ключи и контролировать процесс формирования массива.

Подробнее об этом расскажет наш спикер на видео

Если ключи — это не только строки

Если вы считаете, что ключи — это исключительно строки, вот пример, который заставит вас пересмотреть это утверждение:

const obj = { "1": "one", "2": "two" };
const arr = Object.entries(obj).map(([k, v]) => [+k, v]); // [[1, 'one'], [2, 'two']]

Здесь мы сохранили исходные типы ключей.

Оптимизация использования памяти

При работе с большими объектами стоит обращать внимание на использование памяти. Object.assign() в сочетании с map() позволяет изменять массив без дополнительного расхода памяти:

let obj = { x: 1, y: 2 };
let arr = Object.keys(obj).map(key => Object.assign([], { [key]: obj[key] })); // [{ x: 1 }, { y: 2 }]

Применение техник обработки данных

JavaScript — это не только про преобразование типов, но и про оптимальное манипулирование данными. Рассмотрим несколько продвинутых приемов работы с данными.

Удаление дубликатов

Методы map() и спред-оператор отлично справляются с задачей фильтрации дубликатов:

const obj = { x: 1, y: 1, z: 2 };
const arr = Object.entries(obj).reduce((acc, [k, v]) => {
  if (!acc.find(a => a[1] === v)) acc.push([k, v]);
  return acc;
}, []); // [['x', 1], ['z', 2]]

Агрегация и математические операции

Для агрегирования значений или выполнения математических операций над ними:

const obj = { x: 1, y: 2, z: 3 };
const sum = Object.values(obj).reduce((total, value) => total + value, 0); // сумма равна 6

Использование современного JavaScript

Не зря мы живем в эпоху ECMAScript 6 (ES6). Используйте современные функции, такие как Object.entries(), для написания чистого и эффективного кода.

Визуализация

Представьте, что у вас есть ящик с инструментами (🧰) — это ваш объект в JavaScript:

let toolbox = { hammer: '🔨', screwdriver: '🪛', wrench: '🔧' };

Преобразуем этот ящик в витрину (🗂) с инструментами и соответствующими метками:

let shelf = Object.entries(toolbox);

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

🗂: [
      ['hammer', '🔨'],
      ['screwdriver', '🪛'],
      ['wrench', '🔧']
    ]

Подобно элементам нашего массива, каждый инструмент на витрине сопровождается его символом.

Преобразование завершено!

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

При обработке и управлении данными крайне важно выбирать наиболее эффективные методы преобразования.

Методы обработки данных

При преобразовании в массивы открываются методы массивов, такие как sort, filter и reduce, которые можно использовать для дальнейшего анализа данных и реализации сложных функций.

Сохранение последовательности и уникальности

Когда важны последовательность и уникальность ключей, можно применять разнообразные способы маппинга и фильтрации, чтобы сохранить целостность данных на протяжении всего процесса.

Полезные материалы

1. Object.entries() – JavaScript | MDN
2. Map и Set
3. Метод Array entries() – JavaScript
4. Структуры данных: Объекты и Массивы :: Проницательный JavaScript
5. Object.keys() – JavaScript | MDN
6. ECMAScript 2017
7. Учебник | DigitalOcean