Преобразование массива объектов в хеш-мап в JavaScript

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

Для преобразования массива объектов в хеш-карту, индексируемую по определенному атрибуту, используйте метод reduce():

const toHashMap = (arr, keyField) =>
  arr.reduce((accumulator, item) => ({...accumulator, [item[keyField]]: item}), {});

const myHashMap = toHashMap([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }], 'id');

// `myHashMap`: `{ 1: { id: 1, name: 'Alice' }, 2: { id: 2, name: 'Bob' } }`

Один метод, множество подходов

Сжатие кода с помощью функций ES6

Можно сделать ваш код более лаконичным и понятным с использованием Object.fromEntries() и map():

const arrToMap = Object.fromEntries(arr.map(obj => [obj.id, obj]));

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

Сохранение порядка элементов с помощью Map

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

const toEs6Map = new Map(arr.map(item => [item.id, item]));

Динамические ключи для универсальности

Придайте гибкости вашему коду, используя функции формирования ключей:

const toDynamicKeyMap = (arr, keyFn) => arr.reduce(
  (accumulator, item) => ({...accumulator, [keyFn(item)]: item}),
  {}
);
const dynamicMap = toDynamicKeyMap(arr, item => item.id);

Методы прототипа массива для многократного использования

Расширьте возможности стандартных массивов, добавив метод для создания хеш-карты:

Array.prototype.toHashMap = function (keyField) {
  return this.reduce((accumulator, item) => ({...accumulator, [item[keyField]]: item}), {});
};
const arrMap = arr.toHashMap('id');

Сокращение кода с помощью lodash

Ускорьте работу с кодом, используя библиотеку lodash и ее функцию keyBy:

const _ = require('lodash');
const lodashMap = _.keyBy(arr, 'id');

Учет производительности при работе с большими данными

При работе с большими объемами данных, старайтесь избегать оператора расширения для сохранения производительности.

Совместимость браузеров

Прежде чем использовать современные возможности, убедитесь, что ваш код корректно работает во всех требуемых браузерах.

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

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

Книги до: [📘(ID1), 📗(ID2), 📙(ID3)]

Вы их преобразуете в цифровую коллекцию, используя хеш-карту:

const digitalLibrary = {
  ID1: 📘,
  ID2: 📗,
  ID3: 📙
};

Теперь книги можно быстро искать по их ID:

Ищете 📘? Просто обращайтесь к `digitalLibrary['ID1']`.

Эффективность поиска с помощью хеш-карт неоспорима.

Мудрость карты

Типы в TypeScript для структурированности

Если вы используете TypeScript, можно определить типы для большей ясности кода:

type Book = { id: number; title: string };
type BookMap = { [key: number]: Book };
const toHashMap = (arr: Book[], key: keyof Book): BookMap => {/* тот же код */};

Избегание мутабельности с помощью Object.assign

Используйте Object.assign для сохранения исходных объектов без изменений и поддержания целостности вашего состояния:

const nonMutableMap = items.reduce((accumulator, item) => Object.assign(accumulator, {[item.id]: item}), {});

Преимущества и недостатки использования Map

Выбор между Map и объектами:

- **Map**: Сохраняет порядок вставки элементов, удобен для итераций.
- **Object**: Лучше подходит для работы с JSON и более популярен.

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

1. Основы работы с объектами в JavaScript – MDN — базовые понятия о работе с объектами в JavaScript.
2. Array.prototype.reduce() – MDN — полное описание метода reduce.
3. Map – MDN — описание применения Map для хранения пар "ключ-значение".
4. Object.keys() – MDN — варианты получения ключей объекта.
5. Map против Object в JavaScript – Stack Overflow — обсуждение преимуществ и недостатков использования Map и объектов.
6. Выражения стрелочных функций – MDN — объяснение синтаксиса стрелочных функций.
7. JSON.stringify() – MDN — метод преобразования объектов в строки JSON, который часто используется при создании хеш-карт.