「终极收藏」前端开发必备：超全JavaScript公共方法大全

涳皛

目录引言1安装js-tool-big-box工具包1.1安装1.2截至目前的方法集合 2时间日期类 2.1更灵活的年月日时分秒2.2 日期时间转换2.3个性的时间组合 2.4 某个时间距离现在2.5 平年还是闰年2.6指定月份的天数 2.7属相2.8获取指定年份的法定节假日 3页面存储类3.1获取浏览器url参数值3.2设置cookie3.3获取cookie3.4删除cookie3.5设置localStorage3.6获取localStorage的值4事件相关 4.1防抖4.2节流5Number相关方法学习5.1千分号分割5.2 判断是否大于05.3判断是否大于0的整数5.4生成指定范围内的随机数5.5 生成指定位数的随机数5.6数字转小写中文5.7数字转大写中文6字符串相关方法学习6.1字符串反转6.2横岗转小驼峰6.3横岗转大驼峰6.4版本号比较6.5获取字符串字节长度6.6生成UUID6.7通过身份证号获取生日、性别和年龄6.8字符串中间加星号遮盖7正则验证相关方法学习7.1邮箱验证7.2手机号验证7.3url格式验证7.4身份证号码格式验证7.5IP地址格式验证7.6邮政编码验证7.7是否Unicode字符8发送请求相关8.1发送JSONP跨域请求9 data数据相关方法学习9.1获取幸运者9.2复制文字到剪贴板9.3数组去重10浏览器相关 10.1判断是否手机端浏览器10.2检测某个元素是否处于可视范围内最后引言在前端开发中，JavaScript是必不可少的一部分，而掌握各种常用的公共方法更是提升开发效率和代码质量的关键。无论你是初学者还是资深开发者，了解并熟练运用这些方法都能让你的代码更加简洁、高效。本篇博客将为你详细汇总并解析最全的JavaScript公共方法，涵盖数组、对象、字符串、日期等各个方面的常用技巧。希望通过这篇文章，能为你的前端开发之路提供有力的帮助，成为你开发过程中不可或缺的参考指南。下面开始啦，建议收藏起来，前端开发项目必备。1安装js-tool-big-box工具包1.1安装我已经将所有公共方法，按模块的形式，集成到了js-tool-big-box工具包中，大家不比担心安装后会使项目体积变大，不会的。执行安装命令：npmi js-tool-big-boxnpm包地址：js-tool-big-box-npm(npmjs.com) 包中提供了工具的学习文档地址以及作者1.2截至目前的方法集合  那么js-tool-big-box这个方法库现在都有哪些公共方法可以供大家使用了呢，我们看一下下面的图就知道啦2时间日期类 想要使用时间日期类的公共方法，需要先在项目中导入 timeBox对象，所有的时间日期类方法都在这个对象下面，引入代码如下：import{timeBox}from'js-tool-big-box';2.1更灵活的年月日时分秒constyear=timeBox.getMyYear(null,'年');console.log(year);//2024年constyearALB=timeBox.getMyYear(null,'سنة');console.log(yearALB);//2024سنةconstmonth=timeBox.getMyMonth(null,'月');console.log(month);//05月constdate=timeBox.getMyDate(null);console.log(date);//23consthour=timeBox.getMyHour(null,'hour');console.log(hour);//20hourconstminutes=timeBox.getMyMinutes(null,'min');console.log(minutes);//10minconstseconds=timeBox.getMySeconds(null,'秒');console.log(seconds);//10秒2.2 日期时间转换constdateTime1=timeBox.getFullDateTime(null,'YYYY-MM-DD','/');console.log(dateTime1);//2024/05/22constdateTime2=timeBox.getFullDateTime(null,'YYYY-MM-DDhh:mm','~');console.log(dateTime2);//2024`05`2220:11constdateTime3=timeBox.getFullDateTime(null,'YYYY-MM-DDhh:mm:ss');console.log(dateTime3);//2024-05-2220:11:222.3个性的时间组合 consthourShow=timeBox.getMyDate(null,'点');constminShow=timeBox.getMyMinutes(null,'分');consttimeShow=`${hourShow}${minShow}`;//8点22分2.4 某个时间距离现在constunitObj={beforeUnit:'before',afterUnit:'after',yearUnit:'year',monthUnit:'month',dateUnit:'days',hourUnit:'hour',minutesUnit:'min',secondUnit:'sec'}constshowData=timeBox.getDistanceNow('1908-12-0206:00:00',unitObj);//溥仪登基啦console.log('溥仪登基详细时间===',showData);constshowData1=timeBox.getDistanceNow('2030-04-1920:15:59');//移民火星啦console.log('人类移民火星详细时间===',showData1);注意：这个方法返回的是详细的时间对象，需要甄别使用哪个具体的详细信息。2.5 平年还是闰年constleapYear=timeBox.getLeapYear('2024-12');console.log('=-=2024年是',leapYear?'闰年':'平年');//闰年constleapYear1=timeBox.getLeapYear('2019');console.log('=-=2019年是',leapYear1?'闰年':'平年');//平年constleapYear2=timeBox.getLeapYear(null);console.log('=-=今年是',leapYear2?'闰年':'平年');//闰年2.6指定月份的天数 constdays=timeBox.getDaysInMonth('2023',11);console.log('2023年12月的天数===',days);//31constdays1=timeBox.getDaysInMonth(null,1);console.log('今年2月的天数===',days1);//292.7属相constbornAnimal=timeBox.getAnimalOfBorn('2025');console.log('2025年出生的人属相是：==-==',bornAnimal);//snakeconstbornAnima2=timeBox.getAnimalOfBorn('1990-10-25');console.log('1990年出生的人属相是：==-==',bornAnima2);//house2.8获取指定年份的法定节假日 constholiday2024=timeBox.getHoliday('2024');console.log('----',holiday2024);注意：这个方法只能获取2024年以后的法定节假日显示 3页面存储类 页面存储包含获取浏览器url的参数，cookie设置、获取、删除等，localStorage的设置，获取等。想使用存储类的公共方法，需要先在项目中导入 storeBox对象：import{storeBox}from'js-tool-big-box';3.1获取浏览器url参数值以 http://127.0.0.1:8080/#/404?type=text&go2=232323&q=my2521为例constparam=storeBox.getUrlParam('q');console.log('获取到q的参数为：：：',param);//my25213.2设置cookiestoreBox.setCookie('school','我的中学',1000*10);storeBox.setCookie('name','zhangsan');3.3获取cookieconstmyCookie1=storeBox.getCookie('school');console.log('我设置过的school是：：',myCookie1);//我的中学3.4删除cookiestoreBox.deleteCookie('name');constmyNmaeCookie=storeBox.getCookie('name');console.log('我已把name这个cookie删了：：',myNmaeCookie);3.5设置localStoragestoreBox.setLocalstorage('today','星期一',1000*6);3.6获取localStorage的值consttoday=storeBox.getLocalstorage('today');console.log('6秒后获取的值===',today);4事件相关 目前事件相关的公共方法主要是有防抖和节流2个，需要现在项目中导入 eventBox对象：import{eventBox}from'js-tool-big-box'; 4.1防抖4.2节流5Number相关方法学习工具库也提供了Number相关的方法学习，需要先在项目中导入 numberBox  对象：import{numberBox}from'js-tool-big-box';5.1千分号分割constnum1=numberBox.formatNumberWithCommas(13498345.333,2);console.log('num1转化后：',num1);//13,498,345.33constnum11=numberBox.formatNumberWithCommas(13498345.333);console.log('num11转化后：',num11);//13,498,3455.2 判断是否大于0constnum2=numberBox.isGreater0('-33.23');console.log('-33.23是大于0的数字吗？',num2);//falseconstnum3=numberBox.isGreater0('33.23s');console.log('33.23s是大于0的数字吗？',num3);//falseconstnum33=numberBox.isGreater0(2024);console.log('2024是大于0的数字吗？',num33);//true5.3判断是否大于0的整数constnum4=numberBox.isGreater0Integer('33.23');console.log('33.23是大于0的整数吗？',num4);//falseconstnum5=numberBox.isGreater0Integer(99);console.log('99是大于0的整数吗？',num5);//true5.4生成指定范围内的随机数//生成80到100的随机整数constnum6=numberBox.getRandomNumber(80,100);console.log('80到100的随机整数：：',num6);//86//生成50到56并带有2位小数的随机数constnum7=numberBox.getRandomNumber(50,56,2);console.log('50到56并带有2位小数的随机数：：',num7);//55.575.5 生成指定位数的随机数//生成一个4位的随机数字constnum66=numberBox.generateUniqueRandomNumber(4);console.log('生成的4位的随机数字：',num66);//6257//生成一个6位的随机数字constnum77=numberBox.generateUniqueRandomNumber(6);console.log('生成的6位的随机数字：',num77);//3714205.6数字转小写中文constnum8=numberBox.numberToChinese('456788.12');console.log('看一下456788.12的中文小写展示：',num8);constnum9=numberBox.numberToChinese(122456788.5);console.log('看一下122456788.5的中文小写展示：',num9);5.7数字转大写中文constnum10=numberBox.numberToChinese(22456788.5,'upper');console.log('看一下22456788.5的中文大写展示：',num10);6字符串相关方法学习 字符串相关的方法呢，js-tool-big-box工具库对外提供了 stringBox对象，可供开发者使用：import{stringBox}from'js-tool-big-box';6.1字符串反转conststring1=stringBox.reverseString('Hello,World!');console.log('需要反转的字符串：：',string1);6.2横岗转小驼峰conststring2=stringBox.hyphenToCamelCase('my-class-name','small');console.log('小驼峰转换：：',string2);6.3横岗转大驼峰conststring3=stringBox.hyphenToCamelCase('my-class-name','big');console.log('大驼峰转换：：',string3);6.4版本号比较constversionResult=stringBox.compareVersions('1.0.21','1.0.12');console.log('1.0.21和1.0.12比较：',versionResult);//1constversionResult1=stringBox.compareVersions('1.2.21','1.3.12');console.log('1.2.21和1.3.12比较：',versionResult1);//-1constversionResult2=stringBox.compareVersions('1.1.3','1.1.3.1');console.log('1.1.3和1.1.3.1比较：',versionResult2);//-1constversionResult3=stringBox.compareVersions('1.1.3','1.1.3');console.log('1.1.3和1.1.3比较：',versionResult3);//06.5获取字符串字节长度注意：这里不是获取字符串的长度，是字节长度，注意区分conststr1='Helloworld!!!';conststr2='我是Thefirstone,😶HaHa~';conststr1ByteLength=stringBox.byteLength(str1);conststr2ByteLength=stringBox.byteLength(str2);console.log('Helloworld!!!的字节长度是：',str1ByteLength);//14console.log('我是Thefirstone,😶HaHa~：',str2ByteLength);//306.6生成UUIDconstmyUUID1=stringBox.generateUUID();console.log('获取到的uuid值第一次',myUUID1);//8a556cd8-4c53-38dd-149d-38a32fe27cb96.7通过身份证号获取生日、性别和年龄constcardStr='53010219200508011XF';constidCardObj=stringBox.getInfoByIdCard(cardStr);console.log('此人身份详情：',idCardObj);6.8字符串中间加星号遮盖constcardStr='53010219200508011X';constphone='13344445555';constcardStrMask=stringBox.maskString(cardStr,4,4,'*',6);constphoneMask=stringBox.maskString(phone,4,4,'*',3);console.log('身份证号加星后为：',cardStrMask);console.log('手机号加星后为：',phoneMask);7正则验证相关方法学习之前我们经常需要写正则表达式做一些验证，现在好了，我们有了公共方法，再也不用四处找去了，工具库提供了 matchBox  对象import{matchBox}from'js-tool-big-box';7.1邮箱验证constemail1='232322@qq.com';constemail2='232322qq.ff';constemailResult1=matchBox.email(email1);constemailResult2=matchBox.email(email2);console.log('emailResult1验证结果：',emailResult1);//trueconsole.log('emailResult2验证结果：',emailResult2);//false7.2手机号验证constphone1='13813313212';constphone2='2381331320';constphoneResult1=matchBox.phone(phone1);constphoneResult2=matchBox.phone(phone2);console.log('phoneResult1验证结果：',phoneResult1);//trueconsole.log('phoneResult2验证结果：',phoneResult2);//false7.3url格式验证consturl1='https://aa.test.com/user?q=3';consturl2='//33.com/user';consturlResult1=matchBox.url(url1);consturlResult2=matchBox.url(url2);console.log('urlResult1验证结果：',urlResult1);//trueconsole.log('urlResult2验证结果：',urlResult2);//false7.4身份证号码格式验证constidCard1='120333199007712322x';constidCard2='220333299007712322';constidCardResult1=matchBox.idCard(idCard1);constidCardResult2=matchBox.idCard(idCard2);console.log('idCardResult1验证结果：',idCardResult1);//falseconsole.log('idCardResult2验证结果：',idCardResult2);//true7.5IP地址格式验证constip1='192.168.1.111';constip2='333.168.299.0';constipResult1=matchBox.ip(ip1);constipResult2=matchBox.ip(ip2);console.log('ipResult1验证结果：',ipResult1);//trueconsole.log('ipResult2验证结果：',ipResult2);//false7.6邮政编码验证constpostal1='075616';constpostal2='956s6';constpostalResult1=matchBox.postal(postal1);constpostalResult2=matchBox.postal(postal2);console.log('postalResult1验证结果：',postalResult1);//trueconsole.log('postalResult2验证结果：',postalResult2);//false7.7是否Unicode字符constcode1='A';constcode2='😶';constcode3='🧚‍♂️';constcode1Result=matchBox.checkUnicode(code1);constcode2Result=matchBox.checkUnicode(code2);constcode3Result=matchBox.checkUnicode(code3);console.log('A是不是一个Unicodecharacter？',code1Result);console.log('😶是不是一个Unicodecharacter？',code2Result);console.log('🧚‍♂️是不是一个Unicodecharacter？',code3Result);8发送请求相关 目前正常的Ajax还没有整理，fetch有自己的请求方法，很好用，所以这里只是封装了JSONP请求的公共方法，js-tool-big-box对外供了 ajaxBox对象供开发者使用：import{ajaxBox}from'js-tool-big-box';8.1发送JSONP跨域请求ajaxBox.sendJSONP('http://127.0.0.1:3000/users/bar','callback',function(data){console.log('获取到的JSONP请求数据',data);});9 data数据相关方法学习data这里就内容会慢慢比较多，逐渐去丰富，工具库对外提供了 dataBox方法供开发者使用：import{dataBox}from'js-tool-big-box';9.1获取幸运者constpeopleData='张三0,张三1,张三2,张三3,张三4,张三5,张三6,张三7,张三8,张三9,张三10,张三11,张三12,张三13,张三14,张三15,张三16,张三17,张三18,张三19,张三20,张三21,张三22,张三23,张三24,张三25,张三26,张三27,张三27,张三29,张三30,张三31,张三32,张三33,张三34,张三35,张三36,张三37,张三38,张三39,张三40';this.luckPeople=dataBox.luck(peopleData,3);9.2复制文字到剪贴板consttext='我在CSDN写工具，js-tool-big-box';dataBox.copyText(text,()=>{//复制成功后的业务逻辑},()=>{//复制异常后的业务逻辑}9.3数组去重constarr1=[1,2,3,5,1,2,3,4];constarr2=[1,2,'jim','1','tom',1,'张三',2,'3'];constuniqueArr1=dataBox.uniqueArray(arr1);constuniqueArr2=dataBox.uniqueArray(arr2);console.log('去重后的arr1的值为：',uniqueArr1);//[1,2,3,5,4]console.log('去重后的arr2的值为：',uniqueArr2);//[1,2,'jim','1','tom','张三','3']10浏览器相关 公共方法，怎么能少的了浏览器相关的内容呢，js-tool-big-box对外提供了 browserBox对象供开发者使用：import{browserBox}from'js-tool-big-box';10.1判断是否手机端浏览器constcheckBrowser=browserBox.isMobileBrowser();console.log('当前是手机端浏览器吗？',checkBrowser); 10.2检测某个元素是否处于可视范围内mounted(){window.addEventListener('scroll',this.handleScroll);},methods:{handleScroll(){constisInScreen=browserBox.isElementInViewport('.demo');console.log('.demo在可视区域内吗？',isInScreen);},}最后今天的javascript公共方法就总结到这里，已经上万字了，我为大家总结了js-tool-big-box的详细学习API和讲解说明，大家需要的可以去学习哦：js-tool-big-box学习文档npm包的地址： js-tool-big-box-npm(npmjs.com)git代码仓库地址：js-tool-big-box仓库地址