Object.entries + Map против for: парсинг плоского JSON в группы за 5 строк кода

[hannadev]

API часто кидает плоский JSON - сплошной массив объектов без группировки. Хочешь по категориям разложить - пишешь for на 50 строк с if-ами и push. А можно Object.entries + Map за 3-5 строк. Это решает проблему раздутого кода и утечек в логике.

Зачем это нужно: группировка ускоряет рендер списков, фильтры и поиск. Без нее фронт тонет в nested циклах. Покажу, как парсить заказы по статусам или товары по брендам - чисто, без костылей.

Плоский JSON из API: типичная яма

API возвращает массив заказов: каждый объект с id, status, amount, date. statuses - это ‘pending’, ‘shipped’, ‘delivered’. Хочешь сгруппировать по статусам для дашборда. Ручной for: проверяешь status, пушить в массив группы, нуляешь счетчики. Легко накосячить - забыть else, дубли push или off-by-one в индексах.

Пример данных:

const orders = [
  {id:1, status:'pending', amount:100},
  {id:2, status:'shipped', amount:200},
  {id:3, status:'pending', amount:150}
];

В итоге groups = {pending: , shipped: […]}. Но код разрастается: if для каждого status, else для default. А если статусов 10? Boilerplate душит.

• Проблема 1: Ручной for не масштабируется - добавь статус, допиши if.
• Проблема 2: Легко сломать порядок вставки или пропустить элемент.
• Проблема 3: Нет size или быстрого .has() - приходится Object.keys().length.

Подход	Строк кода	Масштабируемость	Ошибки
for + if	30-50	Плохо	Часто
Map	3-5	Отлично	Минимально

Object.entries: почему это твой новый друг

Object.entries(obj) выдает [[key, value]] - готовый массив для Map или reduce. Из плоского объекта в итерируемый формат за 1 строку. Идеально для JSON.parse, где ключи строковые, а значения - любые.

Пример: у тебя конфиг {theme:‘dark’, lang:‘ru’}. entries дает [[‘theme’,‘dark’], [‘lang’,‘ru’]]. Теперь forEach или map - как по масиву. Без entries пришлось бы for…in с hasOwnProperty - легаси 2010-х.

Ключевой трюк: new Map(Object.entries(flatObj)). Map сохраняет порядок вставки, ключи любого типа (не только строки, как в объекте).

• entries vs keys: keys() - только ключи, теряешь значения. entries - полная пара.
• Нюанс: entries не рекурсивно - только own properties, прототипы игнорит.
• Когда entries выигрывает: группировка, где ключ - динамический (userId, timestamp).

const config = {theme:'dark', lang:'ru'};
const mapConfig = new Map(Object.entries(config));
console.log(mapConfig.get('theme')); // 'dark' - O(1)

Map для группировки: 5 строк вместо 50

Берем плоский массив orders. Цель: groups = new Map(), где ключ - status, значение - массив заказов. Ручной способ: forEach с if status === ‘pending’ ? groups.pending.push : else if…

С Map: orders.forEach(order => { const group = groups.get(order.status) || []; group.push(order); groups.set(order.status, group); }). 4 строки. Или one-liner с reduce.

Полный код:

const groups = orders.reduce((acc, order) => {
  const group = acc.get(order.status) || [];
  group.push(order);
  acc.set(order.status, group);
  return acc;
}, new Map());

Map.get/set - быстрее Object[key], особенно с нестроковыми ключами.

• Преимущество 1: Map сохраняет порядок вставки - первый pending будет первым в массиве.
• Преимущество 2: .size вместо Object.keys().length - короче, быстрее.
• Преимущество 3: .delete(key) - чисто удалить группу без undefined.

Операция	Object	Map
Получить размер	Object.keys(obj).length	obj.size
Проверить ключ	‘key’ in obj	obj.has(‘key’)
Удалить	delete obj.key	obj.delete(‘key’)
Итерация	for…in	for…of obj.entries()

Таблица сравнения: for vs entries + Map

Ручной for хорош для 2-3 групп. Добавь ‘cancelled’, ‘refunded’ - код мутирует в монстра. entries + Map - динамично: статусы из данных, без hardcode.

Бенчмарк на 10k items: for ~15ms, Map ~12ms. Разница в реальном app - в читаемости и багфиксах. Map не ломается при NaN ключах или Symbol.

Реальный кейс - парсинг логов API: group by endpoint, count errors.

• For: if (item.status === ‘error’) errors++; else if…
• Map трюк: new Map().set(endpoint, (map.get(endpoint)||0) +1 )
• fromEntries обратно в obj: Object.fromEntries(groups) - для localStorage.

Сценарий	Ручной for	Map-вариант	Выигрыш
5 статусов	40 строк	4 строки	x10 короче
Динамические ключи	Переписать	Работает	Без багов
Фильтр + group	Nested loops	chain .filter().reduce	Читаемо

Когда Map под капотом ломается

Map жрет памяти под хеш-таблицу - для 1M items подумай WeakMap. Но для фронта (до 50k) - ок. Не сериализуется в JSON напрямую - stringify(Map) = {}. Фикс: Object.fromEntries(map.entries()).

Итерация: for (let [status, list] of groups) renderList(list). Порядок как в данных - не как Object.keys (enum order).

Подведем: entries + Map - антидот boilerplate в парсинге. Осталось за кадром: группировка по нескольким полям (composite key как ${cat}-${brand}) и интеграция с React/Vue keys. Подумай, где в твоем коде висит for на 50 строк - замени, сэкономь час дебага.