当前位置: 首页 > Web前端 > JavaScript

(2022-05-30)每日笔记--前端

时间:2023-03-26 20:42:18 JavaScript

所有内容来源于微信公众号文章,再次记录为学习笔记模板字面量对象属性赋值速记optionalchainingobjectdestructuringspreadoperatorobjectloopingArray.indexOfshorthandusingbitwise运营商使用!!使用箭头函数表达式的隐式将值转换为布尔箭头/lambda函数表达式返回双位的速记不是运算符指数指数16.TypeScript构造函数速记三元运算符[条件]?[trueresult]:[falseresult]短路评估//Longhandletstr=''letfinalStrif(str!==null&&str!==undefined&&str!=''){finalStr=str}else{finalStr='默认字符串'}//Shorthandletstr=''letfinalStr=str||'defaultstring'//'defaultstring此逻辑OR运算符||当预期值为false时,将默认值分配给变量。NullCoalescingOperator当期望值为false但不为null时,它不会使用默认值。让str=''让finaStr=str??'默认字符串'//''letnum=nullletactualNum=num??0//0模板文字constname='Iby'consthobby='toread'//LonghandconstfullStr=name+'loves'+hobby//'Ibylovestoread'//Shorthand单行constfullStr=`${name}loves${hobby}`//多行文本constfullStr2=`${name}loves${hobby}.Shealsolovestowrite!`对象属性值简写//Longhandconstobj={x:1,y:2,z:3}//简写constx=8consty=10constobj={x,y}可选链接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('3ndvalueinothers:',obj.others?.[2])//'undefined'对象解析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)可以重命名从对象中解构出来的变量,例子如下:constobj={x:1,y:2}const{x:myVar}=object//解构过程中将x重命名为myVarconsole.log('Myrenamedvariable:',myVar)//我重命名的变量:1展开运算符...多用于访问数组和对象的内容,也可以用来替代数组函数(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}对象循环三各种for循环简写:(1)for...of访问数组条目(2)for...in访问数组的索引和用于对象文字时的键(3)Array.forEach使用回调函数访问数组元素,它们的索引操作采用三个可能的参数:被迭代的数组元素、元素的索引和数组的完整副本//Longhandconstarr=['Yes','No','Maybe']for(leti=0;i{console.log('Hereisitem:',str)})for(letindexinarr){console.log(`Itematindex${index}is${arr[index]}`)}//Forobjectliteralsconstobj={a:1,b:2,c:3}for(letkeyinobj){conaloe.log(`Valueatkey${key}is${obj[key]}`)}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+(~realNum指数?“存在!”:'doesnotexist!')console.log(fakeNum+(~noneNumIndex?'exists!':'doesnotexist!')使用!!将值转换为布尔值//LonghandconstsimpleInt=3constintAsBool=Boolean(simpleInt)//ShorthandconstsimpleInt=3constintAsBool=!!simpleInt//trueconstsimpleInt=-1constintAsBool=!!simpleInt//falsearrow/lambda函数表达式//LonghandfunctionprintStr(str){console.log('Thisisastring:',str)}printStr('Girl!')//ShorthandconstprintStr=(str)=>{console.log('Thisisastring:',str)}printStr('Girl!')//ShorthandTypeScript(指定variabletype)constprintStr=(str:string)=>{console.log('Thisisastring:',str)}printStr('Girl!')使用箭头函数隐式返回表达式//Longhandfunctioncapitalize(name){returnname.toUpperCase()}functionadd(numA,numB){returnnumA+numB}//简写constcapitalize=(name)=>name.toUpperCase()constadd=(numA,numB)=>(numA+numB)//简写TypeScript(指定变量类型)constcapitalize=(name:string)=>name.toUpperCase()constadd=(numA:number,numB:number)=>(numA+numB)双位非运算符应用按位非运算符两次~~允许我们得到一个Math.floor()的值//LonghandMath必须在使用前引用constnum=4.5constfloorNum=Math.floor(num)//4//Shorthand~~可以直接使用constnum=4.5constfloorNum=~~num//4的幂速记另一个有用的技巧是Math.pow()函数使用内置Math对象的替代方法是**技巧。//Longhandconstnum=Math.pow(3,4)//81//Shorthandconstnum=3**4//81TypeScript简写(不懂)//LonghandclassPerson{privatename:stringpublicage:intprotectedhobbies:string[]constructor(name:string,age:int,hobbies:string[]){this.name=namethis.age=agethis.hobbies=hobbies}}//ShorthandclassPerson{构造函数(私人姓名:string,公共年龄:int,受保护的爱好:string[]){}}