微信搜索【伟大的走向世界】，第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。废话不多说，直接上吧。DOM检查元素是否聚焦consthasFocus=(ele)=>ele===document.activeElement获取元素的所有兄弟constsiblings=(ele)=>.slice.call(ele.parentNode.children).filter((孩子)=>孩子!==ele);获取选中的文本constgetSelectedText=()=>window.getSelection().toString();返回上一页history.back();//Orhistory.go(-1);清除所有cookiesconstcookies=document.cookie.split(';').map((item)=>item.split('=')).reduce((acc,[k,v])=>(acc[k.trim().replace('"','')]=v)&&acc,{});将cookie转换为对象constcookies=document.cookie.split(';').map((item)=>item.split('=')).reduce((acc,[k,v])=>(acc[k.trim().replace('"','')]=v)&&acc,{});Array比较两个数组//`a`和`b`都是数组constisEqual=(a,b)=>JSON.stringify(a)===JSON.stringify(b);//或者constisEqual=(a,b)=>a.length===b.length&&a.every((v,i)=>v===b[i]);//例子isEqual([1,2,3],[1,2,3]);//trueisEqual([1,2,3],[1,'2',3]);//false将对象数组转换为单个对象consttoObject=(arr,key)=>arr.reduce((a,b)=>({...a,[b[key]]:b}),{});//或consttoObject=(arr,key)=>Object.fromEntries(arr.map((it)=>[it[key],it]));//实例toObject([{id:'1',name:'Alpha',gender:'男'},{id:'2',name:'Bravo',gender:'男'},{id:'3',name:'Charlie',gender:'女'}],'id');/*{'1':{id:'1',name:'Alpha',gender:'Male'},'2':{id:'2',name:'Bravo',gender:'Male'},'3':{id:'3',name:'Charlie',gender:'女'}}*/根据对象数组的属性进行计数constcountBy=(arr,prop)=>arr.reduce((prev,curr)=>((prev[curr[prop]]=++prev[curr[prop]]||1),prev),{});//casecountBy([{branch:'audi'，模型：'q8'，年份：'2019'}，{分支：'奥迪'，模型：'rs7'，年份：'2020'}，{分支：'福特'，模型：'野马'，年份：'2019'},{branch:'ford',model:'explorer',year:'2020'},{branch:'bmw',model:'x7',year:'2020'},],'branch');//{'audi':2,'ford':2,'bmw':1}检查数组是否为空constisNotEmpty=(arr)=>Array.isArray(arr)&&Object.keys(arr).length>0;//caseisNotEmpty([]);//falseisNotEmpty([1,2,3]);//true对象检查多个对象是否相等constisEqual=(...objects)=>objects.every((obj)=>JSON.stringify(obj)===JSON.stringify(objects[0]));//示例console.log(isEqual({foo:'bar'},{foo:'bar'}));//trueconsole.log(isEqual({foo:'bar'},{bar:'foo'}));//false从对象数组中提取指定属性的值constpluck=(objs,property)=>objs.map((obj)=>obj[property]);//例子constaa=pluck([{name:'小智',age:20},{name:'大智',age:25},{name:'王大智',age:30},],'name');//['小智','大智','王大智']反转一个对象的key和valuesconstinvert=(obj)=>Object.keys(obj).reduce((res,k)=>Object.assign(res,{[obj[k]]:k}),{});//或constinvert=(obj)=>Object.fromEntries(Object.entries(obj).map(([k,v])=>[v,k]));//大小写反转({a:'1',b:'2',c:'3'});//{1:'a',2:'b',3:'c'}从对象属性中移除所有null和undefinedconstremoveNullUndefined=(obj)=>Object.entries(obj).reduce((a,[k,v])=>(v==null?a:((a[k]=v),a)),{});//constremoveNullUndefined=(obj)=>Object.entries(obj).filter(([_,v])=>v!=null).reduce((acc,[k,v])=>({...acc,[k]:v}),{});//或constremoveNullUndefined=(obj)=>Object.fromEntries(Object.entries(obj).filter(([_,v])=>v!=null));//示例removeNullUndefined({foo:null,bar:undefined,fuzz:42});//{fuzz:42}根据属性对对象进行排序Object.keys(obj).sort().reduce((p,c)=>((p[c]=obj[c]),p),{});//constcolors={white:'#ffffff',black:'#000000',red:'#ff0000',green:'#008000',blue:'#0000ff',};sort(颜色);/*{black:'#000000',blue:'#0000ff',green:'#008000',red:'#ff0000',white:'#ffffff',}*/检查一个对象是否是PromiseconstisPromise=(obj)=>!!obj&&(typeofobj==='object'||typeofobj==='function')&&typeofobj.then==='function';检查对象是否为数组constisArray=(obj)=>Array.isAr射线（对象）；string检查路径是否是相对路径constisRelative=(path)=>!/^([a-z]+:)?[\\/]/i.test(path);//示例isRelative('/foo/bar/baz');//falseisRelative('C:\\foo\\bar\\baz');//falseisRelative('foo/bar/baz.txt');//trueisRelative('foo.md');//true将字符串的第一个字符更改为小写constlowercaseFirst=(str)=>`${str.charAt(0).toLowerCase()}${str.slice(1)}`;//示例lowercaseFirst('你好世界'）;//'helloWorld'重复一个字符串constrepeat=(str,numberOfTimes)=>str.repeat(numberOfTimes);//示例repeat('ab',3)//abababDates将“am/pm”后缀添加到一个小时//`h`是0到23之间的小时数constsuffixAmPm=(h)=>`${h%12===0?12:h%12}${h<12?'am':'pm'}`;//示例后缀AmPm(0);//'12am'后缀AmPm(5);//'5am'后缀AmPm(12);//'12pm'后缀AmPm(15);//'3pm'后缀AmPm(23);//'11pm'计算两个日期之间的不同天数constdiffDays=(date,otherDate)=>Math.ceil(Math.abs(date-otherDate)/(1000*60*60*24));//示例diffDays(newDate('2014-12-19'),newDate('2020-01-01'));//1839检查日期是否有效nstisDateValid=(...val)=>!Number.isNaN(newDate(...val).valueOf());isDateValid("1995年12月17日03:24:00");//true其他检查代码是否在Node.js中运行constisNode=typeofprocess!=='undefined'&&process.versions!=null&&process.versions.node!=null;检查代码是否在浏览器中运行constisBrowser=typeofwindow==='object'&&typeofdocument==='object';将URL参数转换为对象constgetUrlParams=(query)=>Array.from(newURLSearchParams(query)).reduce((p,[k,v])=>Object.assign({},p,{[k]:p[k]?(Array.isArray(p[k])?p[k]:[p[k]]).concat(v):v}),{});//示例getUrlParams(location.搜索）;//获取当前URL的参数getUrlParams('foo=Foo&bar=Bar');//{foo:"Foo",bar:"Bar"}//DuplicatekeygetUrlParams('foo=Foo&foo=Fuzz&bar=Bar');//{foo:["Foo","Fuzz"],bar:"Bar"}黑暗检测模式constisDarkMode=window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches;复制到剪贴板constcopyToClipboard=(text)=>navigator.clipboard.writeText(text);//examplecopyToClipboard("HelloWorld");将RGB转换为十六进制constrgbToHex=(r,g,b)=>"#"+((1<<24)+(r<<16)+(g<<8)+b).toString(16)。slice(1);//例子rgbToHex(0,51,255);//#0033ff生成一个随机的十六进制颜色constrandomColor=()=>`#${Math.random().toString(16).slice(2,8).padEnd(6,'0')}`;//或constrandomColor=()=>`#${(~~(Math.random()*(1<<24))).toString(16)}`;生成随机IP地址constrandomIp=()=>Array(4).fill(0).map((_,i)=>Math.floor(Math.random()*255)+(i===0?1:0)).join('.');//示例randomIp();//175.89.174.131使用Nodecrypto模块生成随机字符串constrandomStr=()=>require('crypto').randomBytes(32).toString('hex');~~最后，我是刷完了，还有我要打点滴，下次见！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug作者：Ahmad译者：前端小智来源：isadee原文：https://javascript.plainengli...https://javascript.plainengli...沟通有梦，有干货，微信搜索【大招来了世界】追踪这位凌晨还在洗碗的耍玩志。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
