Если нужна упорядоченность, лучше использовать New Map или объект

Map vs Object для упорядоченного хранения данных

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

Гарантия порядка

Важный момент: оба варианта сохраняют порядок вставки в современном JavaScript (ES2015+):

// Объект сохраняет порядок
const obj = {};
obj.c = 3;
obj.a = 1;
obj.b = 2;
console.log(Object.keys(obj)); // ['c', 'a', 'b']

// Map сохраняет порядок
const map = new Map();
map.set('c', 3);
map.set('a', 1);
map.set('b', 2);
console.log([...map.keys()]); // ['c', 'a', 'b']

Сравнение

1. Тип ключей

// Объект - только строки и Symbol
const obj = {};
obj[1] = 'один';       // Преобразуется в '1'
obj[true] = 'истина';  // Преобразуется в 'true'
obj[{ id: 1 }] = 'объект'; // Преобразуется в '[object Object]'

// Map - любой тип данных
const map = new Map();
map.set(1, 'один');           // number
map.set(true, 'истина');      // boolean
map.set({ id: 1 }, 'объект'); // объект как ключ
map.set([1, 2], 'массив');    // массив как ключ

2. Проверка наличия ключа

// Объект - потенциальные проблемы
const obj = { constructor: 'foo' };
console.log('constructor' in obj);     // true (наследуется!)
console.log(obj.hasOwnProperty('constructor')); // false

// Map - надёжный способ
const map = new Map();
map.set('constructor', 'foo');
console.log(map.has('constructor')); // true

3. Производительность операций

// Объект - O(1) для get/set, но может быть медленнее
const obj = {};
for (let i = 0; i < 1000000; i++) {
  obj[i] = i;
}

// Map - оптимизирован для часто изменяющихся данных
const map = new Map();
for (let i = 0; i < 1000000; i++) {
  map.set(i, i);
}

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

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

// 1. Ключи не строковые
const userMap = new Map();
const user1 = { id: 1 };
const user2 = { id: 2 };
userMap.set(user1, { name: 'Alice', role: 'admin' });
userMap.set(user2, { name: 'Bob', role: 'user' });

// 2. Часто добавляешь/удаляешь элементы
const cache = new Map();
cache.set('key1', 'value1');
cache.delete('key1');

// 3. Нужен .size (размер коллекции)
const items = new Map();
items.set('a', 1);
console.log(items.size); // 1 - быстрое получение размера

// 4. Нужны встроенные методы итерации
const data = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

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

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

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

Используй Object когда:

// 1. Ключи всегда строки
const user = {
  name: 'Alice',
  email: 'alice@example.com',
  age: 30
};

// 2. Используешь деструктуризацию
const { name, email } = user;

// 3. Нужна JSON сериализация
const json = JSON.stringify(user);

// 4. Статичные данные (не часто меняются)
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
};

// 5. Передача через функции как именованные параметры
function createUser({ name, email, age }: UserData) {
  // ...
}

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

Пример 1: Кэш с объектами как ключами (только Map)

class Cache {
  #cache = new Map();

  set(key, value) {
    this.#cache.set(key, value);
  }

  get(key) {
    return this.#cache.get(key);
  }

  has(key) {
    return this.#cache.has(key);
  }
}

const cache = new Cache();
const obj = { id: 1 };
cache.set(obj, 'data');
console.log(cache.has(obj)); // true
console.log(cache.get(obj)); // 'data'

Пример 2: Конфигурация (используй Object)

interface Config {
  apiUrl: string;
  timeout: number;
  retries: number;
}

const config: Config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
};

// JSON сериализация работает
const json = JSON.stringify(config);

Пример 3: Состояние в React (Object)

interface AppState {
  user: User | null;
  isLoading: boolean;
  error: Error | null;
}

const [state, setState] = useState<AppState>({
  user: null,
  isLoading: false,
  error: null
});

// Обновление
setState(prev => ({
  ...prev,
  user: newUser
}));

Пример 4: Коллекция с быстрой фильтрацией (Map)

class UserRepository {
  #users = new Map();

  add(id, user) {
    this.#users.set(id, user);
  }

  findById(id) {
    return this.#users.get(id);
  }

  getAll() {
    return Array.from(this.#users.values());
  }

  count() {
    return this.#users.size; // O(1)
  }

  remove(id) {
    return this.#users.delete(id);
  }
}

JSON и сериализация

Важное ограничение Map:

// Object легко сериализуется в JSON
const obj = { a: 1, b: 2 };
const json = JSON.stringify(obj); // '{"a":1,"b":2}'

// Map НЕ сериализуется напрямую
const map = new Map([['a', 1], ['b', 2]]);
const json = JSON.stringify(map); // '{}' - ПУСТО!

// Нужно преобразовать
const json = JSON.stringify(Array.from(map.entries()));
// '[[["a",1],["b",2]]]'

Итоговая рекомендация