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

10个干净、实用和专业的JavaScript代码片段

时间:2023-03-13 21:25:56 科技观察

我为所有JavaScript程序员收集了一些最酷、最有用的速记代码列表。使用这些代码清单可以使您的代码看起来更专业。1.单行If-Else语句你可能熟悉这样一个常规的if-else语句:if(10<100){console.log("True");}else{console.log("False");}输出True但是,你知道你可以通过使用三元运算符以更短更简洁的方式编写上面的代码吗?10<100?console.log("True"):console.log("False")outputs:True通常,三元运算符遵循以下简单模式:condition?trueExpression:falseExpression三元运算符也可以链接在一起形成更长的链。但是,它通常会使代码非常冗长。明智地使用它们,不要使事情进一步复杂化。2.合并数组可以使用展开运算符(...)将一个数组的元素展开到另一个数组中,例如:constnumbers=[10,20,30,40];constallNumbers=[...numbers,50,60,70,80];控制台日志(allNumbers);输出:[10,20,30,40,50,60,70,80]3.从数组中删除重复项constnumbers=[1,1,20,3,3,3,9,9];constuniqueNumbers=[...newSet(numbers)];console.log(uniqueNumbers);输出:[1,20,3,9]4.将任何东西转换为布尔值除了真假之外,JavaScript还会考虑其他类型的真假。0、""、null、undefined、NaN和false始终为假。其他一切都是真实的。因此,在JavaScript中,您可以使用一元运算符(!)将任何值转换为true和false:constbool1=!0;//trueconstbool2=!100;//falseconstbool3=!"test";//falseconstbool4=!!"test";//trueconsole.log(bool1,bool2,bool3,bool4);输出:truefalsefalsettrue5,交换两个变量而没有第三个letx=1;lety=2;[x,y]=[y,x];控制台日志(x,y);输出:216,将数字转换为字符串constnum=1+"";console.log(typeofnum);控制台日志(数量);output:string17,convert将字符串转换为数字constnumStr="124";constnum=+numStr;console.log(typeofnum);console.log(num);Output:number848,使用反引号(`)将变量嵌入到字符串中enclosedandinsertvariablesbetween,在字符串之间整齐地嵌入变量${}:constage=41;constsentence=`我${age}yearsold`;控制台日志(句子);输出:I'm41yearsold9。将字符串拆分为数组要将字符串拆分为数组,可以使用展开运算符(...):conststr="Test"conststrAsArr=[...str]console.log(strAsArr)output:["T","e","s","t"]10.Optionalchaining"可选链接运算符(?.)允许读取位于连接对象链深处的属性值,而无需显式验证每个引用在链中是有效的。”—MDNWeb文档假设您有一个数据对象并希望安全地访问data.test.value。首先,您需要检查:是否定义了数据。是否定义了data.test。在调用data.test.value之前,因为很明显,您无法读取未定义的属性。constdata={test:{value:1}}if(data&&data.test){console.log(data.test.value);}output:1幸运的是,有了optionalchaining,你可以简单明了的写出上面的代码:constvalue=data?.test?.value;console.log(value)输出:1现在,您还可以安全地尝试访问不存在的属性而不会出现问题:console.log(data?.this?.does?.not?.exist?.for?.sure)输出:undefined附加功能:提高JSON的可读性我相信您以前使用过JSON.stringify()。但是,您可能不会使用它的一种方法是整齐地缩进JSON数据。让我们看看如何完成这个任务。JSON.stringify()方法接受两个可选参数:用于过滤显示的JSON的替换函数。在这种情况下可以为null,因为我们不需要它。空格值,可以是数字或所需空格的字符串。在这种情况下,让我们使用制表符('\t')缩进JSON对象以使其看起来更漂亮:constreadableJSON=JSON.stringify({a:'A',b:'B'},null,'\t');console.log(readableJSON);Output:{"a":"A","b":"B"}结束语希望我今天分享的技巧对你有用。有什么问题可以在留言区和我分享讨论。同时,如果大家有其他好的方法,也可以分享出来,共同学习进步。