Как создавать словари в JavaScript

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

Обзор типа данных объекта

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

Однако, в отличие от статически типизированных языков, в JavaScript нет такого типа, как Dictionary. Как же его создать? У вас есть несколько вариантов.

Создание словаря в JavaScript

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

// Using the built-in Object
const obj = new Object();

// Using object literals
const obj = {
    key: 'value'
};

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

Как добавить значения в словарь

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

// Add default values during initialization
const dictionary = {
    PUBLIC_API_KEY: '1c6aa69fb9d27cb4f29c81611d0b1ff5',
    PRIVATE_API_KEY: '4fa758e6d388593f8637da4bdd697ef6'
};

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

// Using an index
dictionary[2] = 'c8b0c9e9b1618b4fb35c47ed4e2fadc7';

// Using bracket notation
dictionary['blue-book'] = '????';

// Calling the property directly with dot notation
dictionary.book = '????';

Если теперь вы попытаетесь выйти из dictionary в консоль, то получите следующий результат:

{
    2: "c8b0c9e9b1618b4fb35c47ed4e2fadc7"
    PRIVATE_API_KEY: "4fa758e6d388593f8637da4bdd697ef6"
    PUBLIC_API_KEY: "1c6aa69fb9d27cb4f29c81611d0b1ff5"
    blue-book: "????"
    book: "????"
}

Обратите внимание, что в обозначении скобок можно также использовать тире. Это не относится к другим параметрам. Если вы попытаетесь задать его через точечную нотацию, то получите ошибку.

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

Обратите внимание, что обозначения скобок внутри объектов доступны только в ES6 и выше:

const key = 'blue-book';
const dictionary = {
    [key]: '????'
};

// You can also do
dictionary[key] = '????';

console.log(dictionary);

// The above console.log will output:
{ blue-book: "????" }

Как получить доступ к ключам

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

// Will return "c8b0c9e9b1618b4fb35c47ed4e2fadc7"
dictionary[2];

// Will return "????"
dictionary['blue-book'];

// Will return "????"
dictionary.book;

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

const key = 'blue-book';

// Will return "????";
dictionary[key];

Итерация по словарям

Если необходимо просмотреть весь ваш словарь, когда он уже готов к использованию, можно использовать цикл for...in следующим образом:

const dictionary = { ... };

for (const key in dictionary) {
    if (dictionary.hasOwnProperty(key)) {
        // work on properties
        console.log(`key: ${key}, value: ${dictionary[key]}`);
    }
}

Чтобы отфильтровать унаследованные свойства, используйте оператор if, чтобы проверить, принадлежит ли свойство, над которым вы работаете, dictionary. Обратите внимание, что доступ к значениям внутри цикла можно получить с помощью скобочной нотации.

О чем следует помнить

Вот как вы можете создавать словари в JavaScript. Некоторые моменты, о которых следует помнить:

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

  • Старайтесь придерживаться одного соглашения об именах, будь то camelCase, snake_case или kebab-case.

  • Вы можете использовать переменные для записи и доступа к свойствам.

  • Обязательно включайте оператор if внутри for...in, если вы хотите отфильтровать унаследованные свойства.

Спасибо, что дочитали до конца, удачного кодинга!


Материал подготовлен в рамках курса «JavaScript Developer. Professional».

Node.js — это асинхронная среда исполнения JavaScript, в основе которой находятся такие понятия как «Event Loop» и событийно-ориентированная архитектура. 2 года назад основатель Node.js Ryan Dahl заявил о создании Deno (палиндром Node) — альтернативной серверной среды исполнения JavaScript и TypeScript. Некоторые концепции остались схожими, а некоторые были придуманы и воплощены с нуля.

Всех желающих приглашаем на двухдневный онлайн-интенсив «Знакомство и сравнение возможностей Deno и Node.js». Цель интенсива — рассмотреть обе среды с точки зрения ключевых возможностей, паттернов, инструментов. Мы сравним примеры небольших, но актуальных приложений и попробуем понять, что представляет из себя современное Server Side окружение JavaScript / TypeScript. >> РЕГИСТРАЦИЯ

Источник: https://habr.com/ru/company/otus/blog/575710/


Интересные статьи

Интересные статьи

Все «за» и «против» 1С-Битрикс, какие есть альтернативы и что выгоднее знать разработчику? Читать далее
Никто из обычных людей не достиг в этом мире ничего значимого. Джонатан, «Очень странные дела» Автор материала, перевод которого мы сегодня публикуем, предлагает читателям взгляну...
Когда я начинал изучать JavaScript, мне очень хотелось понять как работают и делаются слайдеры, которые можно перелистывать свайпами или мышью, но материалов с хорошим объяснением име...
Устраивать конкурсы в инстаграме сейчас модно. И удобно. Инстаграм предоставляет достаточно обширный API, который позволяет делать практически всё, что может сделать обычный пользователь ручками.
От скорости сайта зависит многое: количество отказов, брошенных корзин. Согласно исследованию Google, большинство посетителей не ждёт загрузки больше 3 секунд и уходит к конкурентам. Бывает, что сайт ...