本篇内容主要讲解“常见的JavaScript代码优化方法有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“常见的JavaScript代码优化方法有哪些”吧!

我们在创建新变量赋予一个存在的变量值的时候，并不希望赋予null或undefined，我们可以采用一下简洁的赋值方式。

if(test!==null||test!==undefined||test!==''){leta1=test;}//优化后leta1=test||''2、null值检查并赋予默认值

lettest=null;leta1=test||'';3、undefined值检查并赋予默认值

lettest=undefined;leta1=test||'';4、空值合并运算符（??）

空值合并操作符（??）是一个逻辑操作符,当左侧的操作数为null或者undefined时，返回其右侧操作数，否则返回左侧操作数。

consttest=null??'defaultstring';console.log(test);console.log(test);//expectedoutput:"defaultstring"consttest=0??42;console.log(test);//expectedoutput:05、声明变量

当我们想要声明多个共同类型或者相同值的变量时，我们可以采用一下简写的方式。

lettest1;lettest2=0;//优化后lettest1,test2=0;6、if多条件判断

当我们进行多个条件判断时，我们可以采用数组includes的方式来实现简写。

if(test==='1'||test==='2'||test==='3'||test==='4'){//逻辑}//优化后if(['1','2','3','4'].includes(test)){//逻辑处理}7、if...else的简写

当存在一层或两层if...else嵌套时，我们可以使用三元运算符来简写。

lettest=null;if(a>10){test=true;}else{test=false;}//优化后lettest=a>10?true:false;//或者lettest=a>10;8、多变量赋值

当我们想给多个变量赋不同的值的时候，我们可以采用一下简洁的速记方案。

leta=1;letb=2;letc=3;//优化let[a,b,c]=[1,2,3];9、算术运算简写优化

当我们在开发中经常用到算数运算符时，我们可以使用一下方式进行优化和简写。

leta=1;a=a+1;a=a-1;a=a*2;//优化a++;a--;a*=2;10、有效值判断

我们经常会在开发中用到的，在这也简单整理一下。

if(test1===true)if(test1!=="")if(test1!==null)//优化if(test1)11、多条件(&&)判断

我们通常在项目中遇到条件判断后跟函数执行，我们可以使用一下简写方式。

if(test){foo();}//优化test&&foo();12、多个比较return

在 return 的语句中使用比较，可以将其进行缩写的形式如下。

lettest;functioncheckReturn(){if(!(test===undefined)){returntest;}else{returnfoo('test');}}//优化functioncheckReturn(){returntest||foo('test');}13、Switch的缩写

遇到如下形式的 switch 语句，我们可以将其条件和表达式以键值对的形式存储。

switch(type){case1:test1();break;case2:test2();break;case3:test();break;//......}//优化varobj={1:test1,2:test2,3:test};obj[type]&&obj[type]();14、for 循环缩写

for(leti=0;i<arr.length;i++)//优化for(letiinarr)orfor(letiofarr)15、箭头函数

functionadd(){returna+b;}//优化constadd=(a,b)=>a+b;16、短函数调用

constdata1=[1,2,3];constdata2=[4,5,6].concat(data1);//优化constdata2=[4,5,6,...data1];17、数组合并与克隆

constdata1=[1,2,3];constdata2=[4,5,6].concat(data1);//优化constdata2=[4,5,6,...data1];

数组克隆：

constdata1=[1,2,3];constdata2=test1.slice()//优化constdata1=[1,2,3];constdata2=[...data1];18、字符串模版

consttest='hello'+text1+'.'//优化consttest=`hello${text}.`19、数据解构

consta1=this.data.a1;consta2=this.data.a2;consta3=this.data.a3;//优化const{a1,a2,a3}=this.data;20、数组查找特定值

数组按照索引来查找特定值，我们可以通过逻辑位运算符～来代替判断。

“~”运算符（位非）用于对一个二进制操作数逐位进行取反操作

if(arr.indexOf(item)>-1)//优化if(~arr.indexOf(item))//或if(arr.includes(item))21、Object.entries()

constdata={a1:'abc',a2:'cde',a3:'efg'};Object.entries(data);/**输出:[['a1','abc'],['a2','cde'],['a3','efg']]**/22、Object.values()

我们可以通过 Object.values() 将对象的内容转化为数组。如下：

constdata={a1:'abc',a2:'cde'};Object.values(data);/**输出:['abc','cde']**/23、求平方

Math.pow(2,3);//优化2**3；24、指数简写

for(vari=0;i<10000;i++)//优化for(vari=0;i<1e4;i++){25、对象属性简写

letkey1='1';letkey2='b';letobj={key1:key1,key2:key2};//简写letobj={key1,key2};26、字符串转数字

leta1=parseInt('100');leta2=parseFloat('10.1');//简写leta1=+'100';leta2=+'10.1';

到此，相信大家对“常见的JavaScript代码优化方法有哪些”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！