新老手必备生活总是要学习新事物，跟上变化应该不会比现在更难，我的动机是介绍所有JavaScript最佳实践，比如速记函数，作为前端开发人员，我们必须知道，让我们在2021年的生活变得更轻松。您可能已经进行了很长时间的JavaScript开发，但有时您可能没有更新最新的功能来解决您的问题，而无需执行或编写一些额外的代码。这些技术可以帮助您编写干净且优化的JavaScript代码。还有，这些题目可以帮助你准备2021年的JavaScript面试。1.如果有多个条件，我们可以在数组中存储多个值，我们可以使用数组的include方法。//Longhandif(x==='abc'||x==='def'||x==='ghi'||x==='jkl'){//逻辑}//简写(['abc','def','ghi','jkl'].includes(x)){//logic}2.iftrue...otherwiseabbreviation这对我们来说有一个if-else条件，不包含更大的逻辑，是一个更大的捷径。我们可以简单地使用三元运算符来实现这种简写。//Longhandlettest:boolean;if(x>100){test=true;}else{test=false;}//Shorthandlettest=(x>10)?true:false;//或者wecanusedirectlylettest=x>10;console.log（测试）;当我们有嵌套条件时，我们可以这样做。letx=300,test2=(x>100)?'greater100':(x<50)?'less50':'between50and100';console.log(test2);//"greaterthan100"3.在我们想要的时候声明变量declare当两个变量具有共同的值或共同的类型时，可以使用这种简写形式。//Longhandlettest1;lettest2=1;//Shorthandlettest1,test2=1;4.Null,Undefined,emptycheck当我们创建新的变量的时候，有时候我们想检查一下我们引用的变量的值是null还是undefined。JavaScript确实为这些函数提供了非常好的速记工具。//Longhandif(test1!==null||test1!==undefined||test1!==''){lettest2=test1;}//Shorthandlettest2=test1||'';5.空值检查并赋默认值lettest1=null,test2=test1||'';console.log("nullcheck",test2);//outputwillbe""6.未定义值检查并赋默认值lettest1=undefined,test2=test1||'';console.log("undefinedcheck",test2);//输出将是""正常值校验lettest1='test',test2=test1||'';console.log(test2);//输出:'测试'7.给多个变量赋值当我们处理多个变量，想给不同的变量赋不同的值时，这种速记技巧就很有用了。//Longhandlettest1,test2,test3;test1=1;test2=2;test3=3;//Shorthandlet[test1,test2,test3]=[1,2,3];8.Assignmentoperatorabbreviation我们在编程中处理很多算术运算符，这是将运算符赋值给JavaScript变量的有用技术之一。//Longhandtest1=test1+1;test2=test2-1;test3=test3*20;//Shorthandtest1++;test2--;test3*=20;9.如果有缩写，这是我们都使用的常用缩写之一，但仍然值得一提。//longhandif(test1===true)orif(test1!=="")orif(test1!==null)//速记//itwillcheckemptystring,nullandundefinedtooif(test1)注意：如果test1有值，会在if进入循环后的逻辑，该运算符主要用于检查null或undefined。10.AND(&&)运算符用于多个条件如果仅当变量为真时才调用函数，则可以使用&&运算符。//Longhandif(test1){callMethod();}//Shorthandtest1&&callMethod();11.foreach循环的简写这是一种常用的迭代简写技术。//Longhandfor(vari=0;ia+b;更多例子。functioncallMe(name){console.log('Hello',name);}callMe=name=>console.log('Hello',name);14.短函数调用我们可以使用三元运算符来实现这些函数。//Longhandfunctiontest1(){console.log('test1');};functiontest2(){console.log('test2');};vartest3=1;if(test3==1){test1();}else{test2();}//简写(test3===1?test1:test2)();15.Switch的简写我们可以把条件保存在key-value对象中，根据条件来使用。//Longhandsswitch(data){case1:test1();break;case2:test2();break;case3:test();break;//Andsoon...}//Shorthandvardata={1:test1,2:test2,3:test};data[something]&&data[something]();16.隐式return简写使用箭头函数，我们可以直接返回值，而不用写return语句。//longhandfunctioncalculate(diameter){returnMath.PI*diameter}//shorthandcalculate=diameter=>(Math.PI*diameter;)17.十进制索引//Longhandfor(vari=0;i<10000;i++){...}//Shorthandfor(vari=0;i<1e4;i++){18.默认参数值//Longhandfunctionadd(test1,test2){if(test1===undefined)test1=1;if(test2===undefined)test2=2;returntest1+test2;}//shorthandadd=(test1=1,test2=2)=>(test1+test2);add()//输出：319。扩展运算符的简写//longhand//joiningarraysusingconcatconstdata=[1,2,3];consttest=[4,5,6]。concat(data);//速记//joiningarraysconstdata=[1,2,3];consttest=[4,5,6,...data];console.log(test);//[4,5,6,1,2,3]对于克隆，我们还可以使用扩展运算符。//longhand//cloningarraysconsttest1=[1,2,3];consttest2=test1.slice()//shorthand//cloningarraysconsttest1=[1,2,3];consttest2=[...test1];20。模板文本如果您厌倦了使用+将多个变量连接到一个字符串中，这个简写可以让您不再头疼。//longhandconstwelcome='嗨'+test1+''+test2+'.'//shorthandconstwelcome=`嗨${test1}${test2}`;21、多行字符串速记当我们在代码中处理多行字符串时，可以使用如下函数：//longhandconstdata='abcabcabcabcabcabcabc\n\t'+'testtest,testtesttesttest\n\t'//shorthandconstdata=`abcabcabcabcabcabctesttest,testtesttesttest`22.对象属性赋值lettest1='a';lettest2='b';//Longhandletobj={test1:test1,test2:test2};//Shorthandletobj={test1,test2};23.将字符串转为数字//Longhandlettest1=parseInt('123');lettest2=parseFloat('12.3');//Shorthandlettest1=+'123';lettest2=+'12.3';24.解构简写//longhandconsttest1=this.data.test1;consttest2=this.data.test2;consttest2=this.data。test3;//shorthandconst{test1,test2,test3}=this.data;25.Array.find的速记当我们有一个对象数组并且我们想根据对象属性查找特定对象时，find方法非常有用。constdata=[{type:'test1',name:'abc'},{type:'test2',name:'cde'},{type:'test1',name:'fgh'},]functionfindtest1(名称){for(leti=0;idata.type==='test1'&&data.name==='fgh');console.log(filteredData);//{type:'test1',name:'fgh'}26.Findconditionshorthand如果我们有检查类型的代码，我们需要根据类型调用不同的方法，我们可以选择使用多个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.Bitwiseindexshorthand当我们遍历一个数组来寻找一个特定的值时，我们确实使用了indexOf()方法，如果找到了更好的方法呢？让我们看看这个例子。//longhandif(arr.indexOf(item)>-1){//itemfound}if(arr.indexOf(item)===-1){//itemnotfound}//shorthandif(~arr.indexOf(item)){//itemfound}if(!~arr.indexOf(item)){//itemnotfound}按位(?)运算符将为除-1以外的任何值返回真值。否定它就像做~~一样容易。另外，我们还可以使用include()函数：if(arr.includes(item)){//trueiftheitemfound}28.Object.entries()这个函数有助于将一个对象转换成一个对象数组。constdata={test1:'abc',test2:'cde',test3:'efg'};constarr=Object.entries(data);console.log(arr);/**输出：[['test1','abc'],['test2','cde'],['test3','efg']]**/29.Object.values()这个也是ES8引入的新函数，作用和Object.entries()类似的功能，但没有关键部分：constdata={test1:'abc',test2:'cde'};constarr=Object.values(data);console.log(arr);/**Output:['abc','cde']**/30。doublebitwiseshorthanddoubleNOTbitwiseoperatormethodonlyappliesto32-bitintegers)//LonghandMath.floor(1.9)===1//true//简写~~1.9===1//true31.要多次重复一个字符串以一遍又一遍地重复相同的字符，我们可以使用for循环并将它们添加到同一个循环中，但是如果我们有一个速记方法呢？//longhandlettest='';for(leti=0;i<5;i++){test+='test';}console.log(str);//testtesttesttesttest//简写'test'.repeat(5);32.求数组中的最大值和最小值constarr=[1,2,3];Math.max(...arr);//3Math.min(...arr);//133.从字符串中获取字符letstr='abc';//Longhandstr.charAt(2);//c//速记注：如果我们知道数组的索引，那么我们可以直接使用索引代替字符。如果我们不确定索引，它可以抛出undefinedstr[2];//c34。数学指数幂函数简写//longhandMath.pow(2,3);//8//shorthand2**3//8本文转载自微信公众号《前端全栈开发者》，可以通过以下二维码关注和转载本文，请联系前端全栈开发者公众号。
