资讯专栏INFORMATION COLUMN

JavaScript 条件表达式深入学习

ARGUS / 1566人阅读

摘要:本文章记录本人在深入学习条件表达式中看书理解到的一些东西,并且整理记录下来,加深记忆和方便之后的复习。表达式的值具有线性特征,如对连续的区间值进行判断。

本文章记录本人在深入学习js条件表达式中看书理解到的一些东西,并且整理记录下来,加深记忆和方便之后的复习。主要是深入学习if elseswitch语句的一些性能优化和逻辑思维。

提高条件性能的策略

js的条件表达式和其他语言一样,都采用了if elseswitch这两种。由于不同的浏览器对流程控制进行了不同的优化。因此这两种在性能上是没有什么区别的,主要还是根据需求进行分析和选择。

如果条件较小的话选用if else比较合适。

相反,条件数量较大的话,就建议选用switch

一般来说,if else适用于两个离散的值或者不同的值域。如果判断多个离散值,使用switch更加合适。

  

在大多数的情况下switchif else运行的更加快。

恰当的使用 if 与 switch

当我们使用到条件表达式的时候,无论if else还是switch,都应确保下面3个目标的基本实现:

精确表现事物的内在、固有的逻辑关系。不能为了结构而破坏。

优化逻辑的执行效率。执行效率是程序设计的重要目标,不能为了省事而随意的消耗资源。

简化代码的结构层次,使代码更加容易的阅读。

适合使用if else的情况:

具有复杂的逻辑关系。

表达式的值具有线性特征,如对连续的区间值进行判断。

表达式的值是动态的。

测试任意类型的数据。

适合使用switch的情况:

每句表达式的值。这种是可以期望的、平行逻辑关系的。

表达式的值具有离散性,不具有线性的非连续的区间值。

表达式的值是固定的,不是动态变化的。

表达式的值是有限的,而不是无限的,一般情况下表达式应该比较少。

表达式的值一般为整数、字符串类型的数据。

例如,对学生的分数进行不同的判断,这个时候使用if else就比较合适,因为这种情况,表达式的值是连续的线性判断。

Javascriptif (socre < 60) {
    alert("不及格");
} else if (socre > 60 && socre <= 85) {
    alert("良好");
} else if (socre > 86) {
    alert("优秀");
}

而判断性别之类的使用switch就比较合适。

Javascriptswitch (sex) {
    case "男":
        alert("先生");
        break;
    case "女":
        alert("女士");
        break;
}
优化 if 逻辑
  

逻辑顺序体现了人的思维的条理和严密性。合理的顺序可以提升解决问题的品质,相反,混乱的顺序和容易导致各种错误的发生。

人们考虑的东西到时候,都会把最可能发生的情况先做好准备。优化if逻辑的时候也可以这样想:把最可能出现的条件放在前面,把最不可能出现的条件放在后面,这样程序执行时总会按照带啊名的先后顺序逐一检测所有的条件,知道发现匹配的条件才会停止继续检测。

if的优化目标:最小化找到分支之前所判断条件体的数量。if优化的方法:将最常见的条件放在首位。

Javascriptif (i < 5) {
    // 执行一些代码
 } else if (i > 5 && i < 10) {
    // 执行一些代码
 } else {
    // 执行一些代码
 }

例如上面这个例子,只有在i值经常出现小于5的时候是最优化的。如果i值经常大于或者等于10的话,那么在进入正确的分支之前,就必须两次运算条件体,导致表达式的平均运算时间增加。if中的条件体应该总是按照从最大概率到最小概率排列,以保证理论速度最快。

if 嵌套的思维陷阱

if语句里面在嵌套一个if语句是一件经常见到的东西,假设有4个调价你,只有当这些条件都符合要求的时候,才会执行某一些事情。遵循一般人的思维习惯,在检测这些条件的时候,常常会沿用下面这种结构嵌套:

Javascriptif (a) {
    if (b) {
        if (c) {
            if (d) {
                alert("条件全部成立");
            } else {
                alert("条件 d 不成立");
            }
        } else {
            alert("条件 c 不成立");
        }
    } else {
        alert("条件 b 不成立");
    }
 } else {
    alert("条件 a 不成立");
}

从思维的方向性来考虑,这种结构并没有错,使用下面这种if结构来表示可能更加的合适和简单:

Javascriptif (a && b && c && d) {
    alert("全部条件成立");
}

从刚才的代码来说,使用if语句来逐个验证条件的合法性,并且对某个条件是否合法进行了提示,方便我们去追踪每一个条件。但是,如果使用了上面的if结构多重嵌套,就会出现另一种可能:a条件如果不成立的话,就会直接跳出整个嵌套结构,不会去管b,c,d条件是否成立。如果这样做的话,层层包裹的if结构会使代码嵌套过深,难以编辑。

为了解决上面的问题,一般来说会采用排除法,即对每一个条件进行排除,条件全部成立在执行特定的操作。

