1。滚动到页面顶部我们可以使用window.scrollTo()来平滑地滚动到页面顶部。constscrollToTop=()=>{window.scrollTo({top:0,left:0,behavior:"smooth"});};2.滚动到页面底部当然,如果你知道页面的高度,你也可以平滑地滚动到页面底部。constscrollToBottom=()=>{window.scrollTo({top:document.documentElement.offsetHeight,left:0,behavior:"smooth",});};3.将元素滚动到可见区域有时我们需要将元素滚动到可见区域,怎么办?使用scrollIntoView就足够了。constsmoothScroll=(element)=>{element.scrollIntoView({behavior:"smooth",});};4.全屏显示元素你一定遇到过这样的场景,你需要全屏播放视频,并在浏览器中全屏打开页面。常量goToFullScreen=(元素)=>{元素=元素||文件主体;如果(element.requestFullscreen){element.requestFullscreen();}elseif(element.mozRequestFullScreen){element.mozRequestFullScreen();}elseif(element.msRequestFullscreen){element.msRequestFullscreen();}elseif(element.webkitRequestFullscreen){element.webkitRequestFullScreen();}};5.退出浏览器全屏状态是的,这个是和第4点一起使用的,你也会有退出浏览器全屏状态的场景。constgoExitFullscreen=()=>{if(document.exitFullscreen){document.exitFullscreen();}elseif(document.msExitFullscreen){document.msExitFullscreen();}elseif(document.mozCancelFullScreen){document.mozCancel)FullScreen(;}elseif(document.webkitExitFullscreen){document.webkitExitFullscreen();}};6.获取数据类型如何通过获取变量的数据类型函数?constgetType=(value)=>{constmatch=Object.prototype.toString.call(value).match(/(\w+)]/)returnmatch[1].toLocaleLowerCase()}getType()//undefinedgetType({}})//objectgetType([])//arraygetType(1)//numbergetType('fatfish')//stringgetType(true)//booleangetType(/fatfish/)//regexp7.停止冒泡事件是适用于所有平台防止事件冒泡的方法。conststopPropagation=(event)=>{event=event||窗口事件;如果(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble=true;}};8.如何深拷贝一个对象拷贝深度嵌套的对象?constdeepCopy=(obj,hash=newWeakMap())=>{if(objinstanceofDate){returnnewDate(obj);}if(objinstanceofRegExp){returnnewRegExp(obj);}if(hash.has(obj)){returnhash.get(obj);}让allDesc=Object.getOwnPropertyDescriptors(obj);让cloneObj=Object.create(Object.getPrototypeOf(obj),allDesc);hash.set(obj,cloneObj);for(letkeyofReflect.ownKeys(obj)){if(obj[key]&&typeofobj[key]==="object"){cloneObj[key]=deepCopy(obj[key],hash);}else{cloneObj[key]=obj[key];}}返回cloneObj;};9.确定设备类型我们经常需要这样做,以便在手机上显示A逻辑,在PC上显示B逻辑。基本上,设备类型是通过识别浏览器的userAgent来确定的。constisMobile=()=>{return!!navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|WindowsPhone|Phone)/i);};10.判断设备是Android还是IOS除了要区分是移动端还是PC端,我们经常需要区分当前设备是Android还是IOS。constisAndroid=()=>{return/android/i.test(navigator.userAgent.toLowerCase());};constisIOS=()=>{letreg=/iPhone|iPad|iPod|iOS|Macintosh/i;返回reg.test(navigator.userAgent.toLowerCase());};11.获取浏览器类型及版本作为前端开发者,你可能会遇到各种兼容性问题,你可能需要获取浏览器的类型及版本。constgetExplorerInfo=()=>{让t=navigator.userAgent.toLowerCase();返回0<=t.indexOf("msie")?{//ie<11type:"IE",version:Number(t.match(/msie([\d]+)/)[1]),}:!!t.match(/trident\/.+?rv:(([\d.]+)))/)?{//即11类型:“IE”,版本:11,}:0<=t.indexOf(“edge”)?{type:"Edge",version:Number(t.match(/edge\/([\d]+)/)[1]),}:0<=t.indexOf("firefox")?{类型:“Firefox”,版本:Number(t.match(/firefox\/([\d]+)/)[1]),}:0<=t.indexOf(“chrome”)?{type:"Chrome",version:Number(t.match(/chrome\/([\d]+)/)[1]),}:0<=t.indexOf("opera")?{type:"Opera",version:Number(t.match(/opera.([\d]+)/)[1]),}:0<=t.indexOf("Safari")?{type:"Safari",version:Number(t.match(/version\/([\d]+)/)[1]),}:{type:t,version:-1,};};12.setcookiescookie可能是我见过的最糟糕的API,它太难用了,我们不得不重新封装它以最大限度地提高开发效率constsetCookie=(key,value,expire)=>{constd=new日期();d.setDate(d.getDate()+expire);document.cookie=`${key}=${value};expires=${d.toUTCString()}`;};13.获取cookies除了写cookies,我们还会参与他们的读取操作。constgetCookie=(key)=>{constcookieStr=unescape(document.cookie);constarr=cookieStr.split(";");让cookieValue="";for(leti=0;i
