?
今天這篇文章，我想與你分享 11個有用的JavaScript功能，它們將極大地提高我們的工作效率。
1.生成隨機顏色的兩種方式
1）.生成RandomHexColor
const generateRandomHexColor = () => { return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`}
generateRandomHexColor() // #a8277cgenerateRandomHexColor() // #09c20cgenerateRandomHexColor() // #dbc319
2）.生成隨機RGBA
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=100parseQuery('name') // fatfishparseQuery('age') // 100parseQuery('sex') // null
4.Please wait for a while
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 標志的 cookie。
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]
秘訣就是使用數組的扁平化方法。
const arr = [ 1, [ 2, [ 3, [ 4, [ 5, [ 6 ] ] ] ] ]]console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6]
以上就是我今天想與你分享的11個有用的技巧，希望對你有所幫助。
該文章在 2024/10/14 11:05:48 編輯過
400 186 1886