Javascriptvar t = true;
if (!a) {
    t = false;
}
if (!b) {
    t = false;
}
if (!c) {
    t = false;
}
if (!d) {
    t = false;
}
if (t) {
    // 条件全部符合要求
}

排除法有效的避免了上面所说的条件结构的多重嵌套问题,且更加符合人的思维模式。当然,也存在一些局限性,一旦发生错误的话,就要放弃后面的操作。如果想要防止这类问题发生,可以在设计一个标示变量来跟踪整个操作行为。

容易在 if 里犯的小错误

不知道大家有木有犯过下面这种错误:

Javascript// 第一种
if (i = 1) {
    alert(i);
}

// 第二种
if (i = 1) ;
{
    alert(i);
}

第一种情况是,有时候会把比较运算=== or ==符错写为赋值运算符=。而且这种错误一般很难发现,由于它是一个合法的表达式,不会导致编译错误。

最后就把常量放在左边,把变量放在右边,这样写的话,就算你把=当作了===来使用也会报错。

Javascriptif (1 === i) {
    alert(i);
}

第二种是,在if的括号后面加了个分号,导致整个结构的逻辑就发生了变化。我们应该牢记条件表达式之后不允许添加分化,最后就通过把大括号与条件表达式写在一行来防止犯错。

Javascriptif (i) {
    alert(i);
}
编写 switch 要注意的地方

千万不要忘记在每一个case语句后面放一个break语句。也可以放一个return或者throwcase语句匹配expression是用===而不是==

防止 switch 贯穿

switch语句中,除非明确地中断流程,否则每次条件判断后就会贯穿到下一个case条件。在执行switch语句中,js会先计算switch条件的值,然后使用这个值与每个case中的值进行比较,如果相同则执行标签下的语句。在执行的时候如果遇到跳转语句,就会跳出switch结构,否则就会按照顺序执行下去,知道switch语句末尾。如果没有匹配的case的话就会执行default的语句。

Javascriptswitch (a = 3) {
    case 3 - 2:
        alert(1);
    break;
    case 1 + 1:
        alert(2);
    break;
}

上面的switch语句中,case语句只是指明了想要执行代码的起点,并没有指明终点,如果没有在case从句中添加break语句,则会发生连续贯穿现象,从而忽略后面的case从句,这样就会造成switch结构的逻辑混乱。

  

最后,如果文章有什么错误和疑问的地方,请指出。与sf各位共勉!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85630.html

相关文章

  • Javascript 深入学习循环

    摘要:递归函数还会受到浏览器调用栈的大小的限制。虽然迭代也会导致性能问题,但是使用优化的循环就可以代替长时间运行的递归函数,可以提高新能,因为运行一个循环比反复调用一个函数的开销要小。 本文章记录本人在深入学习js循环中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。 选择正确的循环体 在大部分编程语言中,代码执行的时间多数消耗在循环的执行上。 js定义了4种...

    Cristalven 评论0 收藏0
  • 60分钟正则从入门到深入

    摘要:正则表达式使用单个字符串来描述匹配一系列匹配某个句法规则的字符串。接下来,是在手机正则里面已经出现了。序列匹配而则匹配。分组与反向引用分组,又称为子表达式。把正则表达式拆分成小表达式。 本文转载自网络。转载编辑过程中,可能有遗漏或错误,请以原文为准。原文作者:水墨寒湘原文链接:https://juejin.im/post/582dfc... 正则表达式对于我来说一直像黑暗魔法一样的存...

    _ang 评论0 收藏0
  • 深入理解JavaScript的类型转换

    摘要:等同于等同于其他类型和布尔类型之间的比较如果是布尔类型,则返回的结果。 showImg(https://segmentfault.com/img/bVburFq?w=796&h=398); 前言 JavaScript作为一门弱类型语言,我们在每天的编写代码过程中,无时无刻不在应用着值类型转换,但是很多时候我们只是在单纯的写,并不曾停下脚步去探寻过值类型转换的内部转换规则,最近通过阅读你...

    W4n9Hu1 评论0 收藏0
  • 深入理解JavaScript的类型转换

    摘要:等同于等同于其他类型和布尔类型之间的比较如果是布尔类型,则返回的结果。 showImg(https://segmentfault.com/img/bVburFq?w=796&h=398); 前言 JavaScript作为一门弱类型语言,我们在每天的编写代码过程中,无时无刻不在应用着值类型转换,但是很多时候我们只是在单纯的写,并不曾停下脚步去探寻过值类型转换的内部转换规则,最近通过阅读你...

    niuxiaowei111 评论0 收藏0
  • 深入理解JavaScript的类型转换

    摘要:等同于等同于其他类型和布尔类型之间的比较如果是布尔类型,则返回的结果。 showImg(https://segmentfault.com/img/bVburFq?w=796&h=398); 前言 JavaScript作为一门弱类型语言,我们在每天的编写代码过程中,无时无刻不在应用着值类型转换,但是很多时候我们只是在单纯的写,并不曾停下脚步去探寻过值类型转换的内部转换规则,最近通过阅读你...

    shuibo 评论0 收藏0

发表评论

0条评论

ARGUS

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<