16个有用的TypeScript和JavaScript技巧

JavaScript和TypeScript共享许多有用的技巧，可以替代常见的编码概念。这些代码替代方案可以帮助减少代码行数，这正是我们努力的方向。在本文中，我们将分享16个常见的TypeScript和JavaScript技巧。我们还将探讨如何使用这些简写的示例。在编写干净且可扩展的代码时，使用这些技巧并不总是正确的决定。干净的代码有时更容易阅读和更新。同样重要的是，我们的代码要清晰易读，并向其他开发人员传达意义和上下文。JavaScript中可用的所有技巧都可以用相同的语法在TypeScript中使用。唯一的细微差别是在TypeScript中指定类型。但是，TypeScript构造函数简写是TypeScript独有的。现在，让我们开始吧。1.三元运算符三元运算符是JavaScript和TypeScript中最流行的简写形式之一。它取代了传统的if...else语句。其语法如下：[条件]?[trueresult]:[falseresult]以下示例演示了传统的if...else语句及其使用三元运算符的等效速记：//Longhandconstmark=80if(mark>=65){return"Pass"}else{return"Fail"}//简写constmark=80returnmark>=65?"Pass":"Fail"2.短路求值代替另一个if...else语句方法是使用短路求值。这个技巧使用逻辑或运算符||当期望值为false时，将默认值分配给变量。以下示例演示了如何使用短路评估：//Longhandletstr=''letfinalStrif(str!==null&&str!==undefined&&str!=''){finalStr=str}else{finalStr='默认字符串'}//Shorthandletstr=''letfinalStr=str||'defaultstring'//'defaultstring3,nullcoalescingoperatorinvalidcoalescingoperator??类似于短路评估，它用于为变量分配默认值。但是，null合并运算符仅在预期值也为null时才使用默认值。换句话说，如果预期值为false但不为null，则不会使用默认值。以下是空合并运算符的两个示例：//示例1//Longhandletstr=''letfinalStrif(str!==null&&str!==undefined){finalStr='defaultstring'}else{finalStr=str}//shorthandletstr=''letfinaStr=str??'默认字符串'//''//示例2//Longhandletnum=nullletactualNumif(num!==null&&num!==undefined){actualNum=num}else{actualNum=0}//Shorthandletnum=nullletactualNum=数??0//04.模板字面量借助JavaScript强大的ES6特性，我们可以使用模板字面量代替+来拼接多个字符串变量。要使用模板文字，请将字符串包装在``中，将变量包装在这些字符串中的${}中。下面的例子演示了如何使用模板文字来执行字符串插值：constname='Iby'consthobby='toread'//LonghandconstfullStr=name+'loves'+hobby//'Ibylovestoread'//ShorthandconstfullStr=`${name}loves${hobby}`我们还可以使用模板文字来构建多行字符串，而无需使用\n。例如：//Shorthandconstname='Iby'consthobby='toread'constfullStr=`${name}loves${hobby}.Shealsolovestowrite!`5.JavaScript和TypeScript中对象属性赋值的简写，我们可以通过在对象字面量中提及变量来简写为对象赋值。为此，必须使用预期的键命名变量。下面是对象属性赋值速记的示例：//Longhandconstobj={x:1,y:2,z:3}//Shorthandconstx=8consty=10constobj={x,y}6.可选链接点表示法允许我们访问对象的键或值。通过可选链，我们可以更进一步读取键或值，即使我们不确定它们是否存在或是否已设置。当键不存在时，来自可选链接的值是未定义的。请参阅下面的可选链接示例：constobj={x:{y:1,z:2},others:['test','tested']}//Longhandif(obj.hasProperty('others')&&others.length>=2){console.log('2ndvalueinothers:',obj.others[1])}//Shorthandconsole.log('2ndvalueinothers:',obj.others?.[1])//'tested'console.log('3rdvalueinothers:',obj.others?.[2])//undefined7.除了传统的点表示法，对象解构是另一种读取对象值的方式，就是将对象的值解构为自己的变量。下面的示例演示了如何使用传统的点表示法读取对象的值，与使用对象解构的速记方法相比。constobj={x:{y:1,z:2},other:'teststring'}//Longhandconsole.log('Valueofzinx:',obj.x.z)console.log('Valueofother:',obj.other)//Shorthandconst{x,other}=objconst{z}=xconsole.log('x中z的值:',z)console.log('其他值:',other)we从对象解构的变量也可以重命名。下面是一个例子：constobj={x:1,y:2}const{x:myVar}=objectconsole.log('Myrenamedvariable:',myVar)//Myrenamedvariable:18.SpreadoperatorSpreadoperationThe...用于访问数组和对象的内容。我们可以使用展开运算符来代替数组函数（例如concat）和对象函数（例如object.assign）。查看下面的示例，了解如何使用扩展运算符替换普通数组和对象函数。//Longhandconstarr=[1,2,3]constbiggerArr=[4,5,6].concat(arr)constsmallObj={x:1}constotherObj=object.assign(smallObj,{y:2})//简写constarr=[1,2,3]constbiggerArr=[...arr,4,5,6]constsmallObj={x:1}constotherObj={...smallObj,y:2}9,对象循环传统的JavaScriptfor循环语法如下：for(leti=0;i{console.log('这是项目：',str)})for(letindexinarr){console.log(`Itematindex${index}is${arr[index]}`)}//对于对象字面量constobj={a:1,b:2,c:3}for(letkeyinobj){console.log(`Valueatkey${key}is${obj[key]}`)}10.Array.indexOf使用按位运算符的简写，我们可以使用Array.indexOf方法查找数组中是否存在某个项目。如果项目存在于数组中，则此方法返回项目的索引位置，如果不存在，则返回-1。在JavaScript中，0是假值，而小于或大于0的数字被认为是真值。通常，这意味着我们需要使用if...else语句来使用返回的索引来确定该项目是否存在。使用按位运算符~而不是if...else语句允许我们获得大于或等于0的任何值的真值。以下示例演示了使用按位运算符而不是if...else语句的Array.indexOf速记：constarr=[10,12,14,16]constrealNum=10constfakeNum=20constrealNumIndex=arr.indexOf(realNum)constnoneNumIndex=arr.indexOf(fakeNum)//Longhandif(realNumIndex>-1){console.log(realNum,'存在！')}elseif(realNumIndex===-1){console.log(realNum,'不存在!')}if(noneNumIndex>-1){console.log(fakeNum,'存在！')}elseif(noneNumIndex===-1){console.log(fakeNum,'不存在！')}//Shorthandconsole.log(realNum+(~realNumIndex?'exists!':'doesnotexist!')console.log(fakeNum+(~noneNumIndex?'exists!':'doesnotexist!')11、使用!!将值转换为布尔值在JavaScript中，我们可以使用!![variable]速记将任何类型的变量转换为布尔值。请参阅使用!![variable]速记将值转换为布尔值的示例：//LonghandconstsimpleInt=3constintAsBool=Boolean(simpleInt)//速记dconstsimpleInt=3constintAsBool=!!simpleInt12,箭头/lambda函数表达式JavaScript中的函数可以使用箭头函数语法来编写，而不是显式地使用function关键字。箭头函数的传统表达式类似于其他语言中的lambda函数。查看这个使用箭头函数表达式速记编写函数的示例：//LonghandfunctionprintStr(str){console.log('Thisisastring:',str)}printStr('Girl!')//ShorthandconstprintStr=(str)=>{console.log('Thisisastring:',str)}printStr('Girl!')//ShorthandTypeScript(指定变量类型)constprintStr=(str:string)=>{console.log('Thisisastring:',str)}printStr('Girl!')13.使用箭头函数表达式隐式返回在JavaScript中，我们通常使用return关键字从函数返回一个值。当我们使用箭头函数语法定义函数时，我们可以通过排除大括号{}隐式返回一个值。对于多行语句，比如表达式，我们可以将返回表达式用括号()包起来。以下示例演示了使用箭头函数表达式从函数隐式返回值的速记代码：//Longhandfunctioncapitalize(name){returnname.toUpperCase()}functionadd(numA,numB){returnnumA+numB}//Shorthandconstcapitalize=(name)=>name.toUpperCase()constadd=(numA,numB)=>(numA+numB)//ShorthandTypeScript(指定变量类型)constcapitalize=(name:string)=>name.toUpperCase()constadd=(numA:number,numB:number)=>(numA+numB)14.双位NOT运算符在JavaScript中，我们通常使用内置的Math对象来访问数学函数和常量。但是，某些函数允许我们在不引用Math对象的情况下访问函数。例如，应用按位非运算符~~两次允许我们获得一个值的Math.floor()。查看下面的示例，了解双位NOT运算符如何用作Math.floor()的简写形式：//Longhandconstnum=4.5constfloorNum=Math.floor(num)//4//Shorthandconstnum=4.5constfloorNum=~~num//415.指数幂简写另一个有用的技巧是Math.pow()函数。使用内置Math对象的另一种方法是使用**技巧。下面的例子演示了这个求幂简写：//Longhandconstnum=Math.pow(3,4)//81//Shorthandconstnum=3**4//8116,TypeScriptconstructorshorthandviaconstructioninTypeScript有一个函数简写即创建一个类并为类属性赋值。使用此方法时，TypeScript会自动创建和设置类属性。这种简写是TypeScript独有的，在JavaScript类定义中不可用。查看以下示例以了解TypeScript构造函数的简写：//LonghandclassPerson{privatename:stringpublicage:intprotectedhobbies:string[]constructor(name:string,age:int,hobbies:string[]){this.name=namethis.age=agethis.hobbies=hobbies}}//ShorthandclassPerson{constructor(privatename:string,publicage:int,protectedhobbies:string[]){}}总结这些只是一部分最常见的JavaScript和TypeScript技巧。请记住，使用这些代码并不总是最好的选择。最重要的是编写其他开发人员可以轻松阅读的干净易懂的代码。最后，感谢您的阅读，祝您编程愉快。如果觉得有用，请记得分享给身边做开发的朋友，说不定对他有帮助。