用得上的JavaScript代码片段和技巧

发布网友发布时间：2024-09-17 05:31

共1个回答

热心网友时间：2024-10-09 07:43

过去陆陆续续总结了一些有助项目开发效率和开发技能的代码片段，一方面加深对Javascript语法的理解，一方面对代码进行归档。本文对专栏《碎片时间学习Javascript代码》做一个精选的总结。

实用方法1.localStorage

localStorage是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());2.JSON格式判断

当需要数据是否为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转CSV

CSV是当今广泛使用的电子表格，可以使用如下所示的简单代码段将数组转换为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，提供比较丰富的时间相关的方法，这里介绍原生方法的实现。

JavaScript有自己的方法来创建类私有成员，但目前还处于ES2020试验草案中，并且语法比较奇怪，以#作为前缀。下面代码片段使用闭包、作用域来实现类的私有域。

正如上面说的，判断空值，在不同的项目下有不同的解释，下面的代码片段可以判断所有类型的空值。

项目开发中，除了完成相应功能需要，还需要去重新阅读其代码，去发掘代码整洁的方式，代码优化是一个没有标准答案的工作，但有一些推荐的方式。下面总结了一些代码整洁的技巧。在这里推荐两个学些代码的不错的网站https://1loc.dev/和30secondsofcode。

1.短循环

你知道在JavaScript中可以在一行中缩短循环吗？这意味着可以为循环编写更少的代码。

在JavaScript可以通过使用length方法调整数组的大小，length不仅用于获取数组的长度，还可以对数组进行切片。

要将浮点数转换为整数，通常可以使用Math.floor()、Math.round()和Math.ceil()方法，这里介绍一种简短的方式，即按位OR，如下：

通过利用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));//true7

这个是扩展运算符...的比较经典的使用方法。更多扩展运算符的使用请参阅《ES6中扩展运算符的8种用法》

6.获取数组最后一项

当需要获取数组的最后一个元素时，最简短的方式是使用slice方法，只需将负数作为参数，它就会从最后一个索引开始对数组进行切片。

将多个对象合并为一个。在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.数组最大数最小数

这是一种查找数组中最大数或者最小数的方法之一，也可以通过循环来实现这一需求，下面分享一种简单方法：

JavaScript的灵活性使得编程充满技巧，作为JavaScript开发人员，要感觉自己就是一个魔术师，合理灵活的利用其技巧，不段提升对代码的组织能力。