作者：Madza已经收录在网站中，并且整理了更多往期好评文章，也整理了我的很多文档和教程资料出去。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。本文主要介绍24中的es6方法，这些方法非常实用。请把你的书放在心上，时常阅读。1.如何隐藏所有指定元素consthide2=(el)=>Array.from(el).forEach(e=>(e.style.display='none'));//例子：hideall`onthepage![]()
`element?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)//caseremovephasspecialclass`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||文档.body.scrollTop;如果(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);//exampleelementContains(document.querySelector('head'),document.querySelector('title'));//trueelementContains(document.querySelector('body'),document.querySelector('body'));//false7.如何检查指定元素在视口中是否可见？constelementIsVisibleInViewport=(el,partiallyVisible=false)=>{const{顶部、左侧、底部、右侧}=el.getBoundingClientRect();const{innerHeight,innerWidth}=窗口；返回部分可见？((top>0&&top0&&bottom0&&left0&&right=0&&left>=0&&bottom<=innerHeight&&right<=innerWidth;};//caseelementIsVisibleInViewport(el);//需要从左到右可见elementIsVisibleInViewport(el,true);//需要全屏（上、下、左、右）可以看到8.如何获取元素中的所有图片？constgetImages=(el,includeDuplicates=false)=>{constimages=[...el.getElementsByTagName('img')].map(img=>img.getAttribute('src'));返回包含重复项？images:[...newSet(images)];};//例子：includeDuplicates为true，表示需要排除重复元素getImages(document,true);//['image1.jpg','image2.png','image1.png','...']getImages(文档,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.如何获取当前的URL？constcurrentURL=()=>window.location.href//示例currentURL()//'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),{});//示例getURLParameters('http://url.com/page?n=Adam&s=Smith');//{n:'亚当',s:'史密斯'}getURLParameters('google.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','目标[0]','目标[2].a');//['valtoselect',1,'test']14.等待指定时间后如何调用提供的函数？constdelay=(fn,wait,...args)=>setTimeout(fn,wait,...args);延迟（函数（文本){console.log(文本);},1000,'稍后');//1秒后打印'later'15.如何在给定元素上触发特定事件并选择性地传递自定义数据？consttriggerEvent=(el,eventType,detail)=>el.dispatchEvent(newCustomEvent(eventType,{detail}));//casetriggerEvent(document.getElementById('myId'),'click');triggerEvent(document.getElementById('myId'),'click',{username:'bob'});自定义事件的函数包括Event、CustomEvent和dispatchEvent//Dispatcharesizebuilt-ineventtowindowwindow.dispatchEvent(newEvent('resize'))//直接自定义事件，使用Event构造器：varevent=new事件（'构建'）；varelem=document.querySelector('#id')//监听事件elem.addEventListener('build',function(e){...},false);//触发event.elem.dispatchEvent(event);CustomEvent可以创建自定义程度更高的事件，也可以附加一些数据，具体用法如下：varmyEvent=newCustomEvent(eventname,options);whereoptionscanbe:{detail:{...},bubbles:true,//是否冒泡cancelable:false//是否取消默认事件}其中detail可以存放一些初始化信息，可以在调用other时触发properties就是定义事件是否有冒泡等功能。内置事件会由浏览器根据某些操作触发，而自定义事件则需要手动触发。dispatchEvent函数用于触发一个事件：element.dispatchEvent(customEvent);上面的代码表示在元素上触发了customEvent事件。//添加一个合适的事件监听器obj.addEventListener("cat",function(e){process(e.detail)});//创建并发送eventvarevent=newCustomEvent("cat",{"detail":{"hazcheeseburger":true}});obj.dispatchEvent（事件）；使用自定义事件需要注意兼容性问题，使用jQuery要简单的多：//Bindcustomevents$(element).on('myCustomEvent',function(){});//触发事件$(element).trigger('myCustomEvent');//另外在触发自定义事件时还可以传递更多的参数信息：$("p").on("myCustomEvent",function(event,myName){$(this).text(myName+",你好！");});$("button").click(function(){$("p").trigger("myCustomEvent",[“约翰”]）;}）;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=>{如果(ms<0)ms=-ms;consttime={day:Math.floor(ms/86400000),hour:Math.floor(ms/3600000)%24、分：Math.floor(ms/60000)%60，秒：Math.floor(ms/1000)%60，毫秒：Math.floor(ms)%1000};返回Object.entries(time).filter(val=>val[1]!==0).map(([key,val])=>`${val}${key}${val!==1?'s':''}`).join(',');};//示例formatDuration(1001);//'1秒，1毫秒'formatDuration(34325055574);//'397天，6小时，44分钟，15秒，574毫秒'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.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(请求);请求.发送（数据）；}；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)=>{让current=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;如果（当前>=结束）clearInterval（定时器）；},Math.abs(Math.floor(duration/(end-start))));returntimer;};//实例计数器('#my-id',1,1000,5,2000);//让`id="my-id"`元素创建一个2秒计时器22.如何将字符串复制到剪贴板？constel=document.createElement('textarea');el.value=str;el.setAttribute('只读','');el.style.position='绝对';el.style.left='-9999px';文档.body.appendChild(el);constselected=document.getSelection().rangeCount>0?文档.getSelection().getRangeAt(0):false;el.select();文档.execCommand('复制');文档.body.removeChild(el);如果（选中）{document.getSelection().removeAllRanges();document.getSelection().addRange(选中);}};//示例copyToClipboard('Loremipsum');//'Loremipsum'复制到clipboard23。如何判断页面的浏览器标签是否获得焦点？constisBrowserTabFocused=()=>!document.hidden;//实例isBrowserTabFocused();//true24.目录不存在如何创建？constfs=require('fs');constcreateDirIfNotExists=dir=>(!fs.existsSync(dir)?fs.mkdirSync(dir):undefined);//示例createDirIfNotExists('test');这里面的大部分方法都非常实用，可以解决开发过程中的很多问题。让我们好好利用它。代码部署后，无法实时获知可能存在的BUG。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便在这里推荐给大家。一个简单易用的BUG监控工具Fundebug。https://dev.to/madarsbiss/20-...每周更新交流文章。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。这篇文章在GitHub上https://github.com/qq449245884/xiaozhi已经收录，整理了很多我的文档。欢迎star和改进。大家可以参考考点面试。也关注公众号，后台会回复福利，福利可以看到，收到了。
