本文由原作者Taimoor Sattar翻译。
Javascript是一种浏览器可以理解的语言。它用于在不刷新页面的情况下加载动态内容。今天我们就来列举一些用更少的代码写出更具可读性的JS的方法。
使用模板字符串
模板是可以嵌入到表达式中的字符串(变量)。它可以使代码更简单,更容易阅读。
var code = "javascript";var str = ` I love ${code} I love ${code} `;
如果没有模板字符串,我们需要这样写:
var code = "javascript";var str1 = "n I love " + code + "n I love " + code + "n";
使用三元运算符。
在编程中,会遇到逻辑运算。如果你想在两个语句之间执行逻辑,布尔表达式更具可读性。
let price= isMember ? '$2.00' : '$10.00'
使用Include语句
JS中的include语句是在数组和句子中搜索字符串的一种更简单的方法。
var str = "I love JavaScript.";var word = str.includes("javaScript"); // result: true
数组也可以使用include方法:
var str = ["taimoor", "ali", "umer"];var n = str.includes("taimoor"); // result: true
空合并运算符
如果我们使用第三方API,我们可能会遇到相同的键值不会出现在每个查询中。所以我们必须检查JSON中的空键,以免出错。
要检查空键,您可以使用以下方法:
条件语句空合并运算符(??)-(推荐)
例如,我们有以下JSON:
var person = { name: "Taimoor Sattar", age: 21, metadata: { hobby: "football, blog" }}
使用条件语句,我们可以访问JSON的元数据中的hobby属性,如下所示
let hobby = "";if (person.metadata){ hobby = person.metadata.hobby ? person.metadata.hobby : "";}
使用空合并操作符,我们只需要这样做:
let hobby = person.metadata?.hobby ?? "";
上面的代码检查JSON元数据中的hobby键,如果可用则返回值,否则返回一个空字符串。
函数默认参数
JS中的一些函数允许我们发送选项参数。根据可选参数,可以改变函数的返回值。
function outputName(name="taimoor"){ return name;}let string1 = outputName(); // result: taimoorlet string2 = outputName("ali"); // result: ali
参数的类型检查
在某些情况下,函数参数应该受到类型的限制。我们可以像这样检查函数的类型:
function sum(a, b){ let result = (typeof a == "number" && typeof b == "number") ? a + b : null; return result}sum("s", 6) // result: nullsum(4, 6) // result: 10
用Try/Catch包装代码
Try/Catch语句用于检查代码中的错误。如果有错误,将运行catch语句。
try{ functionnotexist();}catch(e){ console.log("error");}
解构
通过解构,我们可以从复杂的结构中提取出我们需要的部分。
function outputName({name = "taimoor"}){ // De-structuring return name;}var person = { name: "Taimoor Sattar", age: 21, metadata: { hobby: "football, blog" }}let str = outputName(person); // Taimoor Sattar
写枯燥的代码
干(不要自己重复),代码中避免重复以免混淆。为了避免代码混乱,您可以遵循以下规则。
编写可重用函数为变量和函数定义明确的名称
本文来自倾听雪落投稿,不代表舒华文档立场,如若转载,请注明出处:https://www.chinashuhua.cn/24/551659.html