Хотя объекты {}
исторически использовались как ассоциативные массивы (ключ-значение), у Map
есть ряд преимуществ, которые делают его более удобным в большинстве случаев.
В объектах {}
ключи всегда автоматически приводятся к строке.
const obj = {};
const key1 = {};
const key2 = {};
obj[key1] = "value1";
obj[key2] = "value2";
console.log(obj); // { '[object Object]': 'value2' }
console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]")
Пример с
Map
: const map = new Map();
map.set(key1, "value1");
map.set(key2, "value2");
console.log(map.get(key1)); // "value1"
console.log(map.get(key2)); // "value2"
В объекте
{}
порядок ключей не гарантируется (особенно для числовых ключей). const obj = { 2: "two", 1: "one", 3: "three" };
console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!)
Пример с
Map
const map = new Map();
map.set(2, "two");
map.set(1, "one");
map.set(3, "three");
console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)
Объекты
{}
оптимизированы для хранения структуры данных, но операции delete
и Object.keys(obj).length
могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки.Разница в скорости
В
Map
операции .set()
, .get()
, .delete()
выполняются быстрее.В объекте
{}
delete obj[key]
может работать медленнее, так как JavaScript оптимизирует объекты для других целей.Объект
{}
не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length
.const map = new Map();
map.set("a", 1);
map.set("b", 2);
console.log(map.size); // 2
console.log(map.has("a")); // true
console.log(map.delete("b")); // true (удалит "b")
В объекте
{}
const obj = { a: 1, b: 2 };
console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())
console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис)
delete obj.b; // Удаление ключа
В объекте
{}
могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.const obj = {};
console.log(obj.toString); // [Function: toString] (унаследованное свойство!)
console.log(obj["toString"]); // [Function: toString] (может вызвать баги)
Чтобы обойти это, приходится делать так
const obj = Object.create(null); // Теперь у объекта нет прототипа
obj.toString = "custom";
console.log(obj.toString); // "custom"
В
Map
таких проблем нетconst map = new Map();
map.set("toString", "custom");
console.log(map.get("toString")); // "custom" (никаких багов!)
Ставь 👍 и забирай 📚 Базу знаний