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

Иногда нужно оставить в массиве только уникальные значения, обычно это превращается в пару строчек фильтрации и проверок.

В ES6 появился Set, вместе со spread-оператором он делает это в одну строку:

const unique = [...new Set([1, 1, 2, 3, 5, 5, 1])];

Set хранит только уникальные элементы, поэтому дубликаты автоматически отбрасываются:

console.log(unique); // [1, 2, 3, 5]

Этот приём работает для массивов примитивов: number, string, boolean, null, undefined.

🖥 JavaScript test // чат

АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ

Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:

• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды

Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.

⌨️ подписаться

🧩Что будет на выходе?

function factorial(n) {
return n <= 1 ? 1 : n * factorial(n - 1);
}
console.log(factorial(5));

Ответ: 120

🖥 JavaScript test // чат

❓Что будет на выходе?

const num = 8;
const obj = {
num: 10,
inner: {
num: 6,
getNum: function() {
return this.num;
}
}
};
console.log(obj.inner.getNum());
const getNum = obj.inner.getNum;
console.log(getNum());

Ответ: 6 undefined

🖥 JavaScript test // чат

Наблюдение за изменением размера любого элемента!

Есть нативный инструмент ResizeObserver, который реагирует именно на изменение размеров конкретного элемента:

const ro = new ResizeObserver(entries => {
  const rect = entries[0].contentRect;
  console.log('width:', rect.width, 'height:', rect.height);
});

Достаточно наблюдать за элементом:

ro.observe(document.querySelector('#box'));

Теперь любое изменение его ширины или высоты - мгновенно вызывает callback.

Можно остановить наблюдение:

ro.disconnect();

ResizeObserver даёт контроль над размерами элементов и позволяет строить предсказуемые, адаптивные интерфейсы.

🖥 JavaScript test // чат

⚡️ В сети начали массово сливать IT-курсы и книги известных онлайн школ

Вот отсортированная база с тонной материала (постепенно пополняется):

(363 видео, 87 книги) — Python
(117 видео, 53 книги) — ВАЙБКОД
(174 видео, 91 книги) — DevOps
(415 видео, 68 книги) — Frontend
(137 видео, 93 книги) — DS/ML
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++/C#
(343 видео, 87 книги) — Java/QA
(176 видео, 32 книги) — Git/Linux
(167 видео, 53 книги) — PHP/1С
(227 видео, 83 книги) — SQL/БД
(114 видео, 77 книги) — Сисадмин
(107 видео, 43 книги) — BA/SA
(181 видео, 32 книги) — Go/Rust
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — Дизайн
(136 видео, 33 книги) — PM/HR

Скачивать ничего не нужно — все выложили в Telegram

Использование Proxy для валидации объектов

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

🖥 JavaScript test // чат

🧩Что будет на выходе?

function Animal() {}

function Dog() {}

Dog.prototype = Object.create(Animal.prototype);

const rover = new Dog();

console.log(rover.constructor === Animal);
console.log(rover.constructor === Dog);
console.log(Dog.prototype.isPrototypeOf(rover));
console.log(Animal.prototype.isPrototypeOf(rover));

Ответ: true, false, true, true

🖥 JavaScript test // чат

Получаем предыдущий и следующий элементы в массиве — будто «крутим карусель»

Иногда нужно перемещаться по массиву: переключать слайды, шагать по списку товаров, листать подсказки. Сделаем мини-утилиту, которая даёт соседние элементы по индексу.

Базовая функция:

function neighbors(arr, index) {
  return {
    prev: arr[index - 1] ?? null,
    next: arr[index + 1] ?? null
  };
}

Использование:

const items = ["A", "B", "C", "D"];

console.log(neighbors(items, 1));
// { prev: "A", next: "C" }

Сделаем версию с циклическим режимом — как в каруселях:

function cycleNeighbors(arr, index) {
  const len = arr.length;
  return {
    prev: arr[(index - 1 + len) % len],
    next: arr[(index + 1) % len]
  };
}

Использование:

console.log(cycleNeighbors(items, 0));
// { prev: "D", next: "B" }

Мини-инструмент, который сильно упрощает навигацию по массивам: слайдеры, шаговые формы, клавиатурная навигация, циклические списки — всё становится на порядок чище.

🖥 JavaScript test // чат

❗️Что будет на выходе?

function delayedLog(item) {
setTimeout(() => {
console.log(item);
}, 1000);
}
for (var i = 0; i < 3; i++) {
delayedLog(i);
}

Ответ: 0 1 2

🖥 JavaScript test // чат

Универсальное чтение файлов: текст, JSON и бинарные данные!

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

Можно сделать универсальный ридер:

const readFile = (file, as = 'text') =>
  new Promise(r => {
    const fr = new FileReader();
    fr.onload = () => r(fr.result);
    fr[`readAs${as[0].toUpperCase() + as.slice(1)}`](file);
  });

Теперь можно читать файл как текст:

const txt = await readFile(file, 'text');

Читаем как JSON:

const obj = JSON.parse(await readFile(file, 'text'));

Читаем картинку в виде base64:

const base64 = await readFile(file, 'dataURL');

Читаем бинарные данные:

const buf = await readFile(file, 'arrayBuffer');

🖥 JavaScript test // чат

Алгоритмы и структуры данных с примерами на JavaScript

В этом репозитории лежат JS-примеры реализаций многих популярных алгоритмов и структур данных.

Каждый алгоритм и структуру данных можно изучить подробнее, кликнув по гиперу;

Всё сопровождается подробными пояснениями и ссылками на материалы для дальнейшего изучения.

➡️ Читать статью

🖥 JavaScript test // чат

👩‍💻 Всем программистам посвящается!

Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:

Выбирай своё направление:

👩‍💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
👩‍💻 IT Новости — t.me/it_ready
🤖 AI & ML — t.me/neuro_ready
👩‍💻 Frontend — t.me/frontend_ready
👩‍💻 C/C++ — https://t.me/cpp_ready
👩‍💻 C# & Unity — t.me/csharp_ready
👩‍💻 Linux — t.me/linux_ready
👩‍💻 Java — t.me/java_ready
📖 IT Книги — t.me/books_ready
📱 JavaScript — t.me/javascript_ready
🖼️ DevOps — t.me/devops_ready
🖥 Design —t.me/design_ready

📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!