当前位置: 首页 > 科技观察

20个简单实用的JavaScript技巧_0

时间:2023-03-13 01:44:13 科技观察

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{document.cookie=`${encodeURIComponent(key)}=;expires=${newDate()}`;};15.生成一个随机字符串。不知道大家有没有遇到过需要生成随机字符串的场景。遇到过很多次了,每次都要google一下,直到学会这个工具的功能。constrandomString=(len)=>{letchars="ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";让strLen=chars.length;让randomStr="";for(leti=0;i{returnstr.charAt(0).toUpperCase()+str.slice(1);};fistLetterUpper('fatfish')//Fatfish17.生成指定范围内的随机数可能出于测试目的,我经常需要生成某个范围内的随机数。constrandomNum=(min,max)=>Math.floor(Math.random()*(max-min+1))+min;randomNum(1,10)//6randomNum(10,20)//1118.命中shuffletheorderofarray怎么打乱数组原来的顺序?constshuffleArray=(array)=>{returnarray.sort(()=>0.5-Math.random())}letarr=[1,-1,10,5]shuffleArray(arr)//[5,-1,10,1]shuffleArray(arr)//[1,10,-1,5]19.在从数组中获取随机值之前,我做了一个彩票项目,需要让数组中的奖品随机出现。constgetRandomValue=array=>array[Math.floor(Math.random()*array.length)];const奖品=['100','