开发人员的生活总是在学习新事物，跟上变化不应该比现在更难，我的动机是涵盖所有JavaScript最佳实践，例如速记和功能，我们作为前端开发人员必须知道如何在2021年让我们的生活更轻松。您可能已经从事JavaScript开发很长时间了，但有时您可能没有使用最新的功能来解决您的问题而不需要它或编写一些额外的代码。这些技术可以帮助您编写干净且优化的JavaScript代码。此外，这些主题可以帮助您准备2021年的JavaScript面试。在这里，我提供了一个新系列，介绍速记技术，帮助您编写更清晰和优化的JavaScript代码。这里有一份2021年你必须要知道的JavaScript编码备忘单。1.如果有多个条件，我们可以在数组中存储多个值，我们可以使用数组的include方法。//longhandif(x==='abc'||x==='def'||x==='ghi'||x==='jkl'){//逻辑}//shorthandif(['abc','def','ghi','jkl'].includes(x)){//logic}2.Iftrue...else当我们有不包含更大逻辑的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、null检查当我们创建新变量时，有时我们想检查其值所引用的变量是否为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);//output:'test'(bonus:Nowwecanusethe??operatorfortopics4,5and6)空合并运算符空合并运算符??如果左侧为空或未定义，则返回右侧的值。默认情况下，它将返回左侧的值。consttest=null??'default';console.log(test);//expectedoutput:"default"consttest1=0??2;console.log(test1);//expectedoutput:07.当我们给多个变量赋值时这个简写当您处理多个变量并希望为不同的变量分配不同的值时，该技术很有用。//Longhandlettest1,test2,test3;test1=1;test2=2;test3=3;//Shorthandlet[test1,test2,test3]=[1,2,3];8.赋值运算符的简写我们在编程中会处理很多算术运算符。这是将运算符分配给JavaScript变量的有用技术之一。//Longhandtest1=test1+1;test2=test2-1;test3=test3*20;//Shorthandtest1++;test2--;test3*=20;9.如果有速记，这是我们都使用的常用速记之一，但仍然值得一提。//Longhandif(test1===true)//Shorthandif(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();}//Shorthand(test3===1?test1:test2)();15.Switchshorthand我们可以把条件保存在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或switching，但是如果我们的简写比这个更好呢？？//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.Shorthandbitwiseindexing当我们迭代一个数组来寻找一个特定的值时，我们确实使用了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。DoubleBitwiseshorthand(doubleNOTbitwiseoperatormethodonlyapplicableto32-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//速记注：如果我们知道数组的索引，那么我们可以直接使用索引代替字符。如果我们不确定索引itcanthrowundefinedstr[2];//8//速记2**3//8
