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

过去陆陆续续总结了一些有助项目开发效率和开发技能的代码片段，一方面加深对 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));//true

3. 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"));//false

5. 数据类型判断

数据类型判断是在大部分项目中都会用上，特别对于 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));//true

6. 数组求和、平均值

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));//3

7. 函数链

函数链，应该算是代码组织形式，这里放到代码片段中，希望可以对项目代码组织有一定的启发。

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.0000000172

9. 定时器

定时器，在项目开发过程中结果过，使用定时器需要严格控制定时器的启动与关闭，避免过多定时器没有关闭导致内存泄露，下面代码实现了一个定时器的开启与停止：

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));//true0

11. 类私方法

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

functionisJSON(str){try{JSON.parse(str);}catch{returnfalse;}returntrue;}constdata1="JavaScript";constdata2=`{"title":"js"}`;console.log(isJSON(data1));//falseconsole.log(isJSON(data2));//true1

12. 空值判断

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

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));//true3

2. 数组长度变更

在 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));//true4

3. 浮点数转换为整数

要将浮点数转换为整数，通常可以使用 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));//true5

4. 数组去重

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

5. 数组合并

这段代码将两个数组合并为一个数组，这是一种简单快捷的方法，无需使用循环。

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));//true8

7. 对象合并

将多个对象合并为一个。在 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 开发人员，要感觉自己就是一个魔术师，合理灵活的利用其技巧，不段提升对代码的组织能力。