更多课程 选择中心


Web培训

400-111-8989

Web培训

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

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

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:转行Web前端需要掌握哪些技术?
下一篇:(function(){})()立即执行函数

微信小游戏怎么开发?

Web前端工程师需要掌握哪些知识?

html怎么复制css样式

微信小游戏怎么开发

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省