24个ES6方法，用于解决实际开发中的JS问题！！本文主要介绍24个ES6方法。这些方法非常实用。1.如何隐藏所有指定的元素：consthide=(el)=>Array.from(el).forEach(e=>(e.style.display='none'));//例子：hideall`onthepage![]()
`element?hide(document.querySelectorAll('img'))2.如何查看元素是否有指定的类？页面DOM中的每个节点上都有一个classList对象，程序员可以使用里面的new方法在节点上添加、删除、修改CSS类；使用classList，程序员也可以用它来判断一个节点是否被分配了一个CSS类；consthasClass=(el,className)=>el.classList.contains(className)//casehasClass(document.querySelector('p.special'),'special')//true3.如何切换一个元素的类？consttoggleClass=(el,className)=>el.classList.toggle(className)//exampleRemovepwithspecialclasstoggleClass(document.querySelector('p.special'),'special')4.如何获取滚动位置当前页面的？constgetScrollPosition=(el=window)=>({x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollLeft,y:el.pageYOffset!==undefined?el.pageYOffset:el.scrollTop});//casegetScrollPosition();//{x:0,y:200}5.如何平滑滚动到页面顶部？constscrollToTop=()=>{constc=document.documentElement.scrollTop||document.body.scrollTop;if(c>0){window.requestAnimationFrame(scrollToTop);window.scrollTo(0,c-c/8);}}window.requestAnimationFrame()告诉浏览器你要执行一个动画，要求浏览器在下次重绘前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数。回调函数将在浏览器下次重绘之前执行。requestAnimationFrame:优点：回调函数的执行时机由系统决定。如果刷新频率为60Hz，那么回调函数会在每个刷新间隔执行一次，不会造成丢帧或卡顿。6如何判断父元素是否包含子元素？constelementContains=(parent,child)=>parent!==child&&parent.contains(child);//CaseelementContains(document.querySelector('head'),document.querySelector('title'));//trueelementContains(document.querySelector('body'),document.querySelector('body'));//false7.如何检查指定元素在视口中是否可见？constelementIsVisibleInViewport=(el,partiallyVisible=false)=>{const{top,left,bottom,right}=el.getBoundingClientRect();const{innerHeight,innerWidth}=window;returnpartiallyVisible?((top>0&&top0&&bottom0&&left0&&right=0&&left>=0&&bottom<=innerHeight&&right<=innerWidth;};//CaseelementIsVisibleInViewport(el);//需要可见elementIsVisibleInViewportleftandright(el,true);//需要全屏（上、下、左、右）见8.如何获取元素中的所有图片？constgetImages=(el,includeDuplicates=false)=>{constimages=[...el.getElementsByTagName('img')].map(img=>img.getAttribute('src'));returnincludeDuplicates?images:[...newSet(images)];};//示例：includeDuplicates为true表示需要重复元素排除getImages(document,true);//['image1.jpg','image2.png','image1.png','...']getImages(document,false);//['image1.jpg'，'图像2。png'，'...']9。如何确定设备是移动设备还是台式机/笔记本电脑？constdetectDeviceType=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)?'Mobile':'Desktop';//casedetectDeviceType();//"Mobile"or"Desktop"10.如何获取当前URL?constcurrentURL=()=>window.location.href//ExamplecurrentURL()//'https://google.com'11.如何创建对象包含当前的URL参数？constgetURLParameters=url=>(url.match(/([^?=&]+)(=([^&]*))/g)||[]).reduce((a,v)=>((a[v.slice(0,v.indexOf('='))]=v.slice(v.indexOf('=')+1)),a),{});//casegetURLParameters('http://url.com/page?n=Adam&s=Smith');//{n:'Adam',s:'Smith'}getURLParameters('google.com');//{}12.如何将一组表单子元素转化为对象？constformToObject=form=>Array.from(newFormData(form)).reduce((acc,[key,value])=>({...acc,[key]:value}),{});//caseformToObject(document.querySelector)('#form'));//{email:'test@email.com',name:'TestName'}13.如何从对象中检索给定选择器指示的一组属性？constget=(from,...selectors)=>[...selectors].map(s=>s.replace(/\[([^\[\]]*)\]/g,'.$1.').split('.').filter(t=>t!=='').reduce((prev,cur)=>prev&&prev[cur],from));constobj={selector:{to:{val:'valtoselect'}},target:[1,2,{a:'test'}]};//Exampleget(obj,'selector.to.val','target[0]','target[2.a');//['valtoselect',1,'test']14.等待指定时间后如何调用提供的函数？constdelay=(fn,wait,...args)=>setTimeout(fn,wait,...args);delay(function(text){console.log(text);},1000,'later');//1秒后打印“稍后”15.如何在给定元素上触发特定事件并有选择地将其从定义数据中传递？consttriggerEvent=(el,eventType,detail)=>el.dispatchEvent(newCustomEvent(eventType,{detail}));//casetriggerEvent(document.getElementById('myId'),'click');triggerEvent(document.getElementById('myId'),'click',{username:'bob'});自定义事件的函数包括Event、CustoEventanddispatchEvent;//派发一个调整大小的内置事件到windowwindow.dispatchEvent(newEvent('resize'))//直接自定义事件，使用Event构造函数：varevent=newEvent('build');varelem=document.querySelector('#id')//监听事件elem.addEventListener('build',function(e){...},false);//触发事件.elem.dispatchEvent(event);CustomEvent可以创建一个更高的自己来定义一个事件，也可以附上一些数据。具体用法如下：varmyEvent=newCustomEvent(eventname,options);其中options可以是：{detail:{...},bubbles:true,//是否冒泡cancelable:false//是否取消默认事件}其中detail可以存放一些初始化信息，触发时可以调用其他属性定义事件是否具有冒泡等功能。内置事件会由浏览器根据某些操作触发，而自定义事件则需要手动触发。dispatchEvent函数用于触发一个事件：element.dispatchEvent(customEvent);上面的代码表示在元素上触发了customEvent事件。//addanappropriateeventlistenerobj.addEventListener("cat",function(e){process(e.detail)});//createanddispatchtheeventvarevent=newCustomEvent("cat",{"detail":{"hazcheeseburger":true}});obj.dispatchEvent（事件）；使用自定义事件需要注意兼容性问题，但是使用jQuery会简单很多：//绑定自定义事件$(element).on('myCustomEvent',function(){});//触发事件$(element).trigger('myCustomEvent');//另外还可以在触发自定义事件时传递更多的参数信息：$("p").on("myCustomEvent",function(event,myName){$(this).text(myName+",hithere!");});$("button").click(function(){$("p").trigger("myCustomEvent",["John"]);});16.如何移除元素的事件监听器？constoff=(el,evt,fn,opts=false)=>el.removeEventListener(evt,fn,opts);constfn=()=>console.log('!');document.body.addEventListener('click',fn);off(document.body,'点击',fn);17.如何获得给定毫秒数的可读格式？constformatDuration=ms=>{if(ms<0)ms=-ms;consttime={day:Math.floor(ms/86400000),hour:Math.floor(ms/3600000)%24,分:Math.floor(ms/60000)%60,second:Math.floor(ms/1000)%60,millisecond:Math.floor(ms)%1000};returnObject.entries(time).filter(val=>val[1]!==0).map(([key,val])=>`${val}${key}${val!==1?'s':''}`).join(',');};//示例formatDuration(1001);//'1second,1millisecond'formatDuration(34325055574);//'397days,6hours,44minutes,15seconds,574milliseconds'18.如何获取两个日期之间的差值（以天为单位）?constgetDaysDiffBetweenDates=(dateInitial,dateFinal)=>(dateFinal-dateInitial)/(1000*3600*24);//例子getDaysDiffBetweenDates(newDate('2017-12)-13'),newDate('2017-12-22'));//919.如何向传递的URL发出GET请求？consthttpGet=(url,callback,err=console.error)=>{constrequest=newXMLHttpRequest();请求。打开('GET',url,true);request.onload=()=>callback(request.responseText);request.onerror=()=>err(request);request.send();};httpGet('https://jsonplaceholder.typicode.com/posts/1',console.log);//{"userId":1,"id":1,"title":"sampletitle","body":"mytext"}20.如何对传入的URL发起POST请求？consthttpPost=(url,data,callback,err=console.error)=>{constrequest=newXMLHttpRequest();request.open('POST',url,true);request.setRequestHeader('Content-type','application/json;charset=utf-8');request.onload=()=>callback(request.responseText);request.onerror=()=>err(请求);request.send(数据);};constnewPost={userId:1,id:1337,title:'Foo',body:'barbarbar'};constdata=JSON.stringify(newPost);httpPost('https://jsonplaceholder.typicode.com/posts',data,console.log);//{"userId":1,"id":1337,"title":"Foo","body":"barbarbar"}21.如何为指定的选择器创建一个指定范围、步长和持续时间的计数器？constcounter=(selector,start,end,step=1,duration=2000)=>{letcurrent=start,_step=(end-start)*step<0?-step:step,timer=setInterval(()=>{current+=_step;document.querySelector(selector).innerHTML=current;if(current>=end)document.querySelector(selector).innerHTML=end;if(current>=end)clearInterval(timer);},Math.abs(Math.floor(duration/(end-start))));returntimer;};//casecounter('#my-id',1,1000,5,2000);//让带有`id="my-id"`的元素创建一个2秒计时器22.如何将字符串复制到剪贴板？constel=document.createElement('textarea');el.value=str;el。setAttribute('readonly','');el.style.position='absolute';el.style.left='-9999px';document.body.appendChild(el);constselected=document.getSelection().rangeCount>0?document.getSelection().getRangeAt(0):false;el.select();document.execCommand('copy');document.body.removeChild(el);if(selected){document.getSelection()。removeAllRanges();document.getSelection().addRange(selected);}};//例子copyToClipboard('Loremipsum');//'Loremipsum'copiedtoclipboard23.如何判断页面的浏览器标签是否被聚焦？constisBrowserTabFocused=()=>!document.hidden;//caseisBrowserTabFocused();//true24.如何创建目录（如果不存在）?constfs=require('fs');constcreateDirIfNotExists=dir=>(!fs.existsSync(dir)?fs.mkdirSync(dir):undefined);//示例createDirIfNotExists（'测试'）;这里的方法很实用，可以解决很多开发过程中的问题，大家要好好利用来吧！
