19 个实用的 ES6 代码片段，解决常见的 JavaScript 问题 (译)

本文译者为 360 奇舞团前端开发工程师 

原文标题：19 Practical ES6 Snippets to Solve Common JS Problems

原文作者：Madza

原文地址：https://dev.to/madza/19-practical-es6-snippets-to-solve-common-js-problems-31o9

在我们的开发流程中，我们经常会遇到一些具有挑战性的问题，而解决这些问题可能只需要几行代码。在本文中，我试图整理出一些有用的代码片段，帮助您在处理 URL、DOM、事件、日期、用户偏好等方面时更加便捷。

所有这些代码片段都是从"30 seconds of code"中精心挑选的。这是一个很棒的资源，我强烈推荐去查看更多内容。

这些代码片段被筛选的主要标准是实用性。希望您能找到一些有价值的东西，可以应用到未来的代码库中。

1. 如何获取 base URL？

const getBaseURL = (url) => url.replace(/[?#].*$/, '')

getBaseURL('http://url.com/page?name=Adam&surname=Smith')
// 'http://url.com/page'

2. 如何检查 URL 是否为绝对路径？

const isAbsoluteURL = (str) => /^[a-z][a-z0-9+.-]*:/.test(str)

isAbsoluteURL('https://google.com') // true
isAbsoluteURL('ftp://www.myserver.net') // true
isAbsoluteURL('/foo/bar') // false

3. 如何将 URL 参数转换为对象？

const getURLParameters = (url) =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
    ),
    {}
  )

getURLParameters('google.com') // {}
getURLParameters('http://url.com/page?name=Adam&surname=Smith')
// {name: 'Adam', surname: 'Smith'}

4. 如何检查一个元素是否包含另一个元素？

const elementContains = (parent, child) =>
  parent !== child && parent.contains(child)

elementContains(document.querySelector('head'), document.querySelector('title'))
// true
elementContains(document.querySelector('body'), document.querySelector('body'))
// false

5. 如何获取元素的所有祖先元素？

const getAncestors = (el) => {
  let ancestors = []
  while (el) {
    ancestors.unshift(el)
    el = el.parentNode
  }
  return ancestors
}

getAncestors(document.querySelector('nav'))
// [document, html, body, header, nav]

6. 如何平滑滚动到元素视图中？

const smoothScroll = (element) =>
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth',
  })

smoothScroll('#fooBar') // 平滑滚动到id为fooBar的元素
smoothScroll('.fooBar')
// 平滑滚动到class为fooBar的第一个元素

7. 如何处理点击元素外部的事件？

const onClickOutside = (element, callback) => {
  document.addEventListener('click', (e) => {
    if (!element.contains(e.target)) callback()
  })
}

onClickOutside('#my-element', () => console.log('Hello'))
// 当用户点击#my-element外部时将输出'Hello'

8. 如何生成 UUID？

const UUIDGeneratorBrowser = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  )

UUIDGeneratorBrowser() // '7982fcfe-5721-4632-bede-6000885be57d'

9. 如何获取选定的文本？

const getSelectedText = () => window.getSelection().toString()

getSelectedText() // 'Lorem ipsum'

10. 如何将文本复制到剪贴板？

const copyToClipboard = (str) => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str)
  return Promise.reject('The Clipboard API is not available.')
}

11. 如何为 HTML 元素添加样式？

const addStyles = (el, styles) => Object.assign(el.style, styles)

addStyles(document.getElementById('my-element'), {
  background: 'red',
  color: '#ffff00',
  fontSize: '3rem',
})

12. 如何切换全屏模式？

const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen()

fullscreen() // 将body以全屏模式打开
fullscreen(false) // 退出全屏模式

13. 如何检测大写锁定是否打开？

  Username:
  

  Password:
  
  Caps Lock is on

const el = document.getElementById('password')
const msg = document.getElementById('password-message')

el.addEventListener('keyup', (e) => {
  msg.style = e.getModifierState('CapsLock')
    ? 'display: block'
    : 'display: none'
})

14. 如何检查日期是否有效？

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf())

isDateValid('December 17, 1995 03:24:00') // true
isDateValid('1995-12-17T03:24:00') // true
isDateValid('1995-12-17 T03:24:00') // false
isDateValid('Duck') // false
isDateValid(1995, 11, 17) // true
isDateValid(1995, 11, 17, 'Duck') // false
isDateValid({}) // false

15. 如何从日期获取时间（带冒号）？

const getColonTimeFromDate = (date) => date.toTimeString().slice(0, 8)

getColonTimeFromDate(new Date()) // '08:38:00'

16. 如何从日期生成 UNIX 时间戳？

const getTimestamp = (date = new Date()) => Math.floor(date.getTime() / 1000)

getTimestamp() // 1602162242

17. 如何检查当前用户的首选语言？

const detectLanguage = (defaultLang = 'en-US') =>
  navigator.language ||
  (Array.isArray(navigator.languages) && navigator.languages[0]) ||
  defaultLang

detectLanguage() // 'nl-NL'

18. 如何检查当前用户的首选颜色方案？

const prefersDarkColorScheme = () =>
  window &&
  window.matchMedia &&
  window.matchMedia('(prefers-color-scheme: dark)').matches

prefersDarkColorScheme() // true

19. 如何检查设备是否支持触摸事件？

const supportsTouchEvents = () => window && 'ontouchstart' in window

supportsTouchEvents() // true

参考链接

[19 Practical ES6 Snippets to Solve Common JS Problems ] https://dev.to/madza/19-practical-es6-snippets-to-solve-common-js-problems-31o9
[30 seconds of code] https://www.30secondsofcode.org/js/p/1/

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。