Фото NASA на Unsplash
Этот пост изначально появился на https://areinmeyer.dev
Цель в этом году было изучить больше уголков и дождей JavaScript. Я никогда не использовал карты в производственном кодексе и не совсем не сталкивался с ними до недавнего времени. Карты могут не казаться очень полезными выше и за пределами объектов, но есть несколько ключевых функций, которые могут сделать карты полезными в некоторых обстоятельствах. Карты были введены в ES6 и иметь поддержку в самых последних браузерах.
Создание карты
Карты могут быть созданы в 2 разных способах. Либо позвоните пустую конструктор
const thisIsEmpty = new Map() console.log(thisIsEmpty.size) // 0
Или вы можете предварительно заполнить карту с другой карты или массива.
const fromArray = new Map([["a","foo"], ["b","foo"], ["c","foo"]])
console.log(fromArray)
// Map { 'a' => 'foo', 'b' => 'foo', 'c' => 'foo' }
Содержание карты
Карты получают и устанавливают значения с получить или Установить Способ на карте экземпляра.
let list = new Map();
list.set("foo", 123); // Map { 'foo' => 123 }
list.size; //1
list.get("foo"); //123
Хорошая особенность – это есть метод. есть Позволяет код проверить, существует ли свойство на карте и возвращает неопределенный Если это нет. Это может быть полезно, когда у вас есть карта, которая может не всегда иметь ключевые ключи. Синтаксис кажется легким, чтобы понять, затем цепочки проверки на объекте.
let list = new Map();
list.set("foo", 123);
list.has("foo") //true
list.has("bar") //false
let obj = { "foo": 123}
if (obj && obj.foo) {
console.log(obj.foo)
}
console.log(obj.bar) //undefined
Карты могут использовать любое значение для ключа, например функцию, объект или любые примитивные, в отличие от объектов, которые разрешают только строку или символ. Это означает, что ключи карты могут выглядеть так:
const myFunc = () => {
return 42;
}
let list = new Map();
list.set(myFunc, "This is a function!");
list.get(myFunc) //"This is a function!"
Насколько это полезно? Честно говоря, имея функции или объекты в качестве ключей, не кажутся ужасно распространенными использованием случая. Существуют некоторые интересные приложения для хранения отсчетов или некоторых кэшированных значений в качестве значения карты, где объект является ключом. Затем вы можете хранить информацию о объекте и ассоциировать данные, но не нужно хранить данные в самом объекте. Это позволяет легко связаться с фактическим объектом. Если данные, связанные с объектом, становится ненужным, его можно легко удалить, не пытаясь изменить объект.
Но в этом случае есть Слабый Скорее всего, тем лучше вариант для предыдущего случая. Объекты получают сборщик мусора после того, как они не могут быть вне охвата и больше не могут ссылаться. Но карты хранятся на своих ссылках объектов и поэтому объекты, которые являются ключом карты, не собираются мусором. Слабыми помещениями ведут себя так же, как карты, за исключением их удержания на объектах, которые используются в качестве клавиш, являются слабыми (отсюда и именем!), Итак, допустить сборку мусора для удаления ссылки на объект из слабого пола. Это означает, что размер вашего слабака может неожиданно измениться, если ваша клавиша объекта внезапно получает сбор мусора.
Хорошим примером приведенного выше сценария будет отслеживать список пользователей, занимающихся чатом и отображая количество пользователей где-то на экране. По мере того, как пользователи входят в чат, вы можете добавить объект пользователя в качестве ключа и, возможно, временное псевдоним для слабого управления, используя Размер Свойство для отображения активных пользователей в чате. Поскольку пользователь покидает чат, предполагая, что они оставляют приложение, слабое значение позволит выпустить пользовательский объект и Размер будет обновлять автоматически. Это не может быть лучшей реализацией, но пример того, как можно использовать карты/слабые карты с объектами в качестве клавиш.
Размер карты
Карты имеют недвижимость Размер Это сообщат о количестве ключей на карте. Поэтому определение количества предметов на карте всегда просто одна строка кода.
let mapsize = new Map([['a',1], ['b',2],['c', 3]]) console.log(mapsize.size) //3
Это отличная особенность карт. Массивы имеют Длина Собственность, которая также является одноклассником. Но объекты не имеют встроенного метода для определения длины или размера объекта и должны быть рассчитаны вручную. Он все еще может быть в одну строку, но он включает в себя сначала получить ключи от объекта, а затем определить длину массива клавиш.
let objsize = {'a': 1, 'b': 2, 'c': 3}
console.log(Object.keys(objsize).length) //3
Удержание заказов и итерация
Карты сохраняют свой порядок вставки, поэтому извлеките список клавиш, значений или записей всегда детерминированы. Объекты могут во многом вести себя так же, как и последние несколько лет, в зависимости от используемого вами двигателя JS, но это только если у вас есть такие же типы ключей в вашем объекте. Если объект содержит смесь строк и символов, нет никакой гарантии сохранения порядка, и на самом деле у вас есть 2 отдельных метода для возврата ключей.
const obj = {}
let sym = Symbol('sym')
let bol = Symbol('bol')
obj[sym] = 'first'
obj[bol] = 'second'
obj.foo = 'third'
obj.bar = 'fourth'
let stringKeys = Object.keys(obj) //[ 'foo', 'bar' ]
let symKeys = Object.getOwnPropertySymbols(obj) //[ Symbol(sym), Symbol(bol) ]
//But with Maps...
const mixedMap = new Map()
mixedMap.set(sym, 'first')
mixedMap.set("foo", "second")
mixedMap.set(bol, "third")
mixedMap.set("bar", "fourth")
mixedMap.forEach((value, key) => console.log(key, value))
//Output
//Symbol(sym) first
//foo second
//Symbol(bol) third
//bar fourth
Как видно в предыдущем примере, вы можете повторять записи с Foreach Способ, который принимает функцию обратного вызова в качестве аргумента, что позволяет как ключа и значение в качестве параметров. Обратите внимание, что значение является первым параметром в обратном вызове. Foreach Возвращает пустоту, так к сожалению, это не может быть привязано к любым другим функциям. Клавиши () и Значения () Методы также присутствуют и ведут себя много так же, как и связанные с ними методы объекта.
Другой способ повторения – использовать Записи метод. Используя предыдущий смешанный снова мы могли бы использовать заявление нравится:
for( const entry of mixedMap.entries()) {
console.log(entry)
}
//Output
//Symbol(sym) first
//foo second
//Symbol(bol) third
//bar fourth
Другой (!) Способ итерата использует итератор по умолчанию.
for( const [key, value] of mixedMap) {
console.log(key, value)
}
Мои личные предпочтения в либо Foreach Или ITERATOR по умолчанию с контуром для цикла. Я думаю, что они сбалансированы, а также шаблоны, которые распознаются на основе других методов объекта и массива. Надежный порядок не всегда может быть проблемой, но когда оно есть, кажется, что карты предоставляют единственный способ иметь уверенность в этом порядке сохранения введения, особенно если есть вероятность того, что ключи будут иметь разные типы данных.
Объекты могут быть переданы только сначала извлечение клавиш (или, возможно, значений) объекта и итерации на тех. Если ваша структура данных является массивом объектов или вложенного массива, у вас также есть возможность использовать карта Способ, который встроен с массивами.
Представление
MDN упоминает, что карты имеют лучшую производительность над объектами в вставке и удалении. В наивный, но простой тест, это оказалось. Бег 1000 000 вставок и удалений на одной карте и объекте, я видел, как сообщалось о том времени.
| Вставка | 149 | 150 |
| Удаление | 167 | 486 |
Вот код, который я использовал. Не стесняйтесь указывать на любые недостатки! Хотя существуют некоторые различия во времени в размере, удаление нельзя объяснить таймером моей машины или незначительных различий. Я пробежал его несколько раз, и каждый прогон сообщил примерно в то же время, в нескольких миллисекундах каждого. Временные времена часто были незначительными, но удаление всегда было значительным разницей.
Недостатки
Вы не можете карта или Фильтр карта. Для этого вам придется сначала преобразовать карту в массив или объект, а затем использовать встроенные функции. Результирующий массив или объект затем можно повернуть обратно на карту, если это необходимо. Каким бы ни был отмечен прирост, хотя, вероятно, теряются при совершении преобразования взад и вперед от карты до объекта или массива. Карты имеют накладные расходы на обучение слишком, скорее всего, так как оно является более новой особенностью языка, которая не может быть широко принята командами.
Зачем использовать карты над объектами?
Самый большой рисунок для использования карт над объектом – это преимущество использования чего-то вроде объекта или даты в качестве ключа вместо того, чтобы прибегать к строке или символу. Возможность быстро и легко видеть размер карты без вызова функции также полезна. есть Метод, связанный с картой, – это хороший интерфейс для проверки, если ключ присутствует на карте. Если вы выполняете свободное количество удалений в объектах, карты могут также быть более исполнительными.
Реальность – это карты, вероятно, не то, что будет использоваться каждый день большинством разработчиков, поэтому определенно есть психическое надлование введения его в общую среду. Встроенные порталы для карты и проверки имущества есть Полезно во многих целях использования, поэтому я определенно буду тянуться к картам теперь, когда я знаю больше о них. Это также отличный способ поделиться знаниями с командой и представить их этой новой структуре данных.
Оригинал: “https://dev.to/areinmeyer/javascript-maps-59bj”