在我们的开发人员工作流程中，我们经常遇到可能只需要几行代码就可以解决的具有挑战性的问题。在本文中，我尝试编写一些有用的代码片段，它们可以在处理URL、DOM、事件、日期、用户偏好等时为您提供帮助。组织和学习这些的主要标准是实用性。我希望你能从中找到一些有价值的东西，可以应用到你未来的代码库中。1、如何获取baseURL？constgetBaseURL=url=>url.replace(/[?#].*$/,'');getBaseURL('http://url.com/page?name=Adam&surname=Smith');//'http://url.com/page'2。如何判断网址是否为绝对网址？constisAbsoluteURL=str=>/^[a-z][a-z0-9+.-]*:/.test(str);isAbsoluteURL('https://google.com');//trueisAbsoluteURL('ftp://www.myserver.net');//trueisAbsoluteURL('/foo/bar');//错误3。如何获取URL参数作为对象？constgetURLParameters=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.如何检查元素是否包含另一个元素？constelementContains=(parent,child)=>parent!==child&&parent.contains(child);elementContains(document.querySelector('head'),document.querySelector('title'));//trueelementContains(document.querySelecttor('body'),document.querySelector('body'));//false5.如何获取元素的所有祖先？constgetAncestors=el=>{让祖先=[];while(el){ancestors.unshift(el);el=el.parentNode;}returnancestors;};getAncestors(document.querySelector('nav'));//[document,html,body,header,nav]6.如何让元素平滑滚动到视图中？constsmoothScroll=element=>document.querySelector(element).scrollIntoView({behavior:'smooth'});smoothScroll('#fooBar');//平滑滚动到ID为fooBarsmoothScroll('.fooBar')的元素；//平滑滚动到类为fooBar7的第一个元素。你如何处理元素外的点击？constonClickOutside=(element,callback)=>{document.addEventListener('click',e=>{if(!element.contains(e.target))callback();});};onClickOutside('#my-element',()=>console.log('Hello'));//每当用户在#my-element8之外单击时，都会记录“Hello”。如何生成UUID？constUUIDGeneratorBrowser=()=>([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,c=>(c^(crypto.getRandomValues(newUint8Array(1))[0]&(15>>(c/4)))).toString(16));UUIDGeneratorBrowser();//'7982fcfe-5721-4632-bede-6000885be57d'9.如何获取选中的文本？constgetSelectedText=()=>window.getSelection().toString();getSelectedText();//'Loremipsum'10.如何将文本复制到剪贴板？constcopyToClipboard=str=>{if(navigator&&navigator.clipboard&&navigator.clipboard.writeText)returnnavigator.clipboard.writeText(str);returnPromise.reject('剪贴板API不可用。');};11.如何给HTML元素添加样式？constaddStyles=(el,styles)=>Object.assign(el.style,styles);addStyles(document.getElementById('my-element'),{背景：'red',color:'#ffff00',fontSize:'3rem'});12.如何切换全屏模式？constfullscreen=(mode=true,el='body')=>模式?document.querySelector(el).requestFullscreen():document.exitFullscreen();fullscreen();//在fullsc中打开`body`绿色模式全屏（假）；//退出全屏模式13.如何检测CapsLock是否开启？
constel=document.getElementById('password');constmsg=document.getElementById('password-message');el.addEventListener('keyup',e=>{msg.style=e.getModifierState('CapsLock')?'display:block':'display:none';});14.如何查看日期是否有效？constisDateValid=(...val)=>!Number.isNaN(newDate(...val).valueOf());isDateValid('December17,199503:24:00');//trueisDateValid('1995-12-17T03:24:00');//trueisDateValid('1995-12-17T03:24:00');//falseisDateValid('Duck');//falseisDateValid(1995,11,17);//trueisDateValid(1995,11,17,'Duck');//FalseisDateValid({});//错误15。如何从日期中获取冒号时间？constgetColonTimeFromDate=date=>date.toTimeString().slice(0,8);getColonTimeFromDate(newDate());//'08:38:00'16.如何从Date生成UNIX时间戳？constgetTimestamp=(date=newDate())=>Math.floor(date.getTime()/1000);getTimestamp();//160216224217.如何查看当前用户的首选语言？常量检测语言=(defaultLang='en-US')=>navigator.language||(Array.isArray(navigator.languages)&&navigator.languages[0])||默认语言；检测语言（）；//'nl-NL'18。如何查看用户偏好的配色方案？constprefersDarkColorScheme=()=>window&&window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches;prefersDarkColorScheme();//真19。如何查看设备是否支持触摸事件？constsupportsTouchEvents=()=>window&&'ontouchstart'inwindow;supportsTouchEvents();//true以上就是我今天整理的19个实用ES6代码片段的内容。希望这些内容对你也有用，可以从中学到新东西，感谢阅读