34个不可错过的JavaScript代码优化技巧

1、JavaScript代码优化技巧：带有多个条件的if语句

把多个值放在一个数组中，然后调用数组的includes方法。

//longhandif(x==='abc'||x==='def'||x==='ghi'||x==='jkl'){//logic}//shorthandif(['abc','def','ghi','jkl'].includes(x)){//logic}

2、JavaScript代码优化技巧：简化iftrue...else

对于不包含大逻辑的if-else条件，可以使用下面的快捷写法。我们可以简单地使用三元运算符来实现这种简化。

//Longhandlettest:boolean;if(x>100){test=true;}else{test=false;}//Shorthandlettest=(x>10)？true:false;//或者我们也可以直接用lettest=x>10;console.log(test);

如果有嵌套的条件，可以这么做。

letx=300,test2=(x>100)？'greaterthan100':(x<50)？'less50':'between50and100';console.log(test2);//"greaterthan100"

3、JavaScript代码优化技巧：声明变量

当我们想要声明两个具有相同的值或相同类型的变量时，可以使用这种简写。

//Longhandlettest1;lettest2=1;//Shorthandlettest1,test2=1;

4、JavaScript代码优化技巧：null、undefined和空值检查

当我们创建了新变量，有时候想要检查引用的变量是不是为非null或undefined。

JavaScript确实有一个很好的快捷方式来实现这种检查。

//Longhandif(test1！==null||test1！==undefined||test1！==''){lettest2=test1;}//Shorthandlettest2=test1||'';

5、JavaScript代码优化技巧：null检查和默认赋值

lettest1=null,test2=test1||'';console.log("nullcheck",test2);//输出""

6、JavaScript代码优化技巧：undefined检查和默认赋值

lettest1=undefined,test2=test1||'';console.log("undefinedcheck",test2);//输出""

一般值检查

lettest1='test',test2=test1||'';console.log(test2);//输出:'test'

另外，对于上述的4、5、6点，都可以使用？？操作符。

如果左边值为null或undefined，就返回右边的值。默认情况下，它将返回左边的值。

consttest=null？？'default';console.log(test);//输出结果:"default"consttest1=0？？2;console.log(test1);//输出结果:0

7、JavaScript代码优化技巧：给多个变量赋值

当我们想给多个不同的变量赋值时，这种技巧非常有用。

//Longhandlettest1,test2,test3;test1=1;test2=2;test3=3;//Shorthandlet[test1,test2,test3]=[1,2,3];

8、JavaScript代码优化技巧：简便的赋值操作符

在编程过程中，我们要处理大量的算术运算符。这是JavaScript变量赋值操作符的有用技巧之一。

//Longhandtest1=test1+1;test2=test2-1;test3=test3*20;//Shorthandtest1++;test2--;test3*=20;

9、JavaScript代码优化技巧：if判断值是否存在

这是我们都在使用的一种常用的简便技巧，在这里仍然值得再提一下。

//Longhandif(test1===true)orif(test1！=="")orif(test1！==null)//Shorthand//检查空字符串、null或者undefinedif(test1)

注意：如果test1有值，将执行if之后的逻辑，这个操作符主要用于null或undefinded检查。

10、JavaScript代码优化技巧：用于多个条件判断的&&操作符

如果只在变量为true时才调用函数，可以使用&&操作符。

//Longhandif(test1){callMethod();}//Shorthandtest1&&callMethod();

11、JavaScript代码优化技巧：foreach循环

这是一种常见的循环简化技巧。

//Longhandfor(vari=0;i<testData.length;i++)//Shorthandfor(letiintestData)orfor(letioftestData)

遍历数组的每一个变量。

functiontestData(element,index,array){console.log('test['+index+']='+element);}[11,24,32].forEach(testData);//logs:test[0]=11,test[1]=24,test[2]=32

12、JavaScript代码优化技巧：比较后返回

我们也可以在return语句中使用比较，它可以将5行代码减少到1行。

//Longhandlettest;functioncheckReturn(){if(！(test===undefined)){returntest;}else{returncallMe('test');}}vardata=checkReturn();console.log(data);//outputtestfunctioncallMe(val){console.log(val);}//ShorthandfunctioncheckReturn(){returntest||callMe('test');}

13、JavaScript代码优化技巧：箭头函数

//Longhandfunctionadd(a,b){returna+b;}//Shorthandconstadd=(a,b)=>a+b;

更多例子：

functioncallMe(name){console.log('Hello',name);}callMe=name=>console.log('Hello',name);

14、JavaScript代码优化技巧：简短的函数调用

我们可以使用三元操作符来实现多个函数调用。

//Longhandfunctiontest1(){console.log('test1');};functiontest2(){console.log('test2');};vartest3=1;if(test3==1){test1();}else{test2();}//Shorthand(test3===1？test1:test2)();

15、JavaScript代码优化技巧：switch简化

我们可以将条件保存在键值对象中，并根据条件来调用它们。

//Longhandswitch(data){case1:test1();break;case2:test2();break;case3:test();break;//...}//Shorthandvardata={1:test1,2:test2,3:test};data[something]&&data[something]();

16、JavaScript代码优化技巧：隐式返回

通过使用箭头函数，我们可以直接返回值，不需要return语句。

//longhandfunctioncalculate(diameter){returnMath.PI*diameter}//shorthandcalculate=diameter=>(Math.PI*diameter;)

17、JavaScript代码优化技巧：指数表示法

