На Devdojo недавно вышла маленькая, но очень полезная публикация с подборкой полезных сниппетов на JavaScript, которые, я уверен, пригодятся на любом проекте и сэкономят время разработчика.
Определить, используется ли темный режим.
const isDarkMode = () => globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false; // Usage isDarkMode();
Скопировать текст в буфер обмена.
const copyToClipboard = (text) => navigator?.clipboard?.writeText(text) ?? false; // Usage copyToClipboard("Hello World!");
Сделать элементы в массиве уникальными.
const uniqueArray = (array) => [...new Set(array)]; // Usage uniqueArray([1, 2, 3, 4, 5, 1, 2, 3, 4, 5]); // [1, 2, 3, 4, 5]
Получить случайное число.
const getRandomNumber = (min, max) => ~~(Math.random() * (max - min + 1)) + min; // Usage getRandomNumber(1, 10); // Random number between 1 and 10
Получить случайный шестнадцатеричный цвет.
Сначала генерируется случайное число от 0 до 255, а затем преобразуется в шестнадцатеричный формат.
const getRandomHexColor = () => "#" + ((Math.random() * 0xffffff) << 0).toString(16); // Usage getRandomHexColor(); // Random hex color
Перемешать массив.
const shuffleArray = (array) => array.sort(() => Math.random() - 0.5); // Usage shuffleArray([1, 2, 3, 4, 5]); // Randomly shuffled array
Зациклить функцию Х раз.
const loop = (x, fn) => [...Array(x)].forEach(fn); // Usage loop(10, () => console.log("Hello World!"));
Получить случайный элемент из массива.
const getRandomElement = (array) => array[~~(Math.random() * array.length)]; // Usage getRandomElement([1, 2, 3, 4, 5]); // Random element from array
Получить случайную строку.
const getRandomString = (length) => [...Array(length)] .map(() => String.fromCharCode(~~(Math.random() * 26) + 97)) .join(""); // Usage getRandomString(10); // Random string with 10 characters
Получить случайное логическое значение.
const getRandomBoolean = () => Math.random() >= 0.5; // Usage getRandomBoolean(); // Random boolean
Получить случайное число между двумя числами.
const getRandomNumberBetween = (min, max) => ~~(Math.random() * (max - min + 1)) + min; // Usage getRandomNumberBetween(1, 10); // Random number between 1 and 10
Получить значение из куки.
const getCookie = (name) => ("; " + document.cookie).split(`; ${name}=`).pop().split(";")[0]; // Usage getCookie("name"); // Value of cookie "name"
Очистить все файлы куки.
const clearCookies = () => document.cookie .split(";") .forEach( (c) => (document.cookie = c .replace(/^ +/, "") .replace(/=.*/, "=;expires=Thu, 01 Jan 1970 00:00:00 UTC")) ); // Usage clearCookies(); // Clear all cookies
Скроллинг вверх.
const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth" }); // Usage scrollToTop(document.querySelector("#element"));
Получить среднее число.
const avg = (...numbers) => numbers.reduce((a, b) => a + b, 0) / numbers.length; // Usage avg(1, 2, 3, 4, 5); // 3
Проверить адрес электронной почты.
С помощью регулярного выражения.
const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); // Usage validateEmail("obama@gmail.com"); // true
Проверить объект.
const validateObject = (object, rules) => Object.keys(rules).every((key) => rules[key](object[key])); // Usage const rules = { name: (name) => name.length > 0, email: (email) => validateEmail(email), password: (password) => password.length > 0, }; validateObject({ name: "", email: "", password: "" }, rules); // false
Разбить массив на фрагменты.
const chunkArray = (array, chunkSize) => [...Array(Math.ceil(array.length / chunkSize))].map((_, index) => array.slice(index * chunkSize, (index + 1) * chunkSize) ); // Usage chunkArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3); // [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]
RGB в HEX
const rgbToHex = (r, g, b) => "#" + ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0"); // Usage rgbToHex(255, 0, 0); // #ff0000
RAW строка в нормальную строку.
formatFn("string") + formatFn("string");
Можно использовать возможности синтаксиса необработанных строк ES6:
const f = (...args) => String.raw(...args); // This returns a normal string formatFn(f`string` + f`string`);
Сравнить два объекта.
const compareObjects = (obj1, obj2) => { const c = Object.keys(obj1), n = Object.keys(obj2); return c.length === n.length && c.every((c) => obj1[c] === obj2[c]); }; // Usage compareObjects({ a: 1, b: 2 }, { a: 1, b: 2 }); // true
Получить выделенный текст.
const getSelectedText = () => window.getSelection().toString(); // Usage getSelectedText(); // Selected text
Получить объект параметров запроса в URL.
const getQueryParams = (url) => new URLSearchParams(url.split("?")[1]); // Usage getQueryParams("https://example.com?a=1&b=2"); // { a: "1", b: "2" }
Преобразовать число в слово.
Преобразует большие числа, например 1000000, в «1M».
const numToWord = (number) => number.toLocaleString("en-US", { notation: "compact" }); // Usage numToWord(1000000); // "1M"
Подсчитать количество дубликатов в массиве.
Возвращает объект с количеством дубликатов в массиве.
const countDuplicates = (c) => { const t = {}; return c.forEach((c) => (t[c] = (t[c] || 0) + 1)), t; }; // Usage countDuplicates([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // { 1: 1, 2: 1, 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 8: 1, 9: 1, 10: 1 }
Генерация дерева из глубины.
Например, чтобы протестировать JSON.
const generateTree = (depth) => [...Array(depth)].map(() => ({ tree: generateTree(depth - 1) })); // Usage generateTree(3); // [{ tree: [{ tree: [{ tree: [] }, { tree: [] }] }, { tree: [{ tree: [] }, { tree: [] }] }] }, { tree: [{ tree: [] }, { tree: [] }] }
Не забываем сохранять и делиться!
Успехов! ✊
Больше полезных материалов по веб-разработке на моем канале в Телеграм.
Обязательно подпишитесь.