20 полезных 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: [] }] }

Не забываем сохранять и делиться!
Успехов! ✊

Больше полезных материалов по веб-разработке на моем канале в Телеграм.
Обязательно подпишитесь.