10

Читаю про карты (Map) и не могу сообразить чем они отличаться от объектов, может вопрос странный, но я только начала изучать JavaScript и мне не сообразить - они ведь похожи, ведь так?

Это одно и тоже, или как?

1

2 ответа 2

19
+100

Структура данных 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]"

Карты сохраняют порядок при добавлении новых элементов (см. пример консоли выше).


А их использование требует чуть большего количества памяти.

1
  • Карты перебираемы прямо "из коробки" ну объекты тоже можно перебрать так же как и карты. Я так и не понял отличие. Оба они отлично перебираемы после entries
    – Demon __
    31 янв 2021 в 19:25
7

Если я не ошибаюсь, есть два главных различия:

  1. Ключами у объектов могут быть только строки и символы (Symbols). При попытке использовать другие типы данных они приводятся к типу строки. У Map в качестве ключей могут быть любые типы данных, включая объекты.

  2. У объектов есть прототипное наследование. То есть некоторые ключи у них уже предустановлены в прототипах. Это может привести к путанице и даже сломать программу, если вы используете объект в роли словаря — то есть структуры данных с любыми непредсказуемыми ключами, возникающими во время исполнения программы. У Map этого нет, они всегда пусты изначально, и если добавлять к ним элементы через их API, не возникает никакого риска что-то сломать или получить непредсказуемое поведение.

Есть и другие различия. Например, объекты легче сериализовать, хранить, передавать и восстанавливать (при помощи JSON) и они лучше подходят для создания элементов с определённой логикой и поведением (у объектов есть методы и внутренняя связь между методами и данными через this). Для Map легче получать размер структуры, они поддерживают итерацию без дополнительных усилий.

2
  • 3
    второй пункт нивелируется, если использовать Object.create(null) вместо литерала объекта
    – Grundy
    29 июл 2020 в 18:07
  • Да, но тут появляется проблема эффективности (если, конечно, это имеет значение в программе). По уверениям создателей движка V8, объекты страдают при добавлении и удалении ключей после их создания, пропадает их оптимизация. Одновременно создать объект с заданным прототипом и набором свойств можно, насколько я понимаю, только с использованием Object.create() с вторым аргументом, с набором дескрипторов, и это уже существенное усложнение кода. 29 июл 2020 в 18:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.