JavaScript test

Алгоритмы и структуры данных с примерами на JavaScript В этом репозитории лежат JS-примеры реализаций многих популярных алгоритмов и структур данных. Каждый алгоритм и структуру данных можно изучить подробнее, кликнув по гиперу; Всё сопровождается подробными пояснениями и ссылками на материалы для дальнейшего изучения. ➡️ Читать статью 🖥 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 // чат

❗️Что будет на выходе? function delayedLog(item) { setTimeout(() => { console.log(item); }, 1000); } for (var i = 0; i < 3; i++) { delayedLog(i); } Ответ: 0 1 2 🖥 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 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 // чат

Использование Proxy для валидации объектов Proxy позволяет перехватывать и изменять операции над объектом, в данном случае используется для валидации значений. 🖥 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

Наблюдение за изменением размера любого элемента! Есть нативный инструмент 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 // чат

❓Что будет на выходе? 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 // чат

🧩Что будет на выходе? function factorial(n) { return n <= 1 ? 1 : n * factorial(n - 1); } console.log(factorial(5)); Ответ: 120 🖥 JavaScript test // чат

АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков: • Практические курсы и задания • Книги и статьи известных авторов • Полезные инструменты и ресурсы • IT-новости и инсайды Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др. ⌨️ подписаться

Убираем дубли, короткий способ получить уникальные значения! Иногда нужно оставить в массиве только уникальные значения, обычно это превращается в пару строчек фильтрации и проверок. В 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 // чат

Использование сторонних библиотек Использование сторонних библиотек позволяет расширить функциональность вашего кода. 🖥 JavaScript test // чат

JS Hero — отличный ресурс для изучения JavaScript Тут JS изучается не по скучным статьям, а через живые практические задания. Особенно полезно, если хочешь довести базу до автоматизма: функции, циклы, условия, строки, массивы. Постепенные уровни усложняются, и к концу ты уже пишешь уверенный код без подсказок. ➡️ jshero.net 🖥 JavaScript test // чат

Promise и цепочки промисов Благодаря данному видео ты узнаешь, что такое объект Promise. Также ты изучишь состояния Promise: pending, fulfilled, rejected. Продемонстрировано перехватывание ошибки с catch. ➡️ Смотреть видео 🖥 JavaScript test // чат

4 способа форматировать дату в JavaScript! Работая с интерфейсами, часто нужно красиво вывести дату — например, "2025-11-14" превратить в "14 ноября 2025" или "14 Nov 2025". 1. Через toLocaleDateString() — локализованный формат: const date = new Date('2025-11-14T00:00:00Z'); console.log(date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'Europe/Moscow' })); // "14 ноября 2025 г." 2. Через Intl.DateTimeFormat() — для повторного использования: const date = new Date('2025-11-14T00:00:00Z'); const fmt = new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric', timeZone: 'UTC' }); console.log(fmt.format(date)); // "14 Nov 2025" 3. Вручную — через методы Date: const months = [ 'января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря' ]; const date = new Date('2025-11-14T00:00:00Z'); const formatted = `${date.getUTCDate()} ${months[date.getUTCMonth()]} ${date.getUTCFullYear()}`; console.log(formatted); // "14 ноября 2025" 4. Через библиотеки dayjs или date-fns dayjs: import dayjs from "dayjs"; import "dayjs/locale/ru"; dayjs.locale("ru"); console.log(dayjs("2025-11-14").format("D MMMM YYYY")); // "14 ноября 2025" date-fns: import { format, parse } from "date-fns"; import { ru } from "date-fns/locale"; const date = parse("2025-11-14", "yyyy-MM-dd", new Date()); console.log(format(date, "d MMMM yyyy", { locale: ru })); // "14 ноября 2025" Эти способы покрывают почти все задачи — от простых форматирований до продвинутых UI с локализацией. 🖥 JavaScript test // чат

Хотите узнать, когда элемент появляется в зоне видимости? Используйте IntersectionObserver, он срабатывает, когда элемент попадает в viewport: const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) console.log('👀 Элемент виден'); }); Достаточно подключить наблюдение: observer.observe(document.querySelector('#target')); Теперь при появлении блока на экране в консоль выведется сообщение. Можно остановить наблюдение, когда элемент уже показан: observer.unobserve(document.querySelector('#target')); IntersectionObserver работает асинхронно и не блокирует основной поток. 🖥 JavaScript test // чат

Локальное хранилище браузера с использованием объекта localStorage В примере мы используем объект localStorage, доступный в браузере, чтобы сохранить данные, такие как имя пользователя и адрес электронной почты. Мы используем метод setItem() для сохранения данных и метод getItem() для получения данных. Мы также демонстрируем, как можно удалить данные из локального хранилища с помощью метода removeItem(). 🖥 JavaScript test // чат

Проверяем, открыта ли страница по HTTPS! Безопасное соединение — важное условие для работы многих Web API. Большинство таких API требуют secure context — то есть HTTPS или http://localhost. Проверить протокол можно так: const isSecure = window.location.protocol === "https:"; console.log("Безопасное соединение:", isSecure); Если нужно принудительно перенаправить пользователя на HTTPS: if (window.location.protocol !== "https:") { const { host, pathname, search, hash } = window.location; window.location.replace(`https://${host}${pathname}${search}${hash}`); } Также можно быстро вывести текущий адрес страницы: console.log("Текущий адрес:", window.location.href); Такой пример полезен для практики работы с объектом location, управления навигацией и понимания поведения редиректов в браузере 🖥 JavaScript test // чат

❗️Что будет на выходе: const memoryLeak = () => { const cache = new Map(); const weakCache = new WeakMap(); const objKey = { id: 123 }; const data = { name: 'User data', value: 42 }; cache.set(objKey, data); weakCache.set(objKey, data); // Simulate removing reference to key const result = { map: cache.has(objKey), weakMap: weakCache.has(objKey) }; // objKey = null; // This would be an error, as const can't be reassigned return result; }; console.log(memoryLeak()); Ответ: { map: true, weakMap: true } 🖥 JavaScript test // чат