这篇文章运用简单易懂的例子给大家介绍JavaScript中的条件表达式的应用,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
我们可以将长的条件表达式分解成有命名的短小条件表达多,这样有利于阅读。例如我们可能会写这样的代码:
let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")
上面的代码太过冗长了,不利于阅读,我们可以把它分解成几个短小且有名字的条件表达式,如下所示:
let userAgent = navigator.userAgent.toLowerCase();
let isMac = userAgent.includes("mac");
let isIE = userAgent.toLowerCase().includes("ie");
let isMacIE = isMac && isIE;
与上面相反的,如果有多个简短的条件表达式,则可以将它们合并成一个。例如我们可能会写这样的代码:
const x = 5;
const bigEnough = x > 5;
const smallEnough = x < 6;
const inRange = bigEnough && smallEnough;
我们可以这样合并:
const x = 5;
const inRange = x > 5 && x < 6;
因为表达式很短,即使把它们组合在一起也不会使表达式变长,所以我们可以这样做。
如果我们在条件块中有重复的表达式或语句,则可以将它们移出。例如我们可能会写这样的代码:
if (price > 100) {
//...
complete();
} else {
//...
complete();
}
我们可以把重复的内容移到条件表达式外面,如下所示:
if (price > 100) {
//...
} else {
//...
}
complete();
这样,我们不必重复不必要地调用complete
函数。
如果我们在循环中使用了控制标志,那应该会这样代码:
let done = false;
while (!done) {
if (condition) {
done = true;
}
//...
}
在上面的代码中,done
是控制标,在condition
为true
时,将done
设置为true
停止while
循环。
相对于上面,我们可以使用break
来停止循环,如下所示:
let done = false;
while (!done) {
if (condition) {
break;
}
//...
}
我们可以使用switch
语句为不同种类的数据创建相同的子类,而不是使用switch
语句对不同类型的数据执行相同的操作,然后针对对象的类型使用不同的方法。
例如我们可能会写这样的代码:
class Animal {
constructor(type) {
this.type = type;
}
getBaseSpeed() {
return 100;
}
getSpeed() {
switch (this.type) {
case ('cat'): {
return getBaseSpeed() * 1.5
}
case ('dog'): {
return getBaseSpeed() * 2
}
default: {
return getBaseSpeed()
}
}
}
}
我们可以这样重构:
class Animal {
constructor(type) {
this.type = type;
}
getBaseSpeed() {
return 100;
}
}
class Cat extends Animal {
getSpeed() {
return super.getBaseSpeed() * 1.5;
}
}
class Dog extends Animal {
getSpeed() {
return super.getBaseSpeed() * 2;
}
}
当switch
语句很长时,应该为不同类型的对象定制case
块。
如果我们重复检查null
或undefined
,则可以定义一个代表该类的null
或undefined
版本的子类,然后使用它。
例如我们可能会写这样的代码:
class Person {
//...
}
我们可以这样重构:
class Person {
//...
}
class NullPerson extends Person {
//...
}
然后,我们将Person
设置为null
或undefined
的对象属性,而不是将其设置为NullPerson实例。
这样就无需使用条件检查这些值。
卫语句就是把复杂的条件表达式拆分成多个条件表达式,比如一个很复杂的表达式,嵌套了好几层的if-then-else
语句,转换为多个if
语句,实现它的逻辑,这多条的if
语句就是卫语句。
嵌套条件语句很难阅读,所以我们可以使用卫语句代替它们。例如我们可能会写这样的代码:
const fn = () => {
if (foo) {
if (bar) {
if (baz) {
//...
}
}
}
}
我们可以这样优化:
if (!foo) {
return;
}
if (!bar) {
return;
}
if (baz) {
//...
}
}
在上面的代码中,卫语句是:
if (!foo) {
return;
}
和
if (!bar) {
return;
}
如果这些条件为假,它们会提前返回函数,这样,我们就不需要嵌套了。
关于JavaScript中的条件表达式的应用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。