建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
19 個(gè)解決常見 JavaScript 問題的實(shí)用 ES6 代碼段
在我們的開發(fā)人員工作流程中，我們經(jīng)常遇到可能只需要幾行代碼即可解決的具有挑戰(zhàn)性的問題。在本文中，我嘗試編寫一些有用的代碼片段，這些代碼片段可以在處理 URL、DOM、事件、日期、用戶偏好等時(shí)為你提供幫助。
創(chuàng)新互聯(lián)客戶idc服務(wù)中心，提供服務(wù)器托管、成都服務(wù)器、成都主機(jī)托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開放、透明、穩(wěn)定、高性價(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。
整理學(xué)習(xí)這些的主要標(biāo)準(zhǔn)就是它的實(shí)用性，希望你能從中找到一些有價(jià)值的東西，可以應(yīng)用到你未來的代碼庫中。
1. 如何獲取基礎(chǔ) URL？
const getBaseURL = url => url.replace(/[?#].*$/, '');
getBaseURL('http://url.com/page?name=Adam&surname=Smith');
// 'http://url.com/page'
2. 如何判斷網(wǎng)址是否為絕對網(wǎng)址？
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參數(shù)作為對象？
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.如何檢查元素是否包含另一個(gè)元素？
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. 如何平滑滾動(dòng)元素進(jìn)入視圖？
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.如何處理元素外的點(diǎn)擊？
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-element8.如何生成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. 如何將文本復(fù)制到剪貼板？
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是否開啟？
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中獲取冒號(hào)時(shí)間？
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);
getColonTimeFromDate(new Date()); // '08:38:00'
16. 如何從 Date 生成 UNIX 時(shí)間戳？
const getTimestamp = (date = new Date()) => Math.floor(date.getTime() / 1000);
getTimestamp(); // 1602162242
17、如何查看當(dāng)前用戶的首選語言？
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.如何查看設(shè)備是否支持觸摸事件？
const supportsTouchEvents = () =>
window && 'ontouchstart' in window;
supportsTouchEvents(); // true
總結(jié)
以上就是我今天整理的19個(gè)實(shí)用的ES6代碼片段的內(nèi)容，希望這些內(nèi)容對你也有用，你能夠從中學(xué)習(xí)到一些新的東西，感謝你的閱讀。?
文章名稱：19 個(gè)解決常見 JavaScript 問題的實(shí)用 ES6 代碼段
URL分享：http://m.fisionsoft.com.cn/article/dhpdcog.html
