19 個解決常見 JavaScript 問題的實用 ES6 代碼段

英文 | https://javascript.plainenglish.io/19-practical-es6-snippets-to-solve-common-javascript-problems-3ffc4afa9255

在我們的開發人員工作流程中，我們經常遇到可能隻需要幾行代碼即可解決的具有挑戰性的問題。在本文中，我嘗試編寫一些有用的代碼片段，這些代碼片段可以在處理 URL、DOM、事件、日期、使用者偏好等時為你提供幫助。

所有的片段都是我從 30 秒的代碼(https://www.30secondsofcode.org/js/p/1)中精心挑選出來的，這是一個很棒的資源網站，我強烈建議你去看看學習更多的東西。

整理學習這些的主要标準就是它的實用性，希望你能從中找到一些有價值的東西，可以應用到你未來的代碼庫中。

1. 如何擷取基礎 URL？

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


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

2. 如何判斷網址是否為絕對網址？

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'); // scrolls smoothly to the element with the id fooBar
smoothScroll('.fooBar');
// scrolls smoothly to the first element with a class of fooBar      

7.如何處理元素外的點選？

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


onClickOutside('#my-element', () => console.log('Hello'));
// Will log 'Hello' whenever the user clicks outside of #my-element      

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(); // Opens `body` in fullscreen mode
fullscreen(false); // Exits fullscreen mode      

13.如何檢測Caps Lock是否開啟？

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

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. 如何從Date中擷取冒号時間？

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


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

16. 如何從 Date 生成 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個實用的ES6代碼片段的内容，希望這些内容對你也有用，你能夠從中學習到一些新的東西，感謝你的閱讀。

​