Читаю про карты (Map) и не могу сообразить чем они отличаться от объектов, может вопрос странный, но я только начала изучать JavaScript и мне не сообразить - они ведь похожи, ведь так?
Это одно и тоже, или как?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЧитаю про карты (Map) и не могу сообразить чем они отличаться от объектов, может вопрос странный, но я только начала изучать JavaScript и мне не сообразить - они ведь похожи, ведь так?
Это одно и тоже, или как?
Структура данных Map похожа на объект, но имеет несколько ключевых отличий.
Рассмотрим подробнее, создав из объекта простую карту:
const object = {
email: "example@gmail.com",
url: "https://example.com"
}
const entries = Object.entries(object)
console.log(entries)
// [ ["email", "example@gmail.com"], ["url", "https://example.com"] ]
const map = new Map(entries)
console.log(map)
// Map { "email" => "example@gmail.com", "url" => "https://example.com" }
Карты перебираемы прямо "из коробки", для них определен протокол перебора, поэтому мы можем делать так:
for (let entry of map) {
console.log(entry)
// ["email", "example@gmail.com"]
// ["url", "https://example.com"]
}
и нам даже не нужно отдельно применять метод entries() к map, так как он будет применен по умолчанию.
Если воспользоваться деструктуризацией, то переборка становиться еще удобнее:
for (let [key, value] of map) {
console.log(key, value)
// email, example@gmail.com
// url, https://example.com
}
только по ключам:
for (let key of map.keys()) {
console.log(key)
// email
// url
}
только по значениям:
for (let value of map.values()) {
console.log(value)
// example@gmail.com
// https://example.com
}
У карт присутствую удобные встроенные методы и свойства для работы с ними, например такие как size, который позволяет узнать размер конкретной карты:
const size = map.size
console.log(size)
// 2
метод get() вернет нужное значения по ключу или undefined, если такого ключа нет в карте:
const email = map.get("email")
console.log(email)
// example@gmail.com
const address = map.get("address")
console.log(address)
// undefined
метод set(), для изменения или добавления новой пары:
map.set("email", "example@yandex.ru")
console.log(map.get("email"))
// example@yandex.ru
map.set("country", "Russia")
console.log(map.get("country"))
// Russia
console.log(map.size)
// 3
а методом has() можно проверить нужный ключ на наличие:
const hasEmail = map.has("email")
console.log(hasEmail)
// true
const hasAddress = map.has("address")
console.log(hasAddress)
// false
полный список методов можно посмотреть здесь.
Ключ в картах может быть не только строкой или символом (начиная с ECMAScript 2015), а вообще любым типом данных:
map.set(undefined, undefined)
map.set(NaN, NaN)
map.set(false, true)
map.set(object, "мой ключ это объект")
console.log(map)
// Map {
// "email" => "example@yandex.ru",
// "url" => "https://example.com",
// "country" => "Russia",
// undefined => undefined,
// NaN => NaN,
// false => true,
// { email: "example@gmail.com", url: "https://example.com" } => "мой ключ это объект"
// }
т.е если мы захотим получить значение по ключу object, то нам нужно будет передать в get() тот же объект:
const objectValue = map.get(object)
console.log(objectValue)
// мой ключ это объект
Воспользуемся методом класса Object fromEntries() что бы превратить нашу карту обратно в объект:
const mapToObject = Object.fromEntries(map)
console.log(mapToObject)
// {
// email: "example@yandex.ru",
// url: "https://example.com",
// country: "Russia",
// undefined: undefined,
// NaN: NaN,
// false: true,
// "[object Object]": "мой ключ это объект"
// }
// JavaScript попытался привести последний ключ к строке
// но поскольку он являлся объектом то мы получили "[object Object]"
Карты сохраняют порядок при добавлении новых элементов (см. пример консоли выше).
А их использование требует чуть большего количества памяти.
entries
Если я не ошибаюсь, есть два главных различия:
Ключами у объектов могут быть только строки и символы (Symbols). При попытке использовать другие типы данных они приводятся к типу строки. У Map в качестве ключей могут быть любые типы данных, включая объекты.
У объектов есть прототипное наследование. То есть некоторые ключи у них уже предустановлены в прототипах. Это может привести к путанице и даже сломать программу, если вы используете объект в роли словаря — то есть структуры данных с любыми непредсказуемыми ключами, возникающими во время исполнения программы. У Map этого нет, они всегда пусты изначально, и если добавлять к ним элементы через их API, не возникает никакого риска что-то сломать или получить непредсказуемое поведение.
Есть и другие различия. Например, объекты легче сериализовать, хранить, передавать и восстанавливать (при помощи JSON) и они лучше подходят для создания элементов с определённой логикой и поведением (у объектов есть методы и внутренняя связь между методами и данными через this). Для Map легче получать размер структуры, они поддерживают итерацию без дополнительных усилий.
Object.create(null)
вместо литерала объекта
Object.create()
с вторым аргументом, с набором дескрипторов, и это уже существенное усложнение кода.
29 июл 2020 в 18:24