Всем привет! Я рад поделиться с вами своей первой статьей на Medium (или любой статьей, если честно). Моя цель — поделиться некоторыми знаниями, которые я почерпнул в своем путешествии по миру JavaScript. Я сосредоточусь на теме, о которой мало говорят — преимуществах использования Map() и Set() в JavaScript.

Имея четырехлетний опыт работы с JavaScript, у меня также была возможность работать с другими языками, такими как Java и Apex для Salesforce (по сути, это Java). Одним из инструментов, который я часто использовал в определенных ситуациях, является структура данных Map(), особенно при работе с ограничениями Salesforce. Однако, когда дело доходит до JavaScript, я не особо сталкивался с Map(). Я случайно столкнулся с этим во время курса (в частности, фантастического курса Эрика Венделла), но в большинстве проектов, над которыми я работал, массивы и объекты в сочетании со знакомыми циклами, такими как for, array.forEach и findIndex, были моим хлебом с маслом (или рисом и бобами, как мы говорили здесь, в Бразилии).

Но недавно что-то произошло на работе. Я столкнулся с проблемой, связанной с эффективностью работы моего кода, и именно здесь на сцену вышли Map() и Set(), удивившие меня своими преимуществами.

Знакомство с Map()

Карта — это набор элементов данных с ключами, как и объект. Но главное отличие в том, что Map допускает использование ключей любого типа. Это может быть очень полезно при работе со сложными связями данных, которые не вписываются в простые строки.

Более того, Map() сохраняет порядок своих элементов, что очень важно, когда последовательность ваших данных имеет значение. Подумайте о ситуациях, когда соблюдение порядка вставки или способа обработки данных имеет решающее значение — Map() здесь отлично подходит.

Кроме того, Map() поставляется со встроенными инструментами, которые упрощают выполнение повседневных задач. Эти методы позволяют легко добавлять или удалять элементы, проверять наличие чего-либо и плавно перемещаться по всем элементам на карте. И лучшая часть? Эти преимущества не только улучшают внешний вид вашего кода; они также улучшают его работу.

Существует множество свойств и методов, которые вы можете использовать с Map(). Если вы хотите узнать больше, вы можете найти несколько примеров на MDN. Однако я хотел бы выделить один из моих личных фаворитов: инициализацию карты с помощью конструктора. Представьте, что перед вами стоит задача эффективного управления данными из коллекции и их извлечения:

const data = [
    { "id": 1, "name": "Peter Parker", "city": "New York" },
    { "id": 1, "name": "Peter Quill", "city": "Missouri" },
    { "id": 1, "name": "Arthur Dent", "city": "London" }
];

// Utilizing the Map() constructor to seamlessly populate the Map with data
const dataMap = new Map(data.map(value => [value.id, value]));

В этом элегантном подходе массив данных преобразуется с помощью функции map() для создания пар ключей и значений. Идентификатор объекта становится ключом, а значением служит весь объект. Конструктор Map() плавно обрабатывает этот массив, генерируя карту со всеми необходимыми данными. Нет необходимости в сложных циклах — просто компактный и эффективный фрагмент кода, который оптимизирует как время, так и понятность.

Знакомство с Set()

Теперь давайте поговорим о Set(), невоспетом герое, когда дело доходит до обработки уникальных значений. Set() похож на коллекцию элементов, но он гарантирует уникальность каждого элемента. В отличие от массивов, которые могут содержать один и тот же элемент несколько раз, Set() позаботится о дубликатах за вас. Это означает, что вам не нужно вручную проверять или перебирать элементы, чтобы убедиться в их уникальности.

Представьте, что вы работаете над проектом, в котором вам нужно управлять списком тегов для сообщений в блоге. С помощью Set() вы можете упростить процесс:

// Creating a set of unique tags for a blog post
const tags = new Set();

// Adding tags to the set
tags.add("JavaScript");
tags.add("Web Development");
tags.add("JavaScript"); // It won't add a duplicate entry
tags.size; // 2

Здесь Set() избавляет вас от необходимости иметь дело с повторяющимися тегами, делая ваш код более чистым и эффективным. Больше примеров Set() вы также можете найти на MDN.

Заключение

В моем недавнем рабочем проекте, который включал обработку большого количества данных, я обратился к Map(), чтобы ускорить получение данных, и к Set(), чтобы более эффективно управлять уникальными значениями. Разница была очевидна — мой код стал аккуратнее и с ним легче работать, а также он стал работать лучше.

Хотя массивы и объекты важны в JavaScript, не стоит недооценивать возможности Map() и Set(). Они привносят гибкость, эффективность и ясность в ваш код. Продолжая исследовать их потенциал, я призываю вас сделать то же самое. Попробуйте использовать Map() и Set() в своем следующем проекте и убедитесь, как они могут изменить ваш опыт программирования.

Вот и все, спасибо, что прочитали.