分享20 个你应该了解的JS 编码技术

英文 | https://blog.stackademic.com/20-useful-javascript-coding-techniques-you-should-know-about-bec185d89f5

这些技巧你都知道吗？删除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 url2
const 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|Opera Mini|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();
  }
}

最后

关于JavaScript的技巧，我就先分享到这里了，如果您觉得有用的话，请记得点赞我，关注我，并将它分享给您的朋友们，也许能够帮助到他。

感谢您的阅读，祝编程愉快！

学习更多技能

请点击下方公众号

分享20 个你应该了解的JS 编码技术

猜你喜欢