일반적인 JS 문제를 해결하기 위한 19가지 실용적인 ES6 스니펫 🚀💯
27425 단어 frontendwebdevproductivityjavascript
모든 스니펫은 30 seconds of code에서 직접 선택했습니다. 그것은 멋진 리소스입니다. 더 많은 내용을 확인하는 것이 좋습니다.
이를 큐레이팅하는 주요 기준은 실용적인 사용성이었습니다. 향후 코드베이스에 적용할 수 있는 가치 있는 것을 찾을 수 있기를 바랍니다.
1. 기본 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'); // 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. 날짜에서 콜론 시간을 얻는 방법은 무엇입니까?
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
글쓰기는 항상 저의 열정이었고 사람들을 돕고 영감을 주는 것이 저에게 기쁨을 줍니다. 질문이 있으시면 언제든지 문의해 주세요!
, 및 GitHub에 나를 연결하십시오!
이와 같은 더 많은 기사를 보려면 내 Blog를 방문하십시오.
Reference
이 문제에 관하여(일반적인 JS 문제를 해결하기 위한 19가지 실용적인 ES6 스니펫 🚀💯), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/madza/19-practical-es6-snippets-to-solve-common-js-problems-31o9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)