Чем отличается Map от обычного объекта в JavaScript?

Разница между Map и обычным объектом в JavaScript

Map и обычный объект - это два разных способа хранить данные в виде пар ключ-значение. Они имеют существенные различия.

Обычный объект (Object)

Обычный объект - это базовая структура данных в JavaScript:

const user = {
  name: "Иван",
  age: 30,
  email: "ivan@example.com"
};

console.log(user.name);        // "Иван"
console.log(user["age"]);      // 30

user.phone = "+7-999-123-45-67";

delete user.email;

Map - новая коллекция данных

Map - это встроенный объект для хранения пар ключ-значение:

const map = new Map();

map.set("name", "Иван");
map.set("age", 30);
map.set("email", "ivan@example.com");

console.log(map.get("name"));      // "Иван"
console.log(map.get("age"));       // 30

console.log(map.has("email"));     // true

map.delete("email");

console.log(map.size);                  // 2

Основные различия

1. Тип ключей

Объект: Ключи всегда строки или Symbol:

const obj = {};
obj[1] = "значение";
obj[true] = "значение";
obj[{}] = "значение";

console.log(obj[1]);           // "значение"
console.log(obj["1"]);      // "значение"
console.log(typeof Object.keys(obj)[0]); // "string"

Map: Ключи могут быть любого типа:

const map = new Map();
map.set(1, "число");
map.set("1", "строка");
map.set(true, "булево");
map.set({}, "объект");
map.set(() => {}, "функция");

console.log(map.get(1));               // "число"
console.log(map.get("1"));         // "строка"
console.log(map.get(true));            // "булево"

2. Производительность

Объект: Оптимизирован для частых операций доступа:

const obj = {};
obj.prop = "value";
const value = obj.prop;
if (obj.prop !== undefined) { }

Map: Оптимизирован для частых добавлений/удалений:

const map = new Map();
map.set("key", "value");
const value = map.get("key");
if (map.has("key")) { }

3. Наследование и прототипы

Объект: Имеет прототипную цепочку:

const obj = { a: 1 };

console.log(obj.toString());           // [object Object]
console.log(obj.hasOwnProperty("a"));  // true
console.log(obj.a);                    // 1

Map: Не наследует из Object.prototype:

const map = new Map([["a", 1]]);

console.log(map.toString());           // [object Map]
console.log(map.hasOwnProperty("a"));   // false
console.log(map.get("a"));             // 1

4. Размер и перебор

Объект: Нужно подсчитывать ключи:

const obj = { a: 1, b: 2, c: 3 };

console.log(Object.keys(obj).length);  // 3

for (const key in obj) {
  console.log(key, obj[key]);
}

Map: Встроенное свойство size:

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

console.log(map.size);                 // 3

for (const [key, value] of map) {
  console.log(key, value);
}

for (const value of map.values()) {
  console.log(value);
}

for (const key of map.keys()) {
  console.log(key);
}

map.forEach((value, key) => {
  console.log(key, value);
});

5. Сохранение порядка

Объект: Порядок может быть непредсказуемым:

const obj = {};
obj[3] = "три";
obj["a"] = "a";
obj[1] = "один";
obj[2] = "два";

for (const key in obj) {
  console.log(key);
}

Map: Сохраняет порядок вставки:

const map = new Map();
map.set(3, "три");
map.set("a", "a");
map.set(1, "один");
map.set(2, "два");

for (const [key, value] of map) {
  console.log(key, value);
}

Таблица сравнения

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

Кэш с произвольными ключами

const obj1 = { id: 1 };
const obj2 = { id: 1 };

// С объектом - оба становятся строкой
const cache = {};
cache[obj1] = "результат";
cache[obj2] = "результат";  // Перезаписывает!

// С Map - разные ключи
const mapCache = new Map();
mapCache.set(obj1, "результат");
mapCache.set(obj2, "результат");  // Разные значения

Подсчёт встреч

const words = ["hello", "world", "hello", "map"];

// С объектом
const objCount = {};
for (const word of words) {
  objCount[word] = (objCount[word] || 0) + 1;
}

// С Map
const mapCount = new Map();
for (const word of words) {
  mapCount.set(word, (mapCount.get(word) || 0) + 1);
}

Когда что использовать

Используйте объект когда:

• Работаете с JSON (API ответы)
• Ключи - это строки или Symbol
• Нужна простая структура данных
• Работаете с дольф-старым кодом

Используйте Map когда:

• Ключи - произвольные значения
• Часто добавляете/удаляете пары
• Нужен размер (map.size)
• Нужно сохранить порядок вставки
• Работаете с кэшами или графами

Итог

Map - это более мощный инструмент для работы с коллекциями пар ключ-значение, особенно когда нужны произвольные типы ключей. Объект лучше для структурирования данных и работы с JSON. В современном JavaScript рекомендуется предпочитать Map, где это имеет смысл.