20 个你应该了解的有用的JavaScript 编码技术

这些技巧你都知道吗？删除cookie、格式化money、获取url的查询参数……这些JavaScript技巧可以大大提高我们的工作效率。因此，今天这篇文章，我准备了 20 个 JavaScript 技巧想与大家分享。 1.操作url的技巧 01.获取url的查询参数我经常需要获取url的查询参数，例如如何通过名称获取其值？

const url = 'https://medium.com?name=fatfish&age=100'

你有什么好主意吗？

我以前很喜欢用正则表达式来解决这个问题。

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方法来得到我们想要的答案。

那太好了！

const getQueryByName2 = (url, name) => { 
    const searchParams = new URL(url).searchParams
    return decodeURIComponent(searchParams.get(name) || '')
  }
console.log(getQueryByName2(url, 'name')) // fatfish

02.获取url的所有查询参数

我的朋友，你能告诉我如何获取它的所有参数吗？我们仍然需要使用searchParams。

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。

const url = 'https://medium.com?name=fatfish'
// Please write a function to convert url to url2const url2 =  https://medium.com?name=fatfish&age=100&height=200

我觉得这不是一件很简单的事情，我们要考虑很多情况，比如：

如果url中已经存在name参数，我们应该修改它，如果不存在，则添加它。

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。

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=fatfish

2.操作cookie的技巧

05.通过名称获取cookie

浏览器没有提供API供我们获取cookie，所以我们需要编写复杂的逻辑来解决这个问题。

例如:

假设以下 cookie 信息存储在 www.example.com 网站下。

// BD_UPN=123253;
___rl__test__cookies=1691332234378; OUTFOX_SEARCH_USER_ID_NCOO=279255438.227351

我们可以使用 getCookieByName 方法获取这些值中的任何一个。

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') // 1691332234378

06.删除cookie

我们怎样才能删除cookie呢？答案是将过期时间设置为当前时刻之前一秒。

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

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 cookie

3.关于字符串操作

08.获取指定长度的随机字符串

让我想一下，我们什么时候需要generateRandomString？

哦，当我需要一个独特的字符串时？是的，这就是它存在的原因。

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.删除字符串中的所有空格

我们需要对用户输入的内容进行过滤，比如去除字符串中包含的所有空格。

const removeAllSpaces = (str) => {  
    return str.replace(/\s/g, "");
}

removeAllSpaces('i am fatfish') // iamfatfish

4.数组的操作

10.随机排列数组

这可能不是一个好的解决方案，为什么？

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 维数组转换为一维数组？

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]

请不要把问题搞得这么复杂；这个函数包含递归操作，这让我很头疼。

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.从数组中获取随机值

这是我经常使用的一个技巧，它很简单，但对我来说很有用。

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) // f

5.数字操作

13.检查是否为数字

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') // false

14.格式化货币

其实，我也不太擅长正则表达式。

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 轻松解决这个问题。

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.12

15.生成随机数

请问如何生成指定范围的随机数？

const getRandomNum = (min, max) => { 
return Math.floor(Math.random() * (max - min + 1)) + min}
getRandomNum(10, 100) // 36
getRandomNum(10, 100) // 80

6.关于设备相关操作

16. isMobile

const isMobile = () => {  
const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini|Mobile|Tablet/i  
return mobileRegex.test(navigator.userAgent)}

17.isApple

const isApple = () => {  
const appleRegex = /iPhone|iPod|iPad/gi;  return appleRegex.test(navigator.userAgent)}

18.isAndroid

const isAndroid = () => {  
const androidRegex = /Android/gi 
return androidRegex.test(navigator.userAgent)}

7.关于浏览器操作

19.打开全屏

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.退出全屏

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();  
}}