Molerose

Javascript DOM 编程艺术 (笔记No.3 - 条件语句)
学习一种新的程序设计语言看起来可能很难,但事实却并非如此。DOM脚本看起来似乎比CSS更复杂,可只要领悟了它的语法...
扫描右侧二维码阅读全文
09
2018/09

Javascript DOM 编程艺术 (笔记No.3 - 条件语句)

学习一种新的程序设计语言看起来可能很难,但事实却并非如此。DOM脚本看起来似乎比CSS更复杂,可只要领悟了它的语法,你就会发现自己又掌握了,一样功能强大的Web开发工具。归根结底,代码都是思想和概念的体现。


条件语句(conditional statement)

脚本的真正威力体现在它们还可以根据人们给出的各种条件作出决策。

Javascript 使用条件语句(conditional statement)来做判断。

在解释脚本时,浏览器将依次执行这个脚本中的各条语句,我们可以在这个脚本中用条件语句来设置一个条件,只有满足这个条件才能让更多的语句执行。

最常见的就是if语句,下面是if语句基本的语法

if (conditional) {
    statements;
}

条件必须放在if后面的圆括号里。

条件的求值结果永远是一个布尔值,即只能是 truefalse

花括号中的语句不管它们有多少条,只有在给定条件的求值结果是true 的情况下才会执行,

如下面的例子中,alert消息永远也不会出现

if (1 > 2) {
    alert("The world has gone mad!") // 世界变得疯狂!
}
// 因为1不可能大于2,所以上面的这个条件的值永远是false,故alert永远也不可能弹出消息!

在条件if语句中,我们有意把所有的东西都放在花括号里。

这并不是Javascript的一项语法要求,我们这么做只为了让代码更容易阅读。

事实上,if 语句中的花括号本身并不是必不可少的

如果 if 语句中的花括号只包含一条语句的话,就可以不使用花括号,而且这条if语句的全部内容可以写在同一行上

if (1 > 2) alert("The world has gone mad!"); // 世界变得疯狂!

不过,因为花括号可以提高脚本的可读性,所以在if语句中总是使用花括号是个好习惯。

if 语句可以有一个 else 子句。

包括在 else 子句中的语句会在给定条件为假时执行

if (1 > 2) {
    alert("The world has gone mad!"); // 世界变得疯狂!
} else {
    alert("All is well with the world!"); // 一切都与世隔绝!
}
// alert 所弹出的结果是 All is well with the world!

比较符操作

Javascript 还提供了许多几乎只能用在条件语句里的操作符

大于 >

小于 <

大于或等于 >=

小于或等于 <=

等于 == (注意,单个等号是用于完成赋值操作的)

全等 === (进行严格比较)

不等于 !=

不相等 !== (进行严格比较)

如果在条件语句的某个条件里使用了单个等号,那么只要响应的赋值操作取得了成功,那么这个条件的求值结果将是true

下面一个是进行等于比较的做法

var my_mood = "happy";
var your_mood = "sad";
if (my_mood == your_mood) {
    alert("We both feel the same"); // 我们都有同感
}
// 条件的求值结果为false故不执行alert

Javascript 还提供了一个用来进行不等于比较的操作符,它由一个感叹号和一个等号构成!=

var my_mood = "happy";
var your_mood = "sad";
if (my_mood != your_mood) {
    alert("We're feeling different moods") // 我们感受不同的情绪
}
// 条件求值结果为 true 故弹出的结果为 We'r feeling different moods

相等操作符==并不表示严格的相等,这一点很容易让人犯糊涂。

例如比较false与一个空字符会得到什么结果?

var a = false;
var b = "";
if (a == b) {
    alert("a equals b") // 等于b
}
// alert 所弹出的结果 a equals b

这个条件语句的求值结果是 true 为什么?

因为相等操作符==认为空字符串与false的含义相同

要进行严格比较,就要使用另一重等号===

这个全等操作符会执行严格的比较,不仅比较值,而且会比较变量的类型

var a = false;
var b = "";
if (a === b) {
    alert("a equals b") // 等于b
}
// 条件语句的求值结果为 false 故不弹出 alert信息

逻辑操作符

逻辑与 &&

  • 特性:只有在他两个操作数都是true时才会是true

逻辑或 ||

  • 特性1:操作数中有一个是true,逻辑或操作就是true
  • 特性2:操作数中两个操作数都是true,逻辑或操作也是true
  • 特性3:操作数中两个操作数都是false,逻辑或操作才会是false

逻辑非 !

  • 特性:只能用于单个逻辑操作数,其结果就是将逻辑操作数所返回的布尔值取反

Javascript 允许吧条件语句里的操作组合后在一起。

例如想检查某个变量,不妨假设这个变量的名字是num,他的值是不是在5~10之间,我将需要进行两次比较操作符。

首先,比较这个变量是否大于或等于5;

然后比较这个变量是否小于等于10。

这两次比较操作成为逻辑操作符(operand)

下面是把这两个逻辑比较组合在一起的具体做法:

var num = 5;
if ( num >= 5 && num <= 10) {
    alert("The number is in the right range");  // 数字在正确的范围内
}
// alert 所弹出的值为 The number is in the right range

这里使用了逻辑与操作符;

逻辑操作符的操作对象是布尔值。

每个逻辑操作数返回一个布尔值 true 或 false

逻辑与操作只有在他两个操作数都是true时才会是true

逻辑或 操作符由两个垂直线字符构成 ||

  1. 只要他的操作数中有一个是 true,逻辑或操作就将是true。
  2. 如果他两个操作数都是 true,逻辑或操作也将是 true。
  3. 只有当他的两个操作数都是 false时,逻辑或操作才会是 false
var num = 5;
if ( num > 10 || num < 5) {
    alert("The number is in the right range"); // 数字在正确的范围内
}
// alert 所弹出的值为 The number is in the right range

逻辑非 它由一个 ! 号单独构成。

逻辑非操作符只作用单个逻辑操作数,其结果就是把哪个逻辑操作数所返回的布尔值取反。

如果哪个逻辑操作数返回的布尔值是true,逻辑非操作符将把他取反为false

if ( !( 1 > 2 )) {
    alert("All is well with the world") // 一切都与世隔绝
}
// alert 所弹出的只为 All is well with the world
// 注意,为避免产生歧义上述语句把逻辑操作数放在了括号里,因为是想要让逻辑非操作符作用于括号里的所有内容

也可以使用逻辑非把整个条件语句的结果颠倒过来。

var num = 5;
if ( !( num > 10 || num < 5)) {
    alert ("The number is in the right range");
} 
// alert 所弹出的值是 The number is in the right range
// 条件所返回的布尔值为 false,但是使用了逻辑非操作符,所以将条件语句的值颠倒成了true 最终满足if语句的逻辑,弹出alert信息
Last modification:September 9th, 2018 at 05:27 pm
If you think my article is useful to you, please feel free to appreciate

3 comments

  1. 深圳自考

    收藏了一大堆博主的干货文章,哈哈哈 白嫖党

  2. 江浙日报
    该评论仅登录用户及评论双方可见
  3. 太阳黑子

    还可以,是片好文章!

Leave a Comment