Как нанести на интерактивную карту сто и более адресов. Google Карты — sdelano.media

Сколько времени уйдет, чтобы внести на карту 100 точек? А если адресов больше тысячи? С сервисом Google Карты вы потратите на эту работу не более пяти минут.

Сервис Google Карты позволяет за пару кликов добавить на карту большое количество адресов. Но для этого придется создать файл Excel с этими адресами.

Для примера, чтобы показать, как создавать интерактивную карту в сервисе, используем программу капитального ремонта (Липецкой области). Та таблица, которая размещена на официальном сайте регионального Фонда капремонта, не подойдет для загрузки. Поэтому:

• Создайте файл Excel.
• Выбирайте в скаченном документе нужные столбцы, выделяйте нужное количество строк, копируйте.
• Возвращайтесь в свой файл Excel, вставьте скопированные данные.
• Аналогичным образом добавьте другие столбцы.

Открывайте Google Карты. Нажимайте на бургер (значок меню) вверху слева (где поисковая строка).

В появившемся списке выбирайте «Мои места». Переходите во вкладку «Карты». Нажимайте «Создать карту».

Назовите карту. Нажмите «Импорт». Всплывет окно для загрузки файла. Загрузите подготовленный документ Excel. В появившемся окне выбирайте наименование столбца, где указаны адреса. Нажимайте «Продолжить».

Возможно, сервис не распознает все адреса из файла. Откройте таблицу в сервисе и поправьте адреса. Иногда для этого достаточно убрать лишние слова, например, «городской округ».

Карта готова.

Маркеры можно выделить разным цветом, например, чтобы показать распределение адресов по году проведения ремонта или году постройки дома (применительно к карте капитального ремонта).

Нажимайте «Стандартный стиль». Выбирайте по какому критерию будете выделять маркеры. Вы можете оставить их цветными или одним цветом с градиентной разбивкой. Выделите «Диапазоны».

Каждому маркеру можно добавить ярлык — информация, которая будет отображаться рядом с маркером. Для этого кликните «Нет ярлыка» и выбирайте параметр, который будет отображаться.

Маркеры можно выделить не только цветом, но и видом значка маркера.

Карта готова. Как ее добавить на сайт? Нажимайте «Поделиться». По умолчанию карта доступна только вам. Кликайте «Изменить».

Включите доступ для всех и укажите: другие пользователи могут только просматривать карту или еще и редактировать ее. Нажимайте «Сохранить» и «Готово».

Чтобы получить код для вставки на сайт, нажимайте на три точки рядом с названием карты и «Добавить на сайт». В появившемся окне копируйте код.

Результат на сайте будет выглядеть так:

В каких случаях следует воспользоваться возможностью Google Карты загружать множество адресов парой кликов? Например, пермский портал 59.ru в прошлом году создавали карту загруженности школ. В городе более 100 образовательных учреждений и все их журналист на карту заносил вручную. Или студент из Владимира создает интерактивную карту застройки города и тоже каждый адрес заносит отдельно.

Как работать с контурной картой

Контурная карта – это рабочая тетрадь по географии

Для того, чтобы правильно организовать работу с контурной картой, которая поможет быстрее освоить знание географической номенклатуры, необходимо знать правила её заполнения. Контурная карта – это рабочая тетрадь по географии, заполняй её аккуратно и правильно.

Шаг1

Практические и самостоятельные работы на контурной карте выполняются с использованием карт атласа и учебника. Кроме атласа и учебника приготовьте цветные карандаши, ластик, линейку.

Шаг 2

Внимательно прочитайте в учебнике или в тетради задание по оформлению контурной карты. Первую контурную карту можно заполнить простым карандашом. Последующие карты нужно оформлять шариковой ручкой с синей или чёрной пастой.

Шаг 3

В верхней части карты напишите её название. Контурная карта должна иметь чёткое лаконичное название, соответствующее тематике самой карты.

Шаг 4

В верхнем правом углу карты напишите ваши инициалы и класс.

Шаг 5

В графе «Условные знаки» нарисуйте условные знаки, характерные для тематики этой контурной карты.

