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

直接使用吧!盘点一些JS单行代码省毛,网友:钓鱼必备

时间:2023-03-17 20:03:48 科技观察

废话不多说,直接上吧。DOM检查一个元素是否被聚焦constasFocus=(ele)=>ele===document.activeElement获取一个元素的所有兄弟元素constsiblings=(ele)=>.slice.call(ele.parentNode.children).filter((child)=>child!==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]);//caseisEqual([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}),{});//OrconsttoObject=(arr,key)=>Object.fromEntries(arr.map((it)=>[it[key],it]));//casetoObject([{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:'Female'}}*/根据对象数组的属性进行计数constcountBy=(arr,prop)=>arr.reduce((prev,curr)=>((prev[curr[prop]]=++prev[curr[prop]]||1),prev),{});//casecountBy([{branch:'audi',model:'q8',year:'2019'},{branch:'audi',model:'rs7',year:'2020'},{branch:'ford',model:'mustang',year:'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]));//caseinvert({a:'1',b:'2',c:'3'});//来自对象的{1:'a',2:'b',3:'c'}删除所有null和未定义的属性constremoveNullUndefined=(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),{});//caseconstcolors={white:'#ffffff',black:'#000000',red:'#ff0000',green:'#008000',blue:'#0000ff',};sort(colors);/*{black:'#000000',blue:'#0000ff',green:'#008000',red:'#ff0000',white:'#ffffff',}*/检查是否一个对象是PromiseconstisPromise=(obj)=>!!obj&&(typeofobj==='object'||typeofobj==='function')&&typeofobj.then==='function';检查一个对象是否是数组constisArray=(obj)=>Array.isArray(obj);字符串检查路径是否是相对的);//falseisRelative('C:\\foo\\bar\\baz');//falseisRelative('foo/bar/baz.txt');//trueisRelative('foo.md');//true将字符串的第一个字符更改为小写constlowercaseFirst=(str)=>`${str.charAt(0).toLowerCase()}${str.slice(1)}`;//ExamplelowercaseFirst('HelloWorld');//'helloWorld'重复一个字符串constrepeat=(str,numberOfTimes)=>str.repeat(numberOfTimes);//示例repeat('ab',3)//abababDatesadd"am/pm&rdqu"toanhour?;Suffix//`h`isthehournumberbetween0and23constsuffixAmPm=(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));-12-19'),newDate('2020-01-01'));//1839检查日期是否有效constisDateValid=(...val)=>!Number.isNaN(newDate(...val).valueOf());isDateValid("December17,199503:24:00");//true其他检查代码是否在Node.js中运行node!=null;检查代码是否在浏览器中运行.assign({},p,{[k]:p[k]?(Array.isArray(p[k])?p[k]:[p[k]]).concat(v):v}),{});//示例getUrlParams(location.search);//获取参数ersofthecurrentURLgetUrlParams('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);//示例copyToClipboard("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使用Node加密模块生成随机字符串constrandomStr=()=>require('crypto').randomBytes(32).toString('hex');~~终于刷完了,我来点滴滴。下期见!作者:Ahmad译者:FrontendXiaozhi来源:isadee原文:https://javascript.plainenglish.io/17-life-saving-javascript-one-liners-part1-b0b0b32c9f61https://javascript.plainenglish.io/another-17-life-saving-javascript-one-liners-8c335bf73d2c