← Назад к вопросам

Как применить методы массива к Map?

1.8 Middle🔥 301 комментариев
#JavaScript Core

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Применение методов массива к Map

Map в JavaScript - это отдельная структура данных, но её можно преобразовать в массив для использования методов Array.prototype.

1. Преобразование Map в массив

const map = new Map([
  ['name', 'John'],
  ['age', 30],
  ['city', 'New York']
]);

// Способ 1: Array.from() с entries()
const entries = Array.from(map.entries());
console.log(entries);
// [['name', 'John'], ['age', 30], ['city', 'New York']]

// Способ 2: Spread оператор
const spreadEntries = [...map];
console.log(spreadEntries);
// То же самое

// Способ 3: Array.from() с keys() или values()
const keys = Array.from(map.keys());
const values = Array.from(map.values());

2. Использование методов массива

Теперь с массивом можно использовать все методы:

const map = new Map([
  ['user1', { name: 'John', score: 100 }],
  ['user2', { name: 'Jane', score: 95 }],
  ['user3', { name: 'Bob', score: 110 }]
]);

// map() - преобразовать значения
const userNames = Array.from(map.values()).map(user => user.name);
console.log(userNames); // ['John', 'Jane', 'Bob']

// filter() - отфильтровать
const highScores = [...map].filter(([key, user]) => user.score > 100);
console.log(highScores);
// [['user3', { name: 'Bob', score: 110 }]]

// find() - найти первый элемент
const topUser = Array.from(map.values()).find(user => user.score > 105);
console.log(topUser); // { name: 'Bob', score: 110 }

// sort() - отсортировать
const sortedByScore = [...map]
  .sort(([, a], [, b]) => b.score - a.score)
  .map(([key, user]) => user);
console.log(sortedByScore);
// [{ name: 'Bob', score: 110 }, { name: 'John', score: 100 }, ...]

// reduce() - свернуть
const totalScore = Array.from(map.values())
  .reduce((sum, user) => sum + user.score, 0);
console.log(totalScore); // 305

3. Работа с ключами и значениями

const map = new Map([
  [1, 'apple'],
  [2, 'banana'],
  [3, 'orange']
]);

// Получить только ключи
const ids = Array.from(map.keys());
console.log(ids); // [1, 2, 3]

// Получить только значения
const fruits = [...map.values()];
console.log(fruits); // ['apple', 'banana', 'orange']

// forEach - встроенный метод Map (не нужно преобразовывать)
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 1: apple
// 2: banana
// 3: orange

4. Практический пример: кеш с операциями

class Cache {
  constructor() {
    this.data = new Map();
  }

  set(key, value) {
    this.data.set(key, value);
  }

  get(key) {
    return this.data.get(key);
  }

  // Получить все значения, отсортированные по дате
  getRecent(limit = 5) {
    return [...this.data.values()]
      .sort((a, b) => b.timestamp - a.timestamp)
      .slice(0, limit);
  }

  // Поиск по условию
  search(predicate) {
    return [...this.data.entries()]
      .filter(([key, value]) => predicate(value))
      .map(([key, value]) => ({ key, value }));
  }

  // Очистить старые значения
  removeOlderThan(timestamp) {
    [...this.data.entries()]
      .filter(([, value]) => value.timestamp < timestamp)
      .forEach(([key]) => this.data.delete(key));
  }

  // Получить размер кеша
  size() {
    return this.data.size;
  }
}

const cache = new Cache();
cache.set('user1', { id: 1, name: 'John', timestamp: Date.now() - 5000 });
cache.set('user2', { id: 2, name: 'Jane', timestamp: Date.now() });

const recent = cache.getRecent(1);
console.log(recent); // [{ id: 2, name: 'Jane', ... }]

5. Трансформирование Map в новый Map

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

// Увеличить все значения в 2 раза
const doubled = new Map(
  [...map].map(([key, value]) => [key, value * 2])
);
console.log(doubled); // Map { 'a' => 2, 'b' => 4, 'c' => 6 }

// Фильтровать Map
const filtered = new Map(
  [...map].filter(([key, value]) => value > 1)
);
console.log(filtered); // Map { 'b' => 2, 'c' => 3 }

6. GroupBy с Map (эмуляция)

const users = [
  { id: 1, role: 'admin' },
  { id: 2, role: 'user' },
  { id: 3, role: 'admin' },
  { id: 4, role: 'user' }
];

// Группировать пользователей по role
const byRole = users.reduce((map, user) => {
  if (!map.has(user.role)) {
    map.set(user.role, []);
  }
  map.get(user.role).push(user);
  return map;
}, new Map());

console.log(byRole);
// Map {
//   'admin' => [{id: 1, ...}, {id: 3, ...}],
//   'user' => [{id: 2, ...}, {id: 4, ...}]
// }

// Или с Array.group() (новый метод)
const grouped = Object.groupBy(users, user => user.role);

7. Когда использовать Map vs Array

// Используй Map если:
// - Нужны быстрый lookup по ключу (O(1))
// - Ключи могут быть не строками
// - Частые добавления/удаления
const userMap = new Map();
const user = userMap.get(userId); // O(1)

// Используй Array если:
// - Нужны методы map/filter/reduce
// - Нужен порядок
// - Нужна обработка с функциональным стилем
const filtered = array.filter(x => x > 5);

// Комбинируй:
const userMap = new Map();
const activeUsers = [...userMap.values()].filter(u => u.active);

Важные моменты

  1. Map.prototype.forEach() - встроенный метод, не требует преобразования
  2. Spread оператор [...map] - эквивалент Array.from(map.entries())
  3. Производительность - преобразование в массив имеет стоимость O(n)
  4. Immutability - преобразование создаёт новый массив, исходная Map не меняется
  5. TypeScript - Map имеет генерики: Map<string, User>

Оптимальный подход: используй Map для хранения и поиска, преобразуй в массив только когда нужны методы array.

Как применить методы массива к Map? | PrepBro