Шаг 6

Подпишите названия материков, морей или океанов, расположенных в поле карты. При нанесении на контурную карту географических объектов используйте линии градусной сетки, речные системы, береговую линию и границы государств (это нужно для ориентира и удобства, а также для правильности нанесения объектов).

Шаг 7

Подпишите параллельно верхней и нижней границе контурной карты географические названия объектов, которые не привязаны строго к объекту. Названия географических объектов старайтесь писать вдоль параллелей или меридианов, это поможет оформить карту более аккуратно.

Шаг 8

Подпишите названия площадных объектов. Они не должны выходить за границы объекта (исключения составляют лишь те из них, которые недостаточно велики по размерам, для обозначения надписи в масштабе данной контурной карты. В таком случае, надпись может быть расположена рядом с данным объектом).

Шаг 9

Подпишите географические объекты, но если их названия не помещаются на контурной карте, то они могут быть обозначены внемасштабными знаками (цифрами, буквами) и их названия подписывают в графе “Условные знаки”. Тексты и названия географических объектов должны быть обязательно чёткими и хорошо читаемыми. (Лучше всего текст писать печатными буквами)

Шаг 10

Проверьте, все ли объекты вы нанесли на карту. Избегайте нанесения «лишней информации»! Не копируйте карты атласа, необходимо точно выполнять предложенные вам задания!

ПОСМЕЁМСЯ ВМЕСТЕ..

ИЛИ КАК НЕ НАДО ОФОРМЛЯТЬ КОНТУРНУЮ КАРТУ

Топонимическая карта мира http://www.redburda.ru/upload/images/mapworld.jpg

Картинки и статьи взяты из интернета

http://geo-pk19.3dn.ru/publ/13-1-0-41

http://images2.wikia.nocookie.net/__cb20100811014718/swimmer9074/images/thumb/8/86/Blank_World_map.png/800px-Blank_World_map.png

http://www. users.globalnet.co.uk/~nstead/frames/images/Maps/worldmap.gif

http://mkb-lab.com/wp-content/uploads/2011/07/%D0%BA%D0%B0%D1%80%D1%82%D0%B0_%D0%BC%D0%B8%D1%80%D0%B0.gif

http://dvbstandart.ru/image.php?aHR0cDovL2tvbnR1ci1tYXAucnUvNTQ5MTQ4X0JJR18wXzAuanBn

javascript — Как использовать мой объект как массив, используя функцию карты

Задай вопрос

спросил 2 года 5 месяцев назад

Изменено 2 года, 5 месяцев назад

Просмотрено 8к раз

 импортировать React, {useContext} из 'реагировать'
импортировать стили из './subTheme-select.module.css'
импортировать StoreContext из '../store'
константа SUB_THEME = {
  синий: «Синий»,
  желтый: «Желтый»,
  розовый: «Розовый»,
  фиолетовый: «фиолетовый»,
  оранжевый: «Апельсин»,
  зеленый: «Зеленый»
}
функция SubThemeSelect () {
  const store = useContext(StoreContext)
  возвращаться (
    
  container}>
      {SUB_THEME.map((подтема) => (
        
          <ввод
            тип = "радио"
            значение = {подтема}
            имя = {подтема}
            checked={subTheme === store.subTheme}
            onChange={(e) => store.changeSubTheme(e.target.value)}
          />
          {SUB_THEME[подтема]}
        
      ))}
    
  )
}
экспорт по умолчанию SubThemeSelect
 

Я хочу использовать SUB_THEME как массив, например [синий, желтый, розовый, фиолетовый, оранжевый, зеленый] как я могу это сделать.

Это сообщение об ошибке.

Как решить эту проблему?

• javascript
• reactjs
• array.prototype.map

2

Поскольку вы пытаетесь сопоставить объект, вам нужно использовать Object.keys, который возвращает массив ключей объектов, которые вы можете перебирать в цикле.

 Object.keys(SUB_THEME). map((ключ,индекс) => {
 const subTheme = SUB_THEME[ключ]
 возвращаться (
 
          <ввод
            тип = "радио"
            значение = {подтема}
            имя = {подтема}
            checked={subTheme === store.subTheme}
            onChange={(e) => store.changeSubTheme(e.target.value)}
          />
          {подтема}
        
  )
})
 

