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

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

Да, в современных JavaScript порядок элементов в объекте Map сохраняется. Это одно из ключевых отличий Map от обычного объекта (Object).

Спецификация ECMAScript

Согласно спецификации ECMAScript (начиная с ES2015), Map:

• Сохраняет порядок вставки ключей.
• При итерации (через for...of, forEach(), keys(), values(), entries()) элементы возвращаются в том порядке, в котором они были добавлены.

const map = new Map();
map.set('z', 1);
map.set('a', III);
map.set('m', 2);

// Итерация вернёт элементы в порядке вставки
for (const [key, value] of map) {
  console.log(key, value); // 'z' 1, 'a' 3, 'm' 2
}

// Методы keys(), values(), entries() также сохраняют порядок
console.log([...map.keys()]);   // ['z', 'a', 'm']
console.log([...map.values()]); // [1, 3, 2]

Сравнение с Object

Детали поведения Map

1. Порядок сохраняется при любых операциях:

   const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
   
   // Изменение значения не влияет на порядок
   map.set('b', 99);
   
   // Удаление и повторное добавление меняет порядок — элемент перемещается в конец
   map.delete('a');
   map.set('a', 100);
   
   console.log([...map.keys()]); // ['b', 'c', 'a'] (a переместился в конец)
   

2. В отличие от Object:

   • В Object порядок итерации сложнее: сначала целочисленные ключи (в числовом порядке), затем строковые (в порядке добавления), затем символьные (в порядке добавления).
   • Map не делает таких различий — все ключи равны в порядке итерации.

Практическое применение

Сохранение порядка делает Map идеальным для:

• Кэшей с учётом порядка использования (LRU-кэши).
• Очередей или списков, где важен порядок.
• Логирования событий с временными метками.

// Пример: LRU1-cache с использованием порядка Map
class LRUCache {
  constructor(capacity) {
    this.capacity = capacity;
    this.cache = new Map();
  }
  
  get(key) {
    if (!this.cache.has(key)) return -1;
    const value = this.cache.get(key);
    // Обновляем порядок: удаляем и вставляем заново
    this.cache.delete(key);
    this.cache.set(key, value);
    return value;
  }
  
  put(key, value) {
    if (this.cache.has(key)) {
      this.cache.delete(key);
    } else if (this.cache.size >= this.capacity) {
      // Удаляем самый старый элемент (первый в итерации)
      const oldestKey = this.cache.keys().next().value;
      this.cache.delete(oldestKey);
    }
    this.cache.set(key, value);
  }
}

Исключения и нюансы

• Не стоит полагаться на порядок в кросс-браузерном коде для старых браузеров, которые не полностью соответствуют ES2015+.
• WeakMap не сохраняет порядок, так как не является итерируемым.
• При сериализации Map в JSON (через JSON.stringify()) порядок теряется, так как Map преобразуется в объект.

Вывод

Да, Map гарантированно сохраняет порядок вставки элементов при итерации, что является его важным преимуществом перед обычными объектами. Это поведение стандартизировано в спецификации ECMAScript и поддерживается всеми современными движками JavaScript. Использование Map предпочтительно, когда порядок элементов имеет значение, или когда нужны не-строковые ключи.