Работа с ассоциативными массивами в JavaScript: аналог Dictionary C#

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Создание простых ассоциативных массивов осуществляется с использованием объектов JavaScript, где ключами служат строки:

JS
Скопировать код
let fruitHash = { 'apple': 1, 'banana': 2 };
fruitHash['cherry'] = 3; // Добавляем в "фруктовый салат" еще один ингредиент
console.log(fruitHash['apple']); // Найдем наше яблоко

Если требуется расширенная функциональность, например, использование нестроковых ключей или улучшение производительности, используйте Map:

JS
Скопировать код
let fruitMap = new Map([['apple', 1], ['banana', 2]]);
fruitMap.set('cherry', 3); // Разнообразим наш фруктовый ассортимент
console.log(fruitMap.get('apple')); // Где же наше яблоко?

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

Кинга Идем в IT: пошаговый план для смены профессии

Расширенные возможности: выходим за рамки основ

Доступ к свойствам объекта

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

JS
Скопировать код
let obj = { 'one-two': 12, 'three four': 34 };
console.log(obj['one-two']); // Задействуем числа

Перебор ассоциативных массивов

Цикл for..in подойдет для перебора свойств объекта. Не забывайте применять hasOwnProperty, чтобы исключить унаследованные свойства.

JS
Скопировать код
for (let fruit in fruitHash) {
  if (fruitHash.hasOwnProperty(fruit)) {
    console.log(fruit + " -> " + fruitHash[fruit]); // Наблюдаем за расширением фруктового ассортимента
  }
}

Повышение производительности с Map

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

Охватим все случаи: работаем с исключительными ситуациями

Нестроковые ключи? Без проблем

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

Уборка с помощью WeakMap

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

Стальгия по старому доброму Dictionary

Для привыкших к Dictionary из C# или подобных языков, JavaScript предлагает объекты и Map в качестве достойного аналога, хотя они и не являются доскональным эквивалентом.

Визуализация

Представьте, что вы находитесь в художественной галерее, где каждая картина снабжена уникальной табличкой:

Markdown
Скопировать код
| Расположение (Индекс) | Название (Ключ)   | Автор (Значение)        |
| --------------------- | ----------------- | ----------------------- |
| 1                     | «Звёздная ночь»   | Ван Гог                 |
| 2                     | «Тайная вечеря»   | да Винчи                |
| 3                     | «Мона Лиза»       | да Винчи                |
| 4                     | «Крик»            | Мунк                    |

В JavaScript это можно представить как объект, где название служит ключом, а имя художника — значением:

JS
Скопировать код
const artGallery = {
  "Starry Night": "Van Gogh",
  "The Last Supper": "Da Vinci",
  "Mona Lisa": "Da Vinci",
  "The Scream": "Munch"
};

Чтобы узнать автора конкретной картины, достаточно обратиться к соответствующему свойству объекта:

JS
Скопировать код
let artistOfMonaLisa = artGallery["Mona Lisa"];

И получим:

Markdown
Скопировать код
"да Винчи" // Автор картины "Мона Лиза"

Важно! Сериализация и десериализация

JSON — идеален для обмена данными

Для взаимодействия между клиентом и сервером используйте JSON (JavaScript Object Notation). Работать с JSON в JavaScript можно легко и просто с помощью функций JSON.stringify и JSON.parse.

Сериализация Map

Захотели сохранить Map? Преобразуйте его в массив или объект вручную, а затем сериализуйте:

JS
Скопировать код
let serializedMap = JSON.stringify(Array.from(fruitMap.entries())); // Ваши данные сохранены и готовы к передаче

Для восстановления структуры Map:

JS
Скопировать код
let deserializedMap = new Map(JSON.parse(serializedMap)); // Карта восстановлена из архивов JSON.

Не забывайте

  • Используйте объекты при работе со строковыми и статическими ключами.
  • Map подходит для работы с любым объемом данных, где требуется работа с динамическими ключами и частое обновление данных.
  • WeakMaps отлично подходят для ситуаций, когда необходим автоматический сбор мусора и ключами являются объекты.

Полезные материалы

  1. Работа с объектами – JavaScript | MDN — глубокое погружение в категорию объектов JavaScript.
  2. Понимание объектов в JavaScript | DigitalOcean — легкий подход к пониманию объектов в JavaScript.
  3. Map – JavaScript | MDN — полезное руководство по работе с объектами Map.
  4. Map и Set – JavaScript Info — интересные примеры использования Map и Set в JavaScript.
  5. JSON — универсальный формат для обмена данными.
  6. Введение в JSON — как правильно использовать JSON в JavaScript.