Среди других замечательных плюшек, в стандарте ES6 появились мапы (Maps) и сеты (Sets). У этих коллекций большие возможности и удобные методы. При использовании в правильных местах они могут дать выигрыш в производительности. Пора ли отказываться от старых-добрых объектов и массивов, или новые структуры не могут полностью их заменить?
Эта статья посвящена мапам – их специфике, преимуществам и тонкостям использования. Вы также можете узнать больше о том, как JavaScript Sets ускоряют код.
JavaScript Maps vs Objects
Между мапами и простыми объектами есть два принципиальных отличия.
1. Нет ограничений на ключи
Обычные объекты ставят нам четкое условие: ключ должен быть строкой (String) или символом (Symbol).
Если вам очень хочется использовать в качестве ключа другой объект или, может быть, функцию – увы, дорогой JavaScript разработчик…
Хотя почему бы и нет, ведь теперь у нас есть мапы! Захотелось вам сделать ключом массив – будьте любезны:
Объекты, массивы, функции, примитивные типы, даже NaN – никаких ограничений больше нет. Это очень-очень гибко, ведь теперь вы можете связать друг с другом любые данные.
Прямая итерация
Нельзя просто так взять и перебрать объект.
Сначала нужно преобразовать его в некоторое подобие массива, используя 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 раз быстрее)
Примечание от переводчика
При прогоне тестов в консоли браузера с теми же самыми исходными данными результаты получились не столь ошеломляющие.
Для проверки наличия значения особой разницы не замечено:
При добавлении и удалении значений Map даже проигрывает:
Тест производительности: добавление значений в JavaScript Maps Тест производительности: удаление значений из JavaScript Maps
Впрочем, автор отмечает, что внутри цикла for объекты работают быстрее, чем JavaScript Maps – довольно интригующее наблюдение:
Объект: 32.143мс
Мапа: 163.828мс (в 5 раз медленнее)
Использование JavaScript Maps
Итак, в каких случаях JavaScript разработчик должен использовать мапы, а не обычные объекты?
Предположим, вам нужно написать функцию isAnagram , которая будет определять, являются ли два слова анаграммами друг друга:
Способов решить эту задачку много, однако мапы предлагают одно из самых чистых и быстрых решений:
Если необходимо добавлять и удалять значения динамически, использовать JavaScript Maps предпочтительнее, чем объекты. Кроме того, они очень полезны, если типы данных или количество записей заранее не известны.
С мапами программирование на JavaScript стало еще немного проще, но, конечно, это не панацея от всех бед.