这些技巧你都知道吗？删除cookie、格式化money、获取url的查询参数……这些JavaScript技巧可以大大提高我们的工作效率。
因此，今天这篇文章，我准备了 20 个 JavaScript 技巧想与大家分享。
1.操作url的技巧
01.获取url的查询参数
我经常需要获取url的查询参数，例如如何通过名称获取其值？
代码语言：javascript复制const url = 'https://medium.com?name=fatfish&age=100'你有什么好主意吗？
我以前很喜欢用正则表达式来解决这个问题。
代码语言：javascript复制const getQueryByName = (url, name) => {
const queryReg = new RegExp(`${name}=([^?&]*)`, 'i')
const match = url.match(queryReg)
return match ? decodeURIComponent(match[1]) : ''
}
const url = 'https://medium.com?name=fatfish&age=100'
console.log(getQueryByName(url, 'name')) // fatfish不幸的是，正则表达式非常复杂，以至于很多人都不擅长。
有更容易的方法吗？
是的，searchParams是我们的救星，我们需要调用它的get方法来得到我们想要的答案。
那太好了！
代码语言：javascript复制const getQueryByName2 = (url, name) => {
const searchParams = new URL(url).searchParams
return decodeURIComponent(searchParams.get(name) || '')
}
console.log(getQueryByName2(url, 'name')) // fatfish02.获取url的所有查询参数
我的朋友，你能告诉我如何获取它的所有参数吗？我们仍然需要使用searchParams。
代码语言：javascript复制const getAllQueryParams = (url) => {
const searchParams = new URL(url).searchParams
return Object.fromEntries(searchParams.entries())
}
const url = 'https://medium.com?name=fatfish&age=100'
console.log(getAllQueryParams(url))
/*
{
"name": "fatfish",
"age": "100"
}
*/03.添加或修改url的查询参数
朋友，你一定也遇到过和我一样的问题。
我需要在url后面添加一些查询参数，例如age=100，height=200。
代码语言：javascript复制const url = 'https://medium.com?name=fatfish'
// Please write a function to convert url to url2
const url2 = https://medium.com?name=fatfish&age=100&height=200我觉得这不是一件很简单的事情，我们要考虑很多情况，比如：
如果url中已经存在name参数，我们应该修改它，如果不存在，则添加它。
代码语言：javascript复制const setQueryParams = (url, params) => {
const newUrl = new URL(url)
const searchParams = newUrl.searchParams
Object.entries(params).forEach(([ key, value ]) => {
searchParams.set(key, value)
})
return newUrl.toString()
}
const url = 'https://medium.com?name=fatfish&age=10'
console.log(setQueryParams(url, {
age: 100,
height: 200
}))
// https://medium.com/?name=fatfish&age=100&height=200我要再次感谢 searchParams 使处理 url 的查询参数变得更加容易。
setQueryParams 函数可以帮助我们做很多事情。
- 添加查询参数
- 修改查询参数
在前面的示例中，我们将年龄从 10 更改为 100，并添加了身高数字。
04.删除url的查询参数
有时我们需要删除一些url的查询参数并生成一个新的url。
代码语言：javascript复制const deleteQueryParams = (url, delParams = []) => {
const newUrl = new URL(url)
const searchParams = newUrl.searchParams
delParams.forEach((key) => searchParams.delete(key))
return newUrl.toString()
}
const url = 'https://medium.com?name=fatfish&age=10&height=200'
const url2 = deleteQueryParams(url, [ 'age', 'height' ])
console.log(url2) // https://medium.com/?name=fatfish2.操作cookie的技巧
05.通过名称获取cookie
浏览器没有提供API供我们获取cookie，所以我们需要编写复杂的逻辑来解决这个问题。
例如:
假设以下 cookie 信息存储在 www.example.com 网站下。
代码语言：javascript复制// BD_UPN=123253; ___rl__test__cookies=1691332234378; OUTFOX_SEARCH_USER_ID_NCOO=279255438.227351我们可以使用 getCookieByName 方法获取这些值中的任何一个。
代码语言：javascript复制const getCookieByName = (name) => {
const cookies = Object.fromEntries(
document.cookie.split('; ').map(cookie => cookie.split('='))
)
return decodeURIComponent( cookies[ name ] || '' )
}
getCookieByName('OUTFOX_SEARCH_USER_ID_NCOO') // 279255438.227351
getCookieByName('BD_UPN') // 123253
getCookieByName('___rl__test__cookies') // 169133223437806.删除cookie
我们怎样才能删除cookie呢？答案是将过期时间设置为当前时刻之前一秒。
代码语言：javascript复制const deleteCookie = (name) => {
const nowDate = new Date()
nowDate.setTime(nowDate.getTime() - 1000)
document.cookie = `${encodeURIComponent(name)}=;expires=${nowDate.toUTCString()};path=/`
}
deleteCookie('___rl__test__cookies')
getCookieByName('___rl__test__cookies') // ''07.设置cookie
除了获取cookie和删除cookie之外，我们还需要设置cookie
代码语言：javascript复制const setCookie = (name, value, millisecondsToExpire, path = '/') => {
const nowDate = new Date()
nowDate.setTime(nowDate.getTime() millisecondsToExpire)
document.cookie = `${name}=${value}; expires=${nowDate.toUTCString()}; ${path}`
}
setCookie('name', 'fatfish', 3000) // After 3 seconds name will be removed from the cookie3.关于字符串操作
08.获取指定长度的随机字符串
让我想一下，我们什么时候需要generateRandomString？
哦，当我需要一个独特的字符串时？是的，这就是它存在的原因。
代码语言：javascript复制const generateRandomString = (len = 10) => {
const chr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const chrLen = chr.length
let randomStr = ''
for (let i = 0; i < len; i ) {
const s = Math.floor(Math.random() * chrLen)
randomStr = chr[s]
}
return randomStr
}09.删除字符串中的所有空格
我们需要对用户输入的内容进行过滤，比如去除字符串中包含的所有空格。
代码语言：javascript复制const removeAllSpaces = (str) => {
return str.replace(/s/g, "");
}
removeAllSpaces('i am fatfish') // iamfatfish4.数组的操作
10.随机排列数组
这可能不是一个好的解决方案，为什么？
代码语言：javascript复制const shuffleArray = (array) => {
return array.sort(() => Math.random() - 0.5)
}
const arr = [ 'i', 'a', 'f', 'a', 't', 'f', 'i', 's' ]
shuffleArray(arr) // ['i', 'f', 't', 'a', 'f', 's', 'a', 'i']
shuffleArray(arr) // ['i', 'a', 'f', 't', 'i', 'a', 'f', 's']11.多维数组转换为一维数组
请问如何将这个 3 维数组转换为一维数组？
代码语言：javascript复制const array = [ 1, [ 2, [ 3 ] ] ] // => [ 1, 2, 3 ]
const flat = (array) => {
return array.reduce((result, it) => {
return result.concat(Array.isArray(it) ? flat(it) : it)
}, [])
}
flat(array) // [1, 2, 3]请不要把问题搞得这么复杂；这个函数包含递归操作，这让我很头疼。
代码语言：javascript复制const array = [ 1, [ 2, [ 3 ] ] ] // => [ 1, 2, 3 ]
// When Infinity is passed in, the array is converted to one-dimensional no matter how many levels it is.
array.flat(Infinity) // [1, 2, 3]12.从数组中获取随机值
这是我经常使用的一个技巧，它很简单，但对我来说很有用。
代码语言：javascript复制const getRandomValue = (array) => {
return array[ Math.floor(Math.random() * array.length)]
}
const arr = [ 'i', 'a', 'f', 'a', 't', 'f', 'i', 's' ]
getRandomValue(arr) // i
getRandomValue(arr) // a
getRandomValue(arr) // f5.数字操作
13.检查是否为数字
代码语言：javascript复制const isNumber = (s) => {
return /^[- ]?d (.d )?$/.test(s)
}
isNumber(10) // true
isNumber('10') // true
isNumber('fatfish') // false
isNumber('10.24') // true
isNumber(' 10.24') // true
isNumber('-10.24') // true
isNumber('medium') // false14.格式化货币
其实，我也不太擅长正则表达式。
代码语言：javascript复制const formatMoney = (num) => {
const numStr = '' num
return numStr.replace(/B(?=(d{3}) (?!d))/g, ',')
}
formatMoney(123456789) // 123,456,789
formatMoney(123456789.123) // 123,456,789.123幸运的是，我们可以借助 Intl.NumberFormat 轻松解决这个问题。
代码语言：javascript复制const formatMoney = (num, code = 'USD') => {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: code,
})
return formatter.format(num)
}
formatMoney(123456789) // $123,456,789
formatMoney(123456789.123) // $123,456,789.1215.生成随机数
请问如何生成指定范围的随机数？
代码语言：javascript复制const getRandomNum = (min, max) => {
return Math.floor(Math.random() * (max - min 1)) min
}
getRandomNum(10, 100) // 36
getRandomNum(10, 100) // 806.关于设备相关操作
16. isMobile
代码语言：javascript复制const isMobile = () => {
const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|Tablet/i
return mobileRegex.test(navigator.userAgent)
}17.isApple
代码语言：javascript复制const isApple = () => {
const appleRegex = /iPhone|iPod|iPad/gi;
return appleRegex.test(navigator.userAgent)
}18.isAndroid
代码语言：javascript复制const isAndroid = () => {
const androidRegex = /Android/gi
return androidRegex.test(navigator.userAgent)
}7.关于浏览器操作
19.打开全屏
代码语言：javascript复制const openFullScreen = (element) => {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) { // Firefox
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) { // Chrome, Safari, and Opera
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) { // IE/Edge
element.msRequestFullscreen()
}
}20.退出全屏
代码语言：javascript复制const exitFullScreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari, and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}最后
关于JavaScript的技巧，我就先分享到这里了，如果您觉得有用的话，请记得点赞我，关注我，并将它分享给您的朋友们，也许能够帮助到他。
感谢您的阅读，祝编程愉快！
