JavaScript Maps vs Обычные объекты: смертельная битва

Перевод
0
2992
Добавить в избранное

Стандарт ES6 дал в руки разработчикам мощное и гибкое оружие – JavaScript Maps. Кажется, простым объектам уже пора на покой… Или нет?


JavaScript Maps vs Обычные объекты: смертельная битва

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

Эта статья посвящена мапам – их специфике, преимуществам и тонкостям использования. Вы также можете узнать больше о том, как JavaScript Sets ускоряют код.

JavaScript Maps vs Objects

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

1. Нет ограничений на ключи

Обычные объекты ставят нам четкое условие: ключ должен быть строкой (String) или символом (Symbol).

Если вам очень хочется использовать в качестве ключа другой объект или, может быть, функцию – увы, дорогой JavaScript разработчик…

Хотя почему бы и нет, ведь теперь у нас есть мапы! Захотелось вам сделать ключом массив – будьте любезны:

Объекты, массивы, функции, примитивные типы, даже NaN – никаких ограничений больше нет. Это очень-очень гибко, ведь теперь вы можете связать друг с другом любые данные.

Прямая итерация

Нельзя просто так взять и перебрать объект.

JavaScript Maps vs Обычные объекты: смертельная битва

Сначала нужно преобразовать его в некоторое подобие массива, используя Object.keys(), Object.values() или Object.entries().

Есть, конечно, цикл for … in, но с ним всегда довольно много проблем:

  • он перебирает только перечисляемые (enumerable) свойства;
  • не работает с полями-символами;
  • не сохраняет исходный порядок свойств в коллекции.

JavaScript Maps в отличие от объектов прекрасно перебираются напрямую, причем порядок итерации полей всегда соответствует порядку их вставки в мап.

Благодаря этому можно легко получить размер коллекции – map.size. А чтобы узнать, сколько свойств хранится в объекте, приходится вызывать сложную конструкцию Object.keys({}).length.

JavaScript Maps vs Sets

Мапы очень похожи на сеты по интерфейсу – у них целый набор одинаковых методов и свойств: has, get, delete, size. Обе структуры можно проитерировать напрямую с сохранением порядка в цикле или перебирающими методами вроде forEach.

Основное различие заключается в количестве измерений. В Set оно одно, как в простом массиве, а в Map – два:

Преобразование типов

Если уж мы превращаем массивы в JavaScript Maps, может потребоваться и обратное преобразование. Используйте для этого синтаксис деструктурирующего присваивания, введенный новым стандартом:

Сложнее обстоит дело с конвертацией мапы в объект (и обратно). Для этого придется написать специальную функцию:

Впрочем, язык JavaScript заботится о своих адептах – в новом стандарте ES2019 появились два метода, которые смогут решить эту задачу в одну строку – Object.entries() и Object.fromEntries():

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

Тесты производительности

А теперь самое интересное. Испытаем JavaScript Maps в деле. Вдруг они окажутся ужасно медленными и неповоротливыми…

Создадим обычный объект и мапу – каждый с миллионом свойств.

Для бенчмаркинга будем использовать обычный метод console.time. Точные цифры, разумеется, будут зависеть от системы и среды, в которой запускается код, но нам интереснее общая картина – рост или падение производительности.

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

Поиск значений

Объект: 0.250 мс
Мапа: 0.095 мс (в 2.6 раз быстрее)

Добавление значений

Объект: 0.229мс
Мапа: 0.005мс (в 45.8 раз быстрее)

Удаление значений

Объект: 0.376мс
Мапа: 0.012мс (в 31 раз быстрее)

Примечание от переводчика

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

Для проверки наличия значения особой разницы не замечено:

JavaScript Maps vs Обычные объекты: смертельная битва

При добавлении и удалении значений Map даже проигрывает:

JavaScript Maps vs Обычные объекты: смертельная битва
Тест производительности: добавление значений в JavaScript Maps
JavaScript Maps vs Обычные объекты: смертельная битва
Тест производительности: удаление значений из JavaScript Maps

Впрочем, автор отмечает, что внутри цикла for объекты работают быстрее, чем JavaScript Maps – довольно интригующее наблюдение:

Объект: 32.143мс
Мапа: 163.828мс (в 5 раз медленнее)

Использование JavaScript Maps

Итак, в каких случаях JavaScript разработчик должен использовать мапы, а не обычные объекты?

Предположим, вам нужно написать функцию isAnagram, которая будет определять, являются ли два слова анаграммами друг друга:

Способов решить эту задачку много, однако мапы предлагают одно из самых чистых и быстрых решений:

Если необходимо добавлять и удалять значения динамически, использовать JavaScript Maps предпочтительнее, чем объекты. Кроме того, они очень полезны, если типы данных или количество записей заранее не известны.

С мапами программирование на JavaScript стало еще немного проще, но, конечно, это не панацея от всех бед.

Как вы используете мапы в своих проектах?

Хотите получать больше интересных материалов с доставкой?

Подпишитесь на нашу рассылку:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Добавить комментарий