11 種有用的 JavaScript 技巧
作者：佚名
今天這篇文章，我想與你分享 11個(gè)有用JavaScript技巧，這些技巧可以大大提高你的工作效率。
今天這篇文章，我想與你分享 11個(gè)有用JavaScript技巧，這些技巧可以大大提高你的工作效率。
1、生成隨機(jī)顏色的兩種方式
1).generateRandomHexColor
const generateRandomHexColor = () => {
return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`
}
generateRandomHexColor() // #a8277c
generateRandomHexColor() // #09c20c
generateRandomHexColor() // #dbc3192).生成隨機(jī)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、復(fù)制內(nèi)容到剪貼板的兩種方式
方式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中的查詢(xún)參數(shù)
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') // null4.Please wait for a while
const timeout = (timeout) => new Promise((rs) => setTimeout(rs, timeout))5.打亂數(shù)組
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.深拷貝一個(gè)對(duì)象
如何深拷貝一個(gè)對(duì)象？使用 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.確保一個(gè)元素在可見(jiàn)區(qū)域內(nèi)
前段時(shí)間在工作中遇到了一個(gè)很麻煩的需求，感謝IntersectionObserver的幫助，可以很方便的檢測(cè)出一個(gè)元素是否在可見(jiàn)區(qū)域。
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) // true8.獲取當(dāng)前選中的文本
許多翻譯網(wǎng)站都有此功能，可以在其中選擇一段文字并將其翻譯成其他國(guó)家/地區(qū)的語(yǔ)言。
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.刪除指定名稱(chēng)的cookie
我們只能刪除沒(méi)有 HttpOnly 標(biāo)志的 cookie，我的朋友。
const clearCookie = (name) => {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
clearCookie('_ga') // _ga is removed from the cookie11.將多維數(shù)組轉(zhuǎn)換為一維數(shù)組
雖然我們通過(guò)遞歸函數(shù)將多維數(shù)組轉(zhuǎn)換為一維數(shù)組，但是有一個(gè)非常簡(jiǎn)單的方法可以解決這個(gè)問(wèn)題。
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]秘訣是使用數(shù)組的平面方法。
const arr = [
1,
[
2,
[
3,
[
4,
[
5,
[
6
]
]
]
]
]
]
console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6]總結(jié)
以上就是我今天想與你分享的全部?jī)?nèi)容，希望這些內(nèi)容能夠?qū)δ阌兴鶐椭?/p>
責(zé)任編輯：華軒
來(lái)源：
web前端開(kāi)發(fā)