//Longhandfor(vari=0;i<10000;i++){...}//Shorthandfor(vari=0;i<1e4;i++){

18、JavaScript代码优化技巧：默认参数值

//Longhandfunctionadd(test1,test2){if(test1===undefined)test1=1;if(test2===undefined)test2=2;returntest1+test2;}//shorthandadd=(test1=1,test2=2)=>(test1+test2);add()//输出结果:3

19、JavaScript代码优化技巧：延展操作符简化

//longhand//使用concat连接数组constdata=[1,2,3];consttest=[4,5,6].concat(data);//shorthand//连接数组constdata=[1,2,3];consttest=[4,5,6,...data];console.log(test);//[4,5,6,1,2,3]

我们也可以使用延展操作符进行克隆。

//longhand//克隆数组consttest1=[1,2,3];consttest2=test1.slice()//shorthand//克隆数组consttest1=[1,2,3];consttest2=[...test1];

20、JavaScript代码优化技巧：模板字面量

如果你厌倦了使用+将多个变量连接成一个字符串，那么这个简化技巧将让你不再头痛。

//longhandconstwelcome='Hi'+test1+''+test2+'.'//shorthandconstwelcome=`Hi${test1}${test2}`;

21、JavaScript代码优化技巧：跨行字符串

当我们在代码中处理跨行字符串时，可以这样做。

//longhandconstdata='abcabcabcabcabcabc\n\t'+'testtest,testtesttesttest\n\t'//shorthandconstdata=`abcabcabcabcabcabctesttest,testtesttesttest`

22、JavaScript代码优化技巧：对象属性赋值

lettest1='a';lettest2='b';//Longhandletobj={test1:test1,test2:test2};//Shorthandletobj={test1,test2};

23、JavaScript代码优化技巧：将字符串转成数字

//Longhandlettest1=parseInt('123');lettest2=parseFloat('12.3');//Shorthandlettest1=+'123';lettest2=+'12.3';

24、JavaScript代码优化技巧：解构赋值

//longhandconsttest1=this.data.test1;consttest2=this.data.test2;consttest2=this.data.test3;//shorthandconst{test1,test2,test3}=this.data;

25、JavaScript代码优化技巧：数组find简化

当我们有一个对象数组，并想根据对象属性找到特定对象，find方法会非常有用。

constdata=[{type:'test1',name:'abc'},{type:'test2',name:'cde'},{type:'test1',name:'fgh'},]functionfindtest1(name){for(leti=0;i<data.length;++i){if(data[i].type==='test1'&&data[i].name===name){returndata[i];}}}//ShorthandfilteredData=data.find(data=>data.type==='test1'&&data.name==='fgh');console.log(filteredData);//{type:'test1',name:'fgh'}

26、JavaScript代码优化技巧：条件查找简化

如果我们要基于不同的类型调用不同的方法，可以使用多个elseif语句或switch，但有没有比这更好的简化技巧呢？

//Longhandif(type==='test1'){test1();}elseif(type==='test2'){test2();}elseif(type==='test3'){test3();}elseif(type==='test4'){test4();}else{thrownewError('Invalidvalue'+type);}//Shorthandvartypes={test1:test1,test2:test2,test3:test3,test4:test4};varfunc=types[type];(！func)&&thrownewError('Invalidvalue'+type);func();

27、JavaScript代码优化技巧：indexOf的按位操作简化

在查找数组的某个值时，我们可以使用indexOf()方法。但有一种更好的方法，让我们来看一下这个例子。

//longhandif(arr.indexOf(item)>-1){//itemfound}if(arr.indexOf(item)===-1){//itemnotfound}//shorthandif(~arr.indexOf(item)){//itemfound}if(！~arr.indexOf(item)){//itemnotfound}

按位(~)运算符将返回true(-1除外)，反向操作只需要！~。另外，也可以使用include()函数。

if(arr.includes(item)){//如果找到项目，则为true}

28、JavaScript代码优化技巧：Object.entries()

这个方法可以将对象转换为对象数组。

constdata={test1:'abc',test2:'cde',test3:'efg'};constarr=Object.entries(data);console.log(arr);/**Output:[['test1','abc'],['test2','cde'],['test3','efg']]**/

29、JavaScript代码优化技巧：Object.values()

这也是ES8中引入的一个新特性，它的功能类似于Object.entries()，只是没有键。

constdata={test1:'abc',test2:'cde'};constarr=Object.values(data);console.log(arr);/**Output:['abc','cde']**/

30、JavaScript代码优化技巧：双重按位操作

//LonghandMath.floor(1.9)===1//true//Shorthand~~1.9===1//true

31、JavaScript代码优化技巧：重复字符串多次

为了重复操作相同的字符，我们可以使用for循环，但其实还有一种简便的方法。

//longhandlettest='';for(leti=0;i<5;i++){test+='test';}console.log(str);//testtesttesttesttest//shorthand'test'.repeat(5);

32、JavaScript代码优化技巧：查找数组的最大值和最小值

constarr=[1,2,3];Math.max(…arr);//3Math.min(…arr);//1

33、JavaScript代码优化技巧：获取字符串的字符

letstr='abc';//Longhandstr.charAt(2);//c//Shorthandstr[2];//c

34、JavaScript代码优化技巧：指数幂简化

//longhandMath.pow(2,3);//8//shorthand2**3//8

免责声明：内容来源于公开网络，若涉及侵权联系尽快删除！