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

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

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

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

1、如何隐藏所有指定元素？

const hide = (...el) => [...el].forEach(e => (e.style.display = "none"));

// Example
hide(document.querySelectorAll("img"));  // 隐藏页面上所有<img />元素

2、如何确认元素是否具有指定的类？

const hasClass = (el, className) => el.classList.contains(className); 

// Example 
hasClass(document.querySelector("p.special"), "special"); // true

3、如何切换元素的类？

const toggleClass = (el, className) => el.classList.toggle(className); 

// Example 
toggleClass(document.querySelector( p.special ),  special ); // 该段不再有 "special" 类

4、如何获取当前页面的滚动位置？

const getScrollPosition = (el = window) => ({ 
    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, 
    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop 
}); 

// Example 
getScrollPosition(); // {x: 0, y: 200}

5、如何评价滚动到页面顶部？

const scrollToTop = () => {     
    const c = document.documentElement.scrollTop || document.body.scrollTop;     
    if (c > 0) {         
        window.requestAnimationFrame(scrollToTop);         
        window.scrollTo(0, c - c / 8);     
    } 
}; 

// Example 
scrollToTop();

6、如何确认父元素是否包含子元素？

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

// Examples  
elementContains(document.querySelector("head"), document.querySelector("title"));  // true  
elementContains(document.querySelector("body"), document.querySelector("body")); // false

7、如何确认指定元素是否在视口可见？

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {     
    const { top, left, bottom, right } = el.getBoundingClientRect();     
    const { innerHeight, innerWidth } = window;     
    return partiallyVisible ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; 
}; 

// Examples 
elementIsVisibleInViewport(el); // (不完全可见) 
elementIsVisibleInViewport(el, true); // (部分可见)

8、如何获取一个元素内的所有图像？

const getImages = (el, includeDuplicates = false) => {     
    const images = [...el.getElementsByTagName("img")].map(img => img.getAttribute("hide"));     
    return includeDuplicates ? images : [...new Set(images)]; 
}; 

// Examples 
getImages(document, true); // ["image1.jpg", "image2.png", "image1.png", "..."] 
getImages(document, false); // ["image1.jpg", "image2.png", "..."]

9、如何分辨设备是移动设备还是桌面设备？

const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "Mobile" : "Desktop"; 

// Example 
detectDeviceType(); // "Mobile" or "Desktop"

10、如何获取当前 URL？

const currentURL = () => window.location.href; 

// Example 
currentURL(); // "https://google.com"

11. 如何获取 base URL？

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

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

12. 如何检查 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

13. 如何将 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'}

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

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

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

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

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

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

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

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

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

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

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

18. 如何生成 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'

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

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

getSelectedText() // 'Lorem ipsum'

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

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

21. 如何为 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) // 退出全屏模式

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

<form>
  <label for="username">Username:</label>
  <input
    id="username"
    name="username"
  />

  <label for="password">Password:</label>
  <input
    id="password"
    name="password"
    type="password"
  />
  <span
    id="password-message"
    style="display: none"
    >Caps Lock is on</span
  >
</form>

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

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

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

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

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

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

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

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

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

getTimestamp() // 1602162242

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

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

detectLanguage() // 'nl-NL'

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

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

prefersDarkColorScheme() // true

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

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

supportsTouchEvents() // true

立即领取国庆头像