本文主要介绍24中的ES6方法，这些方法都挺实用的，本本请记好，时不时翻出来看看。

1.如何隐藏所有指定的元素consthide=(el)=>Array.from(el).forEach(e=>(e.style.display='none'));//事例:隐藏页面上所有`<img>`元素?hide(document.querySelectorAll('img'))2.如何检查元素是否具有指定的类？

页面DOM里的每个节点都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

consthasClass=(el,className)=>el.classList.contains(className)//事例hasClass(document.querySelector('p.special'),'special')//true3.如何切换一个元素的类？consttoggleClass=(el,className)=>el.classList.toggle(className)//事例移除p具有类`special`的special类toggleClass(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});//事例getScrollPosition();//{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);}}//事例scrollToTop()

window.requestAnimationFrame()告诉浏览器————你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新该动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。

6.如何检查父元素是否包含子元素？constelementContains=(parent,child)=>parent!==child&&parent.contains(child);//事例elementContains(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&&top<innerHeight)||(bottom>0&&bottom<innerHeight))&&((left>0&&left<innerWidth)||(right>0&&right<innerWidth)):top>=0&&left>=0&&bottom<=innerHeight&&right<=innerWidth;};//事例elementIsVisibleInViewport(el);//需要左右可见elementIsVisibleInViewport(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','image2.png','...']9.如何确定设备是移动设备还是台式机/笔记本电脑？constdetectDeviceType=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)?'Mobile':'Desktop';//事例detectDeviceType();//"Mobile"or"Desktop"10.HowtogetthecurrentURL？constcurrentURL=()=>window.location.href//事例currentURL()//'https://谷歌.com'11.如何创建一个包含当前URL参数的对象？constgetURLParameters=url=>(url.match(/([^?=&])(=([^&]*))/g)||[]).reduce((a,v)=>((a[v.slice(0,v.indexOf('='))]=v.slice(v.indexOf('=')1)),a),{});//事例getURLParameters('http://url.com/page?n=Adam&s=Smith');//{n:'Adam',s:'Smith'}getURLParameters('谷歌.com');//{}12.如何将一组表单元素转化为对象？constformToObject=form=>Array.from(newFormData(form)).reduce((acc,[key,value])=>({...acc,[key]:value}),{});//事例formToObject(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秒后打印'later'15.如何在给定元素上触发特定事件且能选择地传递自定义数据？consttriggerEvent=(el,eventType,detail)=>el.dispatchEvent(newCustomEvent(eventType,{detail}));//事例triggerEvent(document.getElementById('myId'),'click');triggerEvent(document.getElementById('myId'),'click',{username:'bob'});

自定义事件的函数有Event、CustomEvent和dispatchEvent

//向window派发一个resize内置事件window.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//是否取消默认事件}

其中，detall可以存放一些初始化的信息，可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。

内置的事件会由浏览器根据某些操作进行触发，自定义的事件就需要人工触发。dispatchEvent函数就是用来触发某个事件：

element.dispatchEvent(customEvent);

上面代码表示，在element上面触发了customEvent这个事件。

//addanappropriateeventlistenerobj.addEventListener("cat",function(e){process(e.detail)});//createanddispatchtheeventvarevent=newCustomEvent("cat",{"detail":{"hazcheeseburger":true}});obj.dispatchEvent(event);使用自定义事件需要注意兼容性问题，而使用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,'click',fn);17.如何获得给定毫秒数的刻度格式？constformatDuration=ms=>{if(ms<0)ms=-ms;consttime={day:Math.floor(ms/86400000),hour:Math.floor(ms/3600000)%24,minute: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();request.open('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);request.send(data);};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;};//事例counter('#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;//事例isBrowserTabFocused();//true24.如何创建目录(如果不存在)？constfs=require('fs');constcreateDirIfNotExists=dir=>(!fs.existsSync(dir)?fs.mkdirSync(dir):undefined);//事例createDirIfNotExists('test');

这里面的方法都挺实用的，可以解决很多开发过程问题，大家就好好利用起来吧。