Удаляем дубликаты из массива, но сохраняем порядок!

Когда обрабатываешь списки из внешних источников (например, e-mail'ы, id-шники, URL'ы) — дубликаты нужно убрать, но порядок важен.

Простое new Set() не подойдёт — оно сохранит порядок, но не всегда удобно для сложной логики.

Используем Map — она сохраняет порядок добавления ключей:

const items = ["a","b","a","c","b"];
const unique = [...new Map(items.map(i => [i,i])).keys()];

Теперь unique будет ['a','b','c'] — в том же порядке, что в исходном массиве.

Оборачиваем в функцию для переиспользования:

function removeDuplicates(arr){
  return [...new Map(arr.map(i=>[i,i])).keys()];
}

Можно применить к любым массивам:

const emails = ["a@mail.com","b@mail.com","a@mail.com"];
console.log(removeDuplicates(emails));

🔥 Дубликаты примитивных значений удалены, исходный порядок сохранён — решение нативное и компактное.

📣 JS Ready | #практика

👩‍💻 Работаете с SQL и устали прыгать между рабочими пространствами?

SQLite3 Editor — минималистичный, но мощный плагин для VS Code, который позволяет прямо внутри редактора создавать, просматривать и редактировать SQL-базы.

Идеален для быстрой отладки, прототипов и локальной аналитики.

📣 JS Ready | #vscode

📱 Напоминалка по var / let / const!

Например, var имеет функциональную область видимости, а let и const ограничены блочной областью.

На картинке — основные различия между тремя способами объявления переменных.

Сохрани, чтобы не забыть!

📣 JS Ready | #ресурс

☕️ Нашёл отличную статью на Хабре про добавление real-time чата в админку на React — без Jivo и LiveChat!

В этой статье:
• Использование фреймворка Admiral для создания интерфейса админки и маршрутизации;
• Организация WebSocket-соединения с помощью библиотеки Centrifuge;
• Логика управления диалогами и сообщениями внутри ChatContext;
• Компоненты UI — всё с поддержкой файлов и обновлений;

🔊 Продолжай читать на Habr!

📣 JS Ready | #статья