Вы знаете все эти трюки?
Хочу поделиться с вами 15 полезными функциями, которые значительно повысят вашу продуктивность.
1. # Два способа генерации случайных цветов
1.generateRandomHexColor
const generateRandomHexColor = () => { return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}` } generateRandomHexColor() // #a8277c generateRandomHexColor() // #09c20c generateRandomHexColor() // #dbc319
2.generateRandomRGBA
const generateRandomRGBA = () => { const r = Math.floor(Math.random() * 256) const g = Math.floor(Math.random() * 256) const b = Math.floor(Math.random() * 256) const a = Math.random().toFixed(2) return `rgba(${[ r, g, b, a ].join(',')})` } generateRandomRGBA() // rgba(242,183,70,0.21) generateRandomRGBA() // rgba(65,171,97,0.72) generateRandomRGBA() // rgba(241,74,149,0.33)
2. # Два способа скопировать содержимое в буфер обмена
способ 1
const copyToClipboard = (text) => navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(text) copyToClipboard('hello medium')
способ 2
const copyToClipboard = (content) => { const textarea = document.createElement("textarea") textarea.value = content document.body.appendChild(textarea) textarea.select() document.execCommand("Copy") textarea.remove() } copyToClipboard('hello medium')
3. # Получить параметры запроса в URL
const parseQuery = (name) => { return new URL(window.location.href).searchParams.get(name) } // https://medium.com?name=fatfish&age=100 parseQuery('name') // fatfish parseQuery('age') // 100 parseQuery('sex') // null
4.# Подождите некоторое время
const timeout = (timeout) => new Promise((rs) => setTimeout(rs, timeout))
5.# Перемешать массив
const shuffle = (array) => array.sort(() => 0.5 - Math.random()) shuffle([ 1, -1, 2, 3, 0, -4 ]) // [2, -1, -4, 1, 3, 0] shuffle([ 1, -1, 2, 3, 0, -4 ]) // [3, 2, -1, -4, 0, 1]
6.# Глубокое копирование объекта
Как глубоко скопировать объект? Использование structuredClone
делает это очень простым.
const obj = { name: 'fatfish', node: { name: 'medium', node: { name: 'blog' } } } const cloneObj = structuredClone(obj) cloneObj.name = '1111' cloneObj.node.name = '22222' console.log(cloneObj) /* { "name": "1111", "node": { "name": "22222", "node": { "name": "blog" } } } */ console.log(obj) /* { "name": "fatfish", "node": { "name": "medium", "node": { "name": "blog" } } } */
7. # Убедитесь, что элемент находится в видимой области
Некоторое время назад я столкнулся с очень неприятным требованием на работе, и благодаря IntersectionObserver
я мог легко определить, находится ли элемент в видимой области.
const isElInViewport = (el) => { return new Promise(function(resolve) { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.target === el) { resolve(entry.isIntersecting) } }) }) observer.observe(el) }) } const inView = await isElInViewport(document.body) console.log(inView) // true
8. # Получить текущий выделенный текст
Многие сайты переводов имеют эту функцию, где вы можете выбрать текст и перевести его на язык другой страны.
const getSelectedContent = () => window.getSelection().toString()
9. # Получить все файлы cookie браузера
Очень удобно, чтобы помочь нам получить информацию cookie
в браузере
const getAllCookies = () => { return document.cookie.split(";").reduce(function(cookieObj, cookie) { const cookieParts = cookie.split("=") cookieObj[cookieParts[0].trim()] = cookieParts[1].trim() return cookieObj }, {}) } getAllCookies() /* { "_ga": "GA1.2.496117981.1644504126", "lightstep_guid/medium-web": "bca615c0c0287eaa", "tz": "-480", "nonce": "uNIhvQRF", "OUTFOX_SEARCH_USER_ID_NCOO": "989240404.2375598", "sz": "2560", "pr": "1", "_dd_s": "rum" } */
10.# Удалить куки с указанным именем
Мы можем удалить файлы cookie только без флага HttpOnly
, друг мой.
const clearCookie = (name) => { document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; } clearCookie('_ga') // _ga is removed from the cookie
11.# Преобразование многомерных массивов в одномерные массивы
Хотя мы преобразуем многомерные массивы в одномерные с помощью рекурсивной функции, есть очень простой способ решить эту проблему.
const flatten = (array) => { return array.reduce((result, it) => { return result.concat(Array.isArray(it) ? flatten(it) : it) }, []) } const arr = [ 1, [ 2, [ 3, [ 4, [ 5, [ 6 ] ] ] ] ] ] console.log(flatten(arr)) // [1, 2, 3, 4, 5, 6]
Секрет в том, чтобы использовать метод flat
массива.
const arr = [ 1, [ 2, [ 3, [ 4, [ 5, [ 6 ] ] ] ] ] ] console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6]
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .