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

如何写出更好的JS代码!

时间:2023-04-05 19:22:14 HTML5

作者:TaimoorSattar译者:前端小智来源:valentinog点赞再看,微信搜索【大千世界】,B站关注【前端小智】这个没有大厂背景,但是有积极态度的人。本文已收录到GitHubhttps://github.com/qq44924588...,文章已分类,也整理了很多我的文档和教程资料。Javascript是一种浏览器可以理解的语言,它用于在不刷新页面的情况下加载动态内容。今天先来列举一些代码更少、可读性更强的JS写法。使用模板字符串模板字符串是可以嵌入到表达式中以使代码更简单易读的字符串(变量)。varcode="javascript";varstr=`我喜欢${code}我喜欢${code}`;如果没有模板字符串,我们需要这样写:varcode="javascript";varstr1="nIlove"+code+"nIlove"+code+"n";使用三元运算符在编程中,您会遇到逻辑运算。如果要在两个语句之间执行逻辑,三元运算符的可读性要高得多。让价格=isMember?'$2.00':'$10.00'使用include语句JS中的include语句是一种更简单的在数组和句子中搜索字符串的方法。varstr="我喜欢JavaScript。";varword=str.includes("javaScript");//result:true数组也可以使用include方法:varstr=["taimoor","ali","umer"];varn=str.includes("taimoor");//result:trueNullcoalescingoperator如果我们使用第三方API,我们可能会遇到相同的key-value不会出现在每个查询中的情况。这样我们就必须检查JSON中的空键,这样我们就不会出错。要检查空键,可以使用以下方法:条件语句Nullcoalescingoperator(??)-(recommended)例如,我们有以下JSON:varperson={name:"TaimoorSattar",age:21,metadata:{hobby:"football,blog"}}使用条件语句,我们可以访问JSONmatadata中的hobby属性,如下所示lethobby="";if(person.metadata){hobby=person.metadata.hobby?person.metadata.hobby:"";}使用空合并运算符,我们只需要做:lethobby=person.metadata?.hobby??"";上面的代码检查JSON元数据中的hobby键,如果有可用值则返回它,否则返回一个空字符串。函数默认参数JS中的一些函数允许我们发送选项参数。根据可选参数,函数的返回值可能会发生变化。functionoutputName(name="taimoor"){returnname;}letstring1=outputName();//结果:taimoorletstring2=outputName("ali");//结果:ali参数的类型检查在某些情况下,Function参数必须按类型进行限制。我们可以像这样检查函数的类型:functionsum(a,b){letresult=(typeofa=="number"&&typeofb=="number")?a+b:空;returnresult}sum("s",6)//结果:nullsum(4,6)//结果:10用Try/Catch包装代码Try/Catch语句用于检查代码中的错误。如果发生错误,将运行catch语句。try{functionnotexist();}catch(e){console.log("error");}解构通过解构,我们可以从复杂的结构中提取出我们需要的部分。functionoutputName({name="taimoor"}){//去结构化returnname;}varperson={name:"TaimoorSattar",age:21,metadata:{hobby:"football,blog"}}letstr=输出名(人);//TaimoorSattarwritesDRYcodeDRY(Don'tRepeatYourself),避免代码中的重复以避免混淆。为避免代码混乱,可以遵循以下规则。写可重用的函数给变量和函数定义清楚的名字~我是小智,我去洗碗了,下次见!代码部署后可能存在的bug,无法实时获知。事后为了解决这些bug,花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文:https://taimoorsattar.dev/blo...每周更新交流文章。可以微信搜索【大千世界】第一时间阅读,回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录,欢迎Star。