用得上的JavaScript代码片段和技巧
2024-11-04 05:30:36
过去陆陆续续总结了一些有助项目开发效率和开发技能的代码片段，一方面加深对Javascript语法的理解，一方面对代码进行归档。本文对专栏《碎片时间学习Javascript代码》做一个精选的总结。
实用方法1.localStoragelocalStorage是HTML5中的本地持久化存储方法之一，也是前端项目常用的本地存储方案之一。localStorage存储的数据只要用户不去主动清除是永久存储的，存储的值只能是string类型，不能跨浏览器，不能跨域名访问，存储大小一般是5M左右。现代前端项目基本都会用到localStorage,下面的代码片段对localStorage数据的存储、获取、清除进行封装。
constuseStorage=(storageKey="authorization")=>{constlocalKey=`devpoint.local.${storageKey}`;consttoJson=(str)=>{try{returnJSON.parse(str);}catch{returnfalse;}};constsave=(data)=>{window.localStorage.setItem(localKey,JSON.stringify(data));};constget=()=>{constlocalData=window.localStorage.getItem(localKey);if(localData&&localData!==""){returntoJson(localData);}else{returnfalse;}};/***清除localStorage*/constclear=()=>{window.localStorage.setItem(localKey,"");};//返回存储对象处理方法return{save,get,clear,};};conststorageAuth=useStorage();constloginInfo={username:"hballard",age:30,};storageAuth.save(loginInfo);console.log(storageAuth.get());当需要数据是否为JSON格式时，下面的代码片段将派上用场：
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true3.Array转CSVCSV是当今广泛使用的电子表格，可以使用如下所示的简单代码段将数组转换为CSV格式：
constarrayToCSV=(array,delimiter=",")=>array.map((item)=>item.map((value)=>`"${value}"`).join(delimiter)).join("\n");constusers=[{name:"hballard",age:30},{name:"sguzman",age:24},{name:"jrowe",age:28},{name:"plowe",age:32},];constarrayUsers=users.map((item)=>Object.values(item));console.log(arrayUsers);//[//['hballard',30],//['sguzman',24],//['jrowe',28],//['plowe',32]//]conststrCsv1=arrayToCSV(arrayUsers);conststrCsv2=arrayToCSV(arrayUsers,";");console.log(strCsv1);//"hballard","30"//"sguzman","24"//"jrowe","28"//"plowe","32"console.log(strCsv2);//"hballard";"30"//"sguzman";"24"//"jrowe";"28"//"plowe";"32"4.数字格式判断下面的代码片段将展示如何检查一个值或变量是否包含一个数字（整数、浮点数等）。
functionisNumber(n){return!isNaN(parseFloat(n))&&isFinite(n);}console.log(isNumber(100));//trueconsole.log(isNumber(3.14));//trueconsole.log(isNumber("3.14"));//trueconsole.log(isNumber("a3.14"));//falseconsole.log(isNumber("JavaScript"));//false5.数据类型判断数据类型判断是在大部分项目中都会用上，特别对于JavaScript，对于不同的数据类型使用不同的方法。
constisCheck=(type,val)=>![undefined,null].includes(val)&&val.constructor===type;console.log(isCheck(Array,["a"]));//trueconsole.log(isCheck(Object,{}));//trueconsole.log(isCheck(ArrayBuffer,newArrayBuffer()));//trueconsole.log(isCheck(Boolean,newBoolean(true)));//trueconsole.log(isCheck(RegExp,/./g));//trueconsole.log(isCheck(Number,0));//true6.数组求和、平均值reduce方法在数组的每个元素上执行提供的回调函数迭代器。它传入前一个元素计算的返回值，结果是单个值，它是在数组的所有元素上运行迭代器的结果。对于数组求和、平均值等场合非常实用。
数组求和constsum=(...array)=>[...array].reduce((acc,current)=>acc+current,0);consttestArray=[1,2,3,4,5];console.log(sum(1,2,3,4,5));//15console.log(sum(...testArray));//15平均值constaverage=(...numbers)=>numbers.reduce((acc,current)=>acc+current,0)/numbers.length;consttestArray1=[1,2,3,4,5];console.log(average(...testArray1));//3console.log(average(1,2,3,4,5));//37.函数链函数链，应该算是代码组织形式，这里放到代码片段中，希望可以对项目代码组织有一定的启发。
functionCusModal(){constThis=this;this.options={theme:"default",title:"modal",visible:false,};constsetOptions=function(key,value){This.options[key]=value;};this.setTheme=function(theme){setOptions("theme",theme);returnthis;};this.setTitle=function(title){setOptions("title",title);returnthis;};this.show=function(){setOptions("visible",true);};this.close=function(){setOptions("visible",false);};this.getOptions=function(){returnthis.options;};}constmodalHelper=newCusModal();//设置弹窗主题、设置标题、显示modalHelper.setTheme("dark").setTitle("发布文章窗口").show();console.log(modalHelper.getOptions());//{theme:'dark',title:'发布文章窗口',visible:true}8.科学计数完整显示在项目中有遇到API返回数字是以科学计数法的方式，在页面上需要显示完整的数字，通常并不清楚科学计数的数字是小数点多少位，因此在精度方面不好固定。下面代码实现了一个小数点后大于0的数字三位，如下：
functionflatNumber(num){conststrNumber=num.toFixed(30);console.log(strNumber);constarrayNumbers=[...strNumber];constnumberIndex=arrayNumbers.findIndex((item)=>parseInt(item,10)>0);constprecision=numberIndex>=0?numberIndex+1:0;returnnum.toFixed(precision);}constnumber=1.71604938271605e-8;console.log(number.toFixed(30));//0.000000017160493827160499945830console.log(flatNumber(number));//0.00000001729.定时器定时器，在项目开发过程中结果过，使用定时器需要严格控制定时器的启动与关闭，避免过多定时器没有关闭导致内存泄露，下面代码实现了一个定时器的开启与停止：
classTimer{constructor(fn,delay){this._triggerTimer=null;this._delay=delay;this._fn=fn;}stop(){if(this._triggerTimer){clearTimeout(this._triggerTimer);this._triggerTimer=null;}}begin(){this.stop();this._triggerTimer=setTimeout(()=>{this._fn();},this._delay);}}//下面是使用方法lettimerCount=0;consttimerHelper=newTimer(()=>{timerCount++;if(timerCount<5){console.log(timerCount);timerHelper.begin();}else{timerHelper.stop();}},2000);timerHelper.begin();10.时间格式化JavaScript中时间相关的脚本库有很多，如Moment和Luxon，提供比较丰富的时间相关的方法，这里介绍原生方法的实现。
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true011.类私方法JavaScript有自己的方法来创建类私有成员，但目前还处于ES2020试验草案中，并且语法比较奇怪，以#作为前缀。下面代码片段使用闭包、作用域来实现类的私有域。
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true112.空值判断正如上面说的，判断空值，在不同的项目下有不同的解释，下面的代码片段可以判断所有类型的空值。
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true2代码整洁技巧项目开发中，除了完成相应功能需要，还需要去重新阅读其代码，去发掘代码整洁的方式，代码优化是一个没有标准答案的工作，但有一些推荐的方式。下面总结了一些代码整洁的技巧。在这里推荐两个学些代码的不错的网站https://1loc.dev/和30secondsofcode。
1.短循环你知道在JavaScript中可以在一行中缩短循环吗？这意味着可以为循环编写更少的代码。
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true32.数组长度变更在JavaScript可以通过使用length方法调整数组的大小，length不仅用于获取数组的长度，还可以对数组进行切片。
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true43.浮点数转换为整数要将浮点数转换为整数，通常可以使用Math.floor()、Math.round()和Math.ceil()方法，这里介绍一种简短的方式，即按位OR，如下：
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true54.数组去重通过利用JavaScript数据类型Set特征，关于Set的使用可以参阅《JavaScript中的Set数据操作：交集、差集、交集、对称差集》。使用Set可以快速的实现数组去重，如下：
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true65.数组合并这段代码将两个数组合并为一个数组，这是一种简单快捷的方法，无需使用循环。
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true7这个是扩展运算符...的比较经典的使用方法。更多扩展运算符的使用请参阅《ES6中扩展运算符的8种用法》
6.获取数组最后一项当需要获取数组的最后一个元素时，最简短的方式是使用slice方法，只需将负数作为参数，它就会从最后一个索引开始对数组进行切片。
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true87.对象合并将多个对象合并为一个。在JavaScript中，可以使用...方法，这也是实现此需求最简洁的方法，如下：
functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true9如有相同的属性，后面的会覆盖前面的。
8.数组最大数最小数这是一种查找数组中最大数或者最小数的方法之一，也可以通过循环来实现这一需求，下面分享一种简单方法：
constarrayToCSV=(array,delimiter=",")=>array.map((item)=>item.map((value)=>`"${value}"`).join(delimiter)).join("\n");constusers=[{name:"hballard",age:30},{name:"sguzman",age:24},{name:"jrowe",age:28},{name:"plowe",age:32},];constarrayUsers=users.map((item)=>Object.values(item));console.log(arrayUsers);//[//['hballard',30],//['sguzman',24],//['jrowe',28],//['plowe',32]//]conststrCsv1=arrayToCSV(arrayUsers);conststrCsv2=arrayToCSV(arrayUsers,";");console.log(strCsv1);//"hballard","30"//"sguzman","24"//"jrowe","28"//"plowe","32"console.log(strCsv2);//"hballard";"30"//"sguzman";"24"//"jrowe";"28"//"plowe";"32"0总结JavaScript的灵活性使得编程充满技巧，作为JavaScript开发人员，要感觉自己就是一个魔术师，合理灵活的利用其技巧，不段提升对代码的组织能力。
热门标签
