当前位置: 首页 > 科技观察

一些优秀的JavaScript技能总结

时间:2023-03-17 14:47:01 科技观察

JavaScript包含各种对典型编程思想有用的技巧。在实际开发中,我们通常希望减少代码行数;因此,今天这些提示和代码希望对您有所帮助。下面开始今天的内容。1.01)与Javascript对象相关解构对象将对象的值解构为变量是在传统点表示法之外读取其值的另一种方法。以下示例比较了用于读取对象值的经典点表示法和对象解构快捷方式。constrestaurant={name:"ClassicoItaliano",menu:["Garlic","Bread","Salad","Pizza","Pasta"],openingHours:{星期五:{open:11,close:24},saturday:{open:12,close:23},},};//Longhandconsole.log("餐厅周五的价值:",restaurant.openingHours.friday);console.log("餐厅名字的价值:",restaurant.name);//Shorthandconst{name,openingHours}=restaurant;const{openingHours:{friday}}=restaurant;//我们可以更进一步,在fridayconst{openingHours:{friday:{open}}}=餐厅;console.log(name,friday,open);02),Object.entries()Object.entries()是ES8中引入的一项功能,它允许您将文字对象转换为键/值对数组。constcredits={producer:"OpenReplay",editor:"Federico",assistant:"John",};constarr=Object.entries(credits);console.log(arr);输出:[["producer","OpenReplay"],["editor","Federico"],["assistant","John"],];03),Object.values()Object.values()也是ES8引入的新特性,并且对象具有类似的功能。entries()但这没有关键部分:constcredits={producer:"OpenReplay",editor:"Federico",assistant:"John",};constarr=Object.values(credits);console.log(arr);Output:["OpenReplay","Federico","John"];04),objectloopshorthand传统的JavaScriptfor循环语法是for(leti=0;i{console.log("Hereisitem:",str);});for(letindexinarr){console.log(`Itematindex${index}is${arr[index]}`);}//对于对象字面量constobj={a:1,b:3,c:5};for(letkeyinobj){console.log(`Valueatkey${key}is${obj[key]}`);}05),objectpropertyshorthand在JavaScript中定义对象文字让生活更轻松。ES6在为对象分配属性方面提供了更多的简单性。如果变量名和对象键相同,可以使用速记符号。通过在对象字面量中声明变量,您可以快速地为JavaScript中的对象分配属性。为此,必须使用预期的键命名变量。这通常在您已经有一个与对象属性同名的变量时使用。常量=1;常量b=2;常量c=3;//Longhandconstobj={a:a,b:b,c:c,};//简写constobj={a,b,c};06)、JavascriptForLoop如果你想要简单的JavaScript,又不想依赖第三方库,这个小技巧很有用。//手写:constfruits=['mango','peach','banana'];for(leti=0;iname.toUpperCase();constadd=(numG,numH)=>numG+numH;//简写TypeScript(指定变量类型)constcapitalize=(name:string)=>name.toUpperCase();constadd=(numG:number,numH:number)=>numG+numH;04),声明变量在函数开头声明变量赋值是个好主意。这种简化的方法可以帮助您在一次创建大量变量时节省大量时间和空间。//Longhandletx;lety;letz=3;//Shorthandletx,y,z=3;但是请注意,出于可读性的原因,许多人更喜欢手动声明变量。05),OptionalChaining我们可以使用点符号访问对象的键或值。我们可以通过可选链接更进一步并读取键或值,即使我们不确定它们是否存在或是否已设置。如果键不存在,则可选链接的值未定义。下面是一个可选链的例子:constrestaurant={details:{name:"ClassicoItaliano",menu:["Garlic","Bread","Salad","Pizza"],},};//Longhandconsole.log("Name",restaurant.hasOwnProperty("details")&&restaurant.details.hasOwnProperty("name")&&restaurant.details.name);//Shorthandconsole.log("Name:",restaurant.details?.name);06)、双位非运算符JavaScript中内置的Math对象通常用于访问数学函数和常量。一些函数提供了有用的技术,允许我们在不引用Math对象的情况下调用它们。例如,我们可以通过使用按位NOT运算符两次来获取整数的Math.floor()~~。constnum=7.5;//LonghandconstfloorNum=Math.floor(num);//7//简写constfloorNum=~~num;//7writtenlast这些已被证明是简洁的无价技巧,使编码变得有趣并且代码行易于记忆。但请记住,它们的使用不能以牺牲代码的其他方面为代价。如果你觉得我今天分享的内容有用,请点赞,关注我,分享给你的朋友,说不定能帮到他。