Создание и динамическое добавление пар ключ-значение в JS

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

Мы можем создать объект в JavaScript, который будет функционировать как словарь, следующим образом:

let dict = {}; // Создание пустого объекта для нашего словаря.
dict['specialKey'] = 'megaValue'; // Заполнение словаря значениями при помощи скобочной нотации.

// Если ваш ключ может быть использован как корректный идентификатор:
dict.lightKey = 'lightValue'; // Мы можем использовать точечную нотацию.

console.log(dict); // Вот ваш словарь: { specialKey: 'megaValue', lightKey: 'lightValue' }

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

Работа с нестандартными ключами

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

let keyName = 'Fancy Key ' + Date.now(); // Динамически созданный ключ.
dict[keyName] = 'secretValue';

console.log(dict[keyName]); // Ключ работает!

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

Перед обращением к элементам словаря всегда стоит проверить наличие ключа, чтобы предотвратить возникновение ошибок во время выполнения:

if (dict.hasOwnProperty('mustHaveKey')) {
  console.log('Ключ существует! Значение:', dict['mustHaveKey']);
} else {
  console.log('Ключ не обнаружен.');
}

Оператор delete позволяет удалять ключи из словаря. Пользуйтесь им с осторожностью.

Изменчивость словаря

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

for (let i = 0; i < randomKeys.length; i++) {
  dict[randomKeys[i]] = randomValues[i];
  // Цикл добавляет в словарь новые пары ключ-значение.
}

В обработке пользовательского ввода:

function hearTheUser(key, value) {
  dict[key] = value; // Добавляем ключ и значение по запросу пользователя.
}

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

Объекты-словари могут содержать любое количество элементов, подобно волшебным сумкам.

🎒 Сумка (Пустой Словарь)

Заполняем нашу сумку элементами (ключи) и их содержимым (значениями):

bag['Snacks'] = '🍪';  // Добавляем закуски
bag['TravelGuide'] = '🗺️';  // Кладем карту
bag['Camera'] = '📷';  // И камеру для фотографий

Какие элементы у нас в сумке:

🎒 Сумка = {
  'Snacks': '🍪',
  'TravelGuide': '🗺️',
  'Camera': '📷'
}

Вместимость словаря не ограничена.

Вспомогательные методы объектов

В сложных задачах на помощь могут прийти методы объектов JavaScript, такие как Object.keys(), Object.values() и Object.entries():

for (let key of Object.keys(dict)) {
  console.log(key, dict[key]); // Перебираем ключи и их значения.
}

Эти методы ускоряют работу с объектами при таких операциях, как клонирование или слияние.

Гибкость выбора ключей

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

dict['404Error'] = 'Not Found'; // Страница не найдена
dict[123] = 'Числовой ключ'; // Использование числового ключа.

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

1. Работаем с объектами – JavaScript | MDN — Подробнее ознакомьтесь с миром объектов JavaScript.
2. Объекты JavaScript – W3Schools — Основы работы с объектами JavaScript с пояснениями и примерами.
3. Доступ к свойству объекта с динамически вычисляемым именем – Stack Overflow — Обсуждение и решения вопросов динамического доступа к свойствам.
4. JavaScript: работа с JSON — Осваиваем JSON, близкого родственника объектов в JavaScript.
5. Объекты – JavaScript.info — Больше информации о функциях и особенностях работы с объектами.
6. Полный гид по атрибутам данных | CSS-Tricks — Использование атрибутов данных и их возможности в практических задачах.
7. JSBEN.CH Performance Benchmarking Playground for JavaScript — Проверьте эффективность вашего кода с помощью этого инструмента для бенчмаркинга.