0

Вам нужна функция Object.keys() или Object.values ​​

 const SUB_THEME = {
  синий: «Синий»,
  желтый: «Желтый»,
  розовый: «Розовый»,
  фиолетовый: «фиолетовый»,
  оранжевый: «Апельсин»,
  зеленый: «Зеленый»
}
//это возвращает ключи
константа theme_keys = Object.keys(SUB_THEME)
//это возвращает значения
const theme_values ​​= Object.values ​​(SUB_THEME)
 

Затем вы можете сопоставить их, например,

 theme_keys.map(key => {/*code here*/})
theme_values.map(ключ => {/*код здесь*/})
 

Вы можете использовать, как показано ниже:

 Object. keys(SUB_THEME).map((key) => {
console.log(SUB_THEME[ключ]
})
 

 Object.keys(SUB_GROUPED).map(x => {
    console.log(x)
 })
 

Сначала получите ключи объекта с помощью Object.keys(SUB_THEME).

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Когда вы должны предпочесть карту объекту в JavaScript

#javascript

Опубликовано 18 июня 2022 г.

недостающее руководство по выбору между объектом и картой в JavaScript

Смотрите обсуждения на reddit

В JavaScript объекты удобны. Они позволяют нам легко группировать несколько фрагментов данных вместе. После ES6 у нас появилось новое дополнение к языку —

Map . Во многих аспектах он кажется более способным Объект с несколько корявым интерфейсом. Тем не менее, большинство людей по-прежнему тянутся к объектам, когда им нужна хеш-карта, и переключаются на использование Map только тогда, когда понимают, что ключи не могут быть просто строками для их вариантов использования. В результате, Карта остается недостаточно используемой в сегодняшнем сообществе JavaScript.

В этом посте я расскажу обо всех причинах, по которым вам следует подумать об использовании Map , и о ее характеристиках производительности с помощью тестов.

В JavaScript объект — довольно широкое понятие.

Почти всё может быть объектом, кроме двух нижних типов — null и undefined . В этом сообщении блога Object относится только к простым старым объектам, разделенным левой фигурной скобкой { и правой фигурной скобкой } .

TL;DR:#

• Используйте Объект для записей, в которых у вас есть фиксированное и конечное количество свойств/полей, известных во время создания, таких как объект конфигурации. И вообще все, что для одноразового использования.
• Используйте Карта для словарей или хэш-карт, где у вас есть переменное количество записей, с частыми обновлениями, чьи ключи могут быть неизвестны во время разработки, например, генератор событий.
• Согласно моим тестам, если только ключи не являются строками небольших целых чисел, Карта действительно более производительна , чем Объект
  по скорости вставки, удаления и итерации, и он потребляет меньше памяти чем объект тот же размер.

Почему объект

не соответствует варианту использования хеш-карты#

Вероятно, самым очевидным недостатком использования объектов для хэш-карт является то, что объекты допускают только ключи, которые являются строками и символами. Любые другие типы будут неявно преобразованы в строку с помощью метода toString .

Что еще более важно, использование объектов для хэш-карт может привести к путанице и угрозам безопасности .

Нежелательное наследование#

До ES6 единственным способом получить хеш-карту было создание пустого объекта.

Однако после создания этот объект больше не является пустым. Хотя hashMap создан с пустым литералом объекта, он автоматически наследуется от Object.prototype . Вот почему мы можем вызывать такие методы, как

hasOwnProperty , toString , конструктор на hashMap , хотя мы никогда явно не определяли эти методы для объекта.

Из-за прототипного наследования у нас теперь объединены два типа свойств: свойства, которые живут внутри самого объекта, т. е. его владеют свойствами и свойствами, которые живут в цепочке прототипов, т. е. унаследовали свойств. В результате нам нужна дополнительная проверка (например, hasOwnProperty ), чтобы убедиться, что данное свойство действительно предоставлено пользователем, а не унаследовано от прототипа.

Кроме того, из-за того, как работает механизм разрешения свойств в JavaScript, любое изменение Object.prototype во время выполнения вызовет эффект пульсации во всех объектах. Это открывает двери для атак с использованием прототипов, которые могут стать серьезной проблемой безопасности для больших приложений JavaScript.

К счастью, мы можем обойти это, используя Object.create(null) , который создает объект, который ничего не наследует от Object.prototype .

Коллизии имен#

Когда имена собственных свойств объекта конфликтуют с именами его прототипа, это нарушает ожидания и, таким образом, приводит к сбою вашей программы.

Например, у нас есть функция foo , которая принимает объект:

Существует угроза надежности в obj.hasOwnProperty(key) : учитывая, как работает механизм разрешения свойств в JavaScript, если obj содержит предоставленное пользователем свойство с тем же именем hasOwnProperty , которое затеняет Object.prototype.hasOwnProperty . В результате мы не знаем какой именно метод будет вызываться во время выполнения.

Чтобы предотвратить это, можно использовать защитное программирование. Например, мы можем «позаимствовать» «настоящий» hasOwnProperty из Object.prototype вместо:

Более коротким способом может быть вызов метода для литерала объекта, как в {}.hasOwnProperty.call(key) , однако это все еще довольно громоздко. Вот почему появился недавно добавленный статический метод Object.hasOwn .

Неоптимальная эргономика#

Объект не обеспечивает достаточную эргономику для использования в качестве хэш-карты. Многие общие задачи не могут быть выполнены интуитивно.

размер#

Объект не имеет удобного API для получения размера, то есть количества свойств. И есть нюансы, из чего состоит размер объекта:

• , если вас интересуют только строки, перечисляемые ключи, вы можете преобразовать ключи в массив с помощью Object.keys() и получить его длину .
• , если вы хотите учитывать неперечислимых строковых ключей, вам нужно использовать Object.getOwnPropertyNames , чтобы получить список ключей и получить его длину.
• , если вас интересуют ключи символов, вы можете использовать getOwnPropertySymbols , чтобы открыть ключи символов. Или вы можете использовать Reflect.ownKeys для одновременного получения как строковых ключей, так и ключей символов, независимо от того, является ли он перечислимым или нет.

Все вышеперечисленные варианты требуют сложности выполнения O(n) , так как мы должны сначала построить массив ключей, прежде чем мы сможем получить его длину.

итерация#

Перебор объектов имеет аналогичную сложность.

Мы можем использовать старый добрый для ... в цикле . Но он раскрывает унаследованные перечисляемые свойства:

Мы не можем использовать для ... of с объектом, поскольку по умолчанию он не является итерируемым, если только мы явно не определим для него метод Symbol.iterator .

Мы можем использовать Object.keys , Object.values ​​ и Object.entries , чтобы получить список перечислимых строковых ключей (или/и значений) и выполнить итерацию по нему вместо этого, что вводит дополнительный шаг с накладными расходами.

Наконец, печально известно, что порядок размещения не полностью соблюдается. В большинстве браузеров целочисленные ключи сортируются в порядке возрастания и имеют приоритет над строковыми ключами, даже если строковые ключи были вставлены до целочисленных ключей.

очистить#

Не существует простого способа удалить все свойства объекта, вы должны удалять каждое свойство одно за другим с помощью оператора delete , который, как исторически известно, работает медленно. Однако мои тесты показывают, что его производительность на самом деле не на порядок медленнее, чем Карта.прототип.удалить . Подробнее об этом позже.

проверить наличие свойства#

Наконец, мы не можем полагаться на нотацию с точкой/скобкой для проверки существования свойства, потому что само значение может быть установлено как undefined . Вместо этого мы должны использовать Object.prototype.hasOwnProperty или Object.hasOwn .

Карта для хеш-карты №

ES6 приносит нам карту . Он гораздо больше подходит для случая использования хеш-карты.

Во-первых, в отличие от Объект , который допускает только ключи, являющиеся строками и символами, Карта поддерживает ключи любого типа данных.

Однако, если вы используете Map для хранения метаданных для объектов, вам следует вместо этого использовать WeakMap , чтобы избежать утечки памяти.

Но что более важно, Map обеспечивает четкое разделение между пользовательскими и встроенными программными данными за счет дополнительного Map.prototype.get для получения записей.

Карта также обеспечивает лучшую эргономику: Карта по умолчанию является итерируемой. Это означает, что вы можете легко повторять карту с помощью for ... of и делать такие вещи, как использование вложенной деструктуризации для извлечения первой записи из карты.

В отличие от Object , Map предоставляет специальные API для различных общих задач:

• Map.prototype.has проверок существования данной записи, менее неудобно по сравнению с Object.prototype.hasOwnProperty / Object.hasOwn для объектов.
• Map.prototype.get возвращает значение, связанное с предоставленным ключом. Кому-то может показаться, что это более неуклюже, чем точечная нотация или скобочная запись объектов. Тем не менее, он обеспечивает четкое разделение между пользовательскими данными и встроенным методом.
• Map.prototype.size возвращает количество записей в карте , и это явный победитель маневров, которые вы должны выполнить, чтобы получить размер объекта. Кроме того, это намного быстрее.
• Map.prototype.clear удаляет все записи в карте , и это намного быстрее, чем оператор удаления .

Кажется, в сообществе JavaScript распространено мнение, что Map по большей части быстрее, чем Object . Есть люди, которые утверждали, что видели заметный прирост производительности при переходе с Object на Map .

Мой опыт работы с LeetCode, похоже, подтверждает это убеждение: LeetCode передает огромное количество данных в качестве тестовых примеров для вашего решения, и время ожидания истекает, если ваше решение занимает слишком много времени. Подобные вопросы истекают только в том случае, если вы используете Объект , но не на Карте .

Тем не менее, я считаю, что просто сказать, что « Карта быстрее, чем Объект », — это упрощение. Должен быть какой-то нюанс, который я хотел выяснить сам. Следовательно. Я создал небольшое приложение для запуска некоторых тестов.

Важное заявление об отказе от ответственности

Я не утверждаю, что полностью понимаю, как V8 работает под капотом для оптимизации Map , несмотря на мои многочисленные попытки прочитать сообщения в блогах и заглянуть в исходный код C++. Идеально надежный бенчмаркинг — это сложно, и большинство из нас никогда не проходило никакого обучения ни бенчмаркингу, ни интерпретации результатов. Чем больше я проводил бенчмаркинга, тем больше это напоминало историю о слепых и слоне. Так что относитесь ко всему, что я говорю здесь о производительности, с долей скептицизма. Вам нужно будет протестировать такие изменения с вашим приложением в производственной среде, чтобы точно знать, есть ли реальный прирост производительности от использования Карта с над Объектом с.

Детали реализации сравнительного анализа#

В приложении есть таблица, в которой показана скорость вставки, итерации и удаления, измеренная на Object и Map .

Производительность вставки и итерации измеряется в операциях в секунду. Я написал служебную функцию MeasureFor , которая многократно запускает целевую функцию до тех пор, пока не будет задан минимальный порог времени (т. е. продолжительность поле ввода в пользовательском интерфейсе). Он возвращает среднее количество раз, когда такая функция выполняется в секунду.

Что касается удаления, я просто собираюсь измерить время, затрачиваемое на использование оператора delete для удаления всех свойств объектов, и сравнить его со временем с Map.prototype.delete для карты того же размер. Я мог бы использовать Map.prototype.clear , но это противоречит цели тестов, поскольку я точно знаю, что это будет намного быстрее.

В этих трех операциях я уделяю больше внимания вставке, так как это наиболее распространенная операция, которую я выполняю в своей повседневной работе. Для производительности итераций трудно придумать всеохватывающие тесты, поскольку существует множество различных вариантов итераций, которые мы можем выполнить для данного объекта. Здесь я измеряю только для ... в цикле .

Здесь я использовал три типа ключей:

1. строки, напр. yekwl7caqejth7aawelo4 .
2. целочисленных строки, например. 123 .
3. числовых строк, сгенерированных Math.random().toString() , например. 0,4024025689756525 .

Все ключи генерируются случайным образом, поэтому мы не затрагиваем встроенный кэш, реализованный в V8. Я также явно преобразовываю целые и числовые ключи в строки, используя toString , прежде чем добавлять их к объектам, чтобы избежать накладных расходов на неявное приведение типов.

Наконец, перед началом теста также есть фаза прогрева продолжительностью не менее 100 мс, когда мы неоднократно создаем новые объекты и карты, которые сразу же отбрасываются.

Я поместил код в CodeSandbox, если вы хотите поиграть с ним.

Я начал с Object и Map с размером 100 свойств/записей, вплоть до 5000000, и каждый тип операций продолжал выполняться в течение 10000 мс, чтобы увидеть, как они работают друг с другом. Вот мои выводы...

Почему мы останавливаемся, когда количество записей достигает 5000000?

Потому что это примерно столько, сколько объект может получить в JavaScript. По словам @jmrk, инженера V8, активно работающего над StackOverflow, «если ключи являются строками, обычный объект становится неприемлемо медленным после ~8,3 млн элементов (для чего есть техническая причина: определенное битовое поле имеет ширину 23 бита и выбирая очень медленный запасной путь при превышении)».

строковые ключи#

Вообще говоря, когда ключи являются (нечисловыми) строками, Map превосходит Object по всем операциям.

Но нюанс в том, что когда количество записей не очень большое (до 100000), Карта в два раза быстрее Объект по скорости вставки, но по мере роста размера более 100000 разрыв в производительности начинает сокращаться.

Я сделал несколько графиков, чтобы лучше проиллюстрировать свои выводы.

На приведенном выше графике показано, как скорость вставки падает (ось Y) по мере увеличения количества записей (ось X). Однако, поскольку ось X расширяется слишком широко (от 100 до 1 000 000), трудно определить разрыв между этими двумя линиями.

Затем я использовал логарифмическую шкалу для обработки данных и построил график ниже.

Вы можете ясно сказать, что две линии сходятся.

Я сделал еще один график, показывающий, насколько быстрее Карта по сравнению с Объектом по скорости вставки. Вы можете видеть, что Карта начинает работать примерно в 2 раза быстрее, чем Объект . Затем со временем разрыв в производительности начинает сокращаться. В итоге Карта всего на 30% быстрее, поскольку размер увеличивается до 5000000.

Однако у большинства из нас никогда не будет более 1 миллиона записей в объекте или на карте. При размере в несколько сотен или тысяч записей Карта по крайней мере в два раза эффективнее, чем Объект . Следовательно, должны ли мы остановиться на этом и перейти к рефакторингу нашей кодовой базы, пойдя ва-банк на карте ?

Абсолютно нет... или, по крайней мере, не с расчетом на то, что наше приложение станет в 2 раза быстрее. Помните, что мы не исследовали другие типы ключей. Давайте посмотрим на целочисленные ключи.

целых ключей#

Причина, по которой я специально хочу запускать тесты для объектов с целочисленными ключами, заключается в том, что V8 внутренне оптимизирует свойства с целочисленным индексом и сохраняет их в отдельном массиве, к которому можно обращаться линейно и последовательно. Я не могу найти никаких ресурсов, подтверждающих, что он использует такую ​​же оптимизацию для Map s.

Давайте сначала попробуем целочисленные ключи в диапазоне [0, 1000].

Как я и ожидал, Объект превосходит Карта на этот раз. Они на 65 % быстрее карт по скорости вставки и на 16 % быстрее по скорости итерации.

Расширим диапазон так, чтобы максимальное целое число в ключах было 1200.

Кажется, теперь Map s начинают получаться немного быстрее, чем объекты для вставки и в 5 раз быстрее для итерации.

Теперь, когда мы увеличили только диапазон целочисленных ключей, а не фактический размер Object и Map . Давайте увеличим размер, чтобы увидеть, как это повлияет на производительность.

При размере 1000 свойств Object оказывается на 70% быстрее, чем Map для вставки и в 2 раза медленнее для итерации.

Я играл с кучей различных комбинаций Object / Map размеров и целочисленных диапазонов ключей и не смог найти четкую закономерность. Но общая тенденция, которую я вижу, заключается в том, что по мере роста размера, когда ключами являются относительно небольшие целые числа, объекты могут быть более производительными, чем .0039 Карта s с точки зрения вставки всегда примерно такая же, как и удаление, и в 4 или 5 раз медленнее итерации. Порог максимального целочисленного ключа, при котором объекты начинают вставляться медленнее, растет с размером объектов. Например, если в объекте всего 100 записей, порог равен 1200; когда у него 10000 записей, порог составляет около 24000.

цифровые клавиши#

Наконец, давайте взглянем на последний тип клавиш — цифровые клавиши.

Технически ранее целочисленные клавиши также являются числовыми. Здесь числовые клавиши конкретно относятся к числовым строкам, сгенерированным Math.random().toString() .

Результаты аналогичны случаям со строкой и ключом: Map s запускаются намного быстрее, чем объекты (в 2 раза быстрее для вставки и удаления, в 4-5 раз быстрее для итерации), но дельта становится меньше по мере увеличения размер.

Как насчет вложенных объектов/карт?

Вы могли заметить, что я говорил только о плоских объектах и ​​картах только с одной глубиной. Я добавил немного глубины, но обнаружил, что характеристики производительности остаются в основном одинаковыми, пока общее количество записей остается неизменным, независимо от того, сколько у нас уровней вложенности.

Например, если ширина равна 100, а глубина равна 3, общее количество записей равно одному миллиону (100 * 100 * 100). Результаты почти такие же, как если бы мы имели 1000000 для ширины и 1 для глубины

Использование памяти#

Еще одним важным аспектом бенчмаркинга является использование памяти.

Поскольку у меня нет контроля над сборщиком мусора в среде браузера, я решил запустить тесты в Node.

Я создал небольшой скрипт для измерения их соответствующего использования памяти с ручным запуском полной сборки мусора в каждом измерении. Запустив его с узлом --expose-gc , я получил следующие результаты:

Совершенно очевидно, что Map потребляет меньше памяти, чем Object , на 20-50%, что неудивительно, поскольку Map не хранит дескрипторы свойств, такие как writable / enumerable / настраиваемый как Объект .

Заключение#

Итак, что мы из всего этого выносим?

• Map быстрее, чем Object , если только у вас нет небольших целых чисел, индексированных массивом ключей, и это более эффективно с точки зрения использования памяти.
• Используйте Map , если вам нужна хеш-карта с частыми обновлениями; используйте Object , если вы хотите иметь фиксированную коллекцию ключ-значение (т. е. запись), и следите за ловушками, которые возникают при прототипном наследовании.

Если вы знаете подробности того, как именно V8 оптимизирует Map , или просто хотите указать на недостатки в моих тестах, отправьте мне запрос. Я буду рад обновить этот пост на основе вашей информации!

Примечания по совместимости браузеров#

Карта — это функция ES6. К настоящему времени большинству из нас не следует беспокоиться о его совместимости, если вы не ориентируетесь на пользовательскую базу с каким-то нишевым старым браузером. Под «старым» я подразумеваю старше, чем IE 11, потому что даже IE 11 поддерживает 9.0039 Карта , и на данный момент IE 11 мертв. Мы не должны бездумно транспилировать и добавлять полифиллы к целевому ES5 по умолчанию, потому что это не только увеличивает размер пакета, но и работает медленнее по сравнению с современным JavaScript. Самое главное, он наказывает 99,999% ваших пользователей, которые используют современный браузер.

Кроме того, нам не нужно отказываться от поддержки устаревших браузеров — обслуживайте устаревший код через nomodule , предоставляя резервные пакеты, чтобы мы могли избежать ухудшения работы посетителей с современными браузерами.