判断语句
布尔类型
js中有一种数据类型称之为布尔(英文叫 boolean)。
布尔数据只有两种取值: true
和 false
对应 真
和 假
, 或者说 是
和 否
。
很多事情只有两种可能,是 或者 否。
比如: 今天是星期天吗?
要么 是 ,要么 否。
js中的布尔类型数据 对应 是
和 否
只有两种取值。
其中 true 对应 是, false 对应 否。
布尔表达式
运算结果是布尔值的表达式
,就是 布尔表达式。
通常有如下几种
是否相等
是否相等的比较表达式 像这样
1 === 1
用 ===
3个等号连接两个比较对象。
这里 ===
被称之为 操作符(operator)
1 === 1
这样可以得到一个结果的代码,被称之为表达式
如果 两个比较对象相等,解释器运算结果为 true
如果不相等,解释器运算结果为 false
请运行js解释器命令行,输入如下语句
1 === 1
返回值为 true
1 === 2
返回值为 false
1 === '1'
返回值为 false。想一想,为什么?
'1' === '1'
返回值为 true
js中还有 用 ==
2个等号连接两个比较对象,判断是否相等
1 == 1
这种 2个等号比较 叫 松散相等比较(Loose Equality Comparison)
,
而 3等号比较 称之为 严格相等比较(Strict Equality Comparison)
,
抽象相等比较两个不同类型的对象,会尝试转化为同种类型进行比较,比如
1 == '1'
结果是true,因为js引擎会尝试把字符串转化为数字再进行比较。
2等号比较 的详细规则可以 查看MDN文档
js开发中,通常更常用的是 3等号的严格比较。
是否不相等
同样的是否不相等的操作符也有两种 !==
和 !=
!==
的比较 称之为 严格不相等比较( Strict inequality Comparison)
!=
的比较 称之为 松散不相等比较( Loose inequality Comparison)
如果两个比较对象不相等,解释器运算结果为 true
如果相等,解释器运算结果为 false
请运行js解释器命令行,输入如下语句
1 != 1
1 !== 1
返回值都为 false
1 != 2
1 !== 2
返回值都为 true
'1' != '1'
'1' !== '1'
返回值都为 false
1 !== '1'
返回值为 true
1 != '1'
返回值为 false
是否大于
用 >
连接两个比较对象。
如果前面的对象大于后面的对象,解释器运算结果为 true
否则,运算结果为 false
请运行js解释器命令行,输入如下语句
1 > 1
返回值为 false
1 > 0
返回值为 true
1 > 2
返回值为 false
是否大于等于
用 >=
连接两个比较对象。
如果前面的对象大于或者等于后面的对象,解释器运算结果为 true
否则,运算结果为 false
请运行js解释器命令行,输入如下语句
1 >= 1
返回值为 true
1 >= 0
返回值为 true
1 >= 2
返回值为 false
是否小于
用 <
连接两个比较对象。
如果前面的对象小于后面的对象,解释器运算结果为 true
否则,运算结果为 false
请运行js解释器命令行,输入如下语句
1 < 1
返回值为 false
1 < 0
返回值为 false
1 < 2
返回值为 true
是否小于等于
用 <=
连接两个比较对象。
如果前面的对象小于或者等于后面的对象,解释器运算结果为 true
否则,运算结果为 false
请运行js解释器命令行,输入如下语句
1 <= 1
返回值为 true
1 <= 0
返回值为 false
1 <= 2
返回值为 true
表达式逻辑操作
有的时候,布尔表达式 还可以 用 逻辑操作符
组合起来 成为一个更大的表达式
布尔表达式 主要有3 种逻辑操作 :
且(and)
、 或(or)
、 非(not)
, 分别对应 &&
、 ||
、 !
3种逻辑操作符
逻辑且
且
的逻辑关系 是用 &&
操作符 连接的,如下
表达式1 && 表达式2
这种组合,只有表达式1 和 表达式2 都成立 (也就是计算结果都为true),最终的结果才成立(为true)
任何一个表达式为 false ,结果都是false
你可以打开js解释器,依次输入如下的语句,看看结果是什么
true && true // 结果为 true
true && false // 结果为 false
false && true // 结果为 false
false && false // 结果为 false
var num1 = 5
var str1 = 'ok'
num1 > 4 && str1 === 'ok' // 结果为 true
num1 > 4 && str1 === 'bad' // 结果为 false
num1 > 6 && str1 === 'ok' // 结果为 false
num1 > 6 && str1 === 'bad' // 结果为 false
num1 > 4 && str1 === 'ok' && num1 > 5 // 结果为 false
逻辑或
或
的逻辑关系 是用 ||
操作符 连接的,如下
表达式1 || 表达式2
这种组合,只要表达式1 和 表达式2 任何一个成立 (也就是任何一个计算结果为true),最终的结果都成立(为true)
如果两个表达式计算结果都为 false ,结果才是false
你可以打开js解释器,依次输入如下的语句,看看结果是什么
true || true // 结果为 true
true || false // 结果为 true
false || true // 结果为 true
false || false // 结果为 false
var num1 = 5
var str1 = 'ok'
num1 > 4 || str1 === 'ok' // 结果为 true
num1 > 4 || str1 === 'bad' // 结果为 true
num1 > 6 || str1 === 'ok' // 结果为 true
num1 > 6 || str1 === 'bad' // 结果为 false
num1 > 6 || str1 === 'ok' || num1 !== 5 // 结果为 true
num1 > 6 || str1 === 'sk' || num1 !== 5 // 结果为 false
如果 && 和 || 一起使用, 注意 是先计算 && 部分, 其结果 再和 || 一起计算,比如这个表达式
6 > 5 || 'sk' === 'sk' && 4 === 5
就要先计算
'sk' === 'sk' && 4 === 5
结果是 false
然后这个false 再和前面的计算,就是
6 > 5 || false
所以最后的结果是true
如果我们就是想要: 先计算前面的 || 部分, 然后再和 后面 && 一起计算呢?
可以使用括号,像这样
(6 > 5 || 'sk' === 'sk') && 4 === 5
就要先计算
(6 > 5 || 'sk' === 'sk')
结果是 true
然后这个结果 true 再和前面的计算,就是
true && 4 === 5
所以最后的结果是false
可以看出, 不同的优先级会导致不同的结果
逻辑非
非
的逻辑关系是用 操作符 !
,作用 是把 后面的布尔表达式的结果反过来,
如下
! 表达式1
!
加在条件表达式1的前面,会反转其结果。
表达式1 计算结果为true, 最终的结果为 false
表达式1 计算结果为false,最终的结果为 true
你可以打开js解释器,依次输入如下的语句,看看结果是什么
! true // 结果为 false
! false // 结果为 true
var num1 = 5
var str1 = 'ok'
! (num1 > 4) // 结果为 false
! (str1 === 'sk') // 结果为 true
注意,逻辑非操作符 的优先级非常高,上面的表达式如果去除括号,这样写
! str1 === 'sk'
就会先运算 !str1
结果为 false, 然后 运算 false==='sk'
,结果就变成了false
如果 !
、 &&
和 ||
一起使用, 优先级是 ! > && > ||
就是先计算 ! , 再计算 && 部分, 最后再计算 ||
这样的表达式
! (4 > 6) || ('sk' === 'ok') && (4 > 3)
先计算 ! (4 > 6)
得到 true
再计算 ('sk' === 'ok') && (4 > 3)
得到 false
将上面的结果 用 || 连接 ,就是 true || false
,所以最后结果是 true
js 中,详细的操作符优先级,可以参考MDN文档
判断语句
上面的这些布尔表达式都表示了一个结果, true 还是 false。
那么这些表达式有什么用呢?
主要是用在判断语句中。
判断语句是根据 某个条件 决定是否要执行一些代码。
判断语句是以 if
关键字开头。
来看下面的例子,实现一个注册用户手机信息的函数,输入的手机号码不能超过11位。
function registerUser(phone){
if (phone.length !== 11) {
alert('输入错误!手机号码是11个字符')
}
console.log('函数结束')
}
var phone = prompt("请输入电话号码", "13900000001")
registerUser(phone)
注意: if后面的逻辑表达式一定要用括号括起来
如果 if
关键字 后面的条件 对应的表达式 运算结果 为 true
,就表示条件成立,就去执行 下面花括号里面
代码。
如果 if
后面的表达式结果为 false 就不会执行它 。
注意: if 对应的后续执行代码如果只有一行,可以省略花括号,像这样
function registerUser(phone){
if (phone.length !== 11)
alert('输入错误!手机号码是11个字符')
console.log('函数结束')
}
有的时候,程序 不仅仅 判断在某个条件成立时,做一些处理, 还要求 在这个条件不成立时
,做另外的处理。
if 后面的条件不成立要做什么,js 中 用 else
关键字,
比如,我们要求 如果用户输入的 手机号码长度正确,要给出输入正确的提示
function registerUser(phone){
if (phone.length !== 11){
alert('输入错误!手机号码是11个字符')
}
else{
alert('手机号码输入正确')
}
console.log('函数结束')
}
else 表示在 if 后面的条件不成立时,要做一些事。
if ... else
构成了一种 非此即彼 的判断关系。
注意, else 对应的后续执行代码如果只有一行,也可以省略花括号,像这样
function registerUser(phone){
if (phone.length !== 11)
console.log('输入错误!手机号码是11个字符')
else
console.log('手机号码输入正确')
console.log('函数结束')
}
有的时候,在if 条件不成立的情况下, 要做什么, 还需要进一步的判断
, 不能简单的就用一个else 来表示。
比如:用户输入的手机号码 长度为11个字符
条件满足,不能就直接判定 手机号码输入正确, 还得判断输入的 是不是都是数字
。
这时候, 可以这样写
function registerUser(phone){
if (phone.length !== 11)
console.log('输入错误!手机号码是11个字符')
// 还需要进一步判断 输入的是否全数字
else if (isNaN(phone)) // isNaN是内置函数, 用来判断 输入的是否非数字
console.log('输入错误!手机号码必须全是数字')
else
console.log('手机号码输入正确')
console.log('函数结束')
}
其实,这样的写法,很好理解, else if 表示
在 条件不成立(else) 的情况下, 还需要进一步的判断 (if)。
有的时候,情况更加复杂,还需要更多的判断,js中可以 使用更多的else if
。
比如,判断输入的手机号码是否有效,除了检查 长度、全数字字符, 还要检查是否以数字 1 开头、
可以这样写
function registerUser(phone){
if (phone.length !== 11)
console.log('输入错误!手机号码是11个字符')
else if (isNaN(phone)) // isNaN是内置函数, 用来判断 输入的是否非数字
console.log('输入错误!手机号码必须全是数字')
// 判断是否以数字1 开头
else if (! phone.startsWith('1')) // startswith 是字符串对象的方法,下一章会学到
console.log('输入错误!手机号码必须以数字1开头')
else
console.log('手机号码输入正确')
console.log('函数结束')
}
根据实际需求, else if 可以 无限量的
增加下去。
如果我们要求在输入检查条件全部通过后, 执行存储用户信息到数据库的操作,可以写在最后的else分支,如下
function registerUser(phone){
if (phone.length !== 11)
console.log('输入错误!手机号码是11个字符')
else if (isNaN(phone)) // isNaN是内置函数, 用来判断 输入的是否非数字
console.log('输入错误!手机号码必须全是数字')
// 判断是否以数字1 开头
else if (! phone.startsWith('1')) // startswith 是字符串对象的方法,下一章会学到
console.log('输入错误!手机号码必须以数字1开头')
else{
console.log('手机号码输入正确')
console.log('执行 存储用户信息到数据库 的操作...')
}
}
上面的函数是一个典型的例子:函数执行某个功能前,要做一些条件检查, 如果这些条件任何一个不满足, 后续的操作就不要做了。
这样的情况下,结合 return 语句,还有另外一种写法,如下
function registerUser(phone){
// 下面任何一个检查条件不通过,直接 return 返回
if (phone.length !== 11){
console.log('输入错误!手机号码是11个字符')
return
}
if (isNaN(phone)) {
console.log('输入错误!手机号码必须全是数字')
return
}
if (! phone.startsWith('1')) {
console.log('输入错误!手机号码必须以数字1开头')
return
}
// 前面的条件检查全部通过
console.log('手机号码输入正确')
console.log('执行 存储用户信息到数据库 的操作...')
}
这样写, 省略了很多的 else if、 else ,可读性更好。
我们再看一个例子。
我们假设 某个国家的 出租车 计费 有如下规则。
里程 | 收费 |
---|---|
<= 3公里 | 20 元/每公里 |
>3公里 | 15 元/每公里 |
我们要写一个函数,计算费用,可以这样写
function charge(miles){
var unit
if (miles <=3) {
console.log('20 元/每公里')
unit = 20
}
else {
console.log('15 元/每公里')
unit = 15
}
return miles*unit
}
var miles = prompt("输入请公里数", "6")
charge(parseInt(miles))
可以这样分别调用该函数,看看什么结果
charge(3) // 执行 if 下面缩进的代码
charge(5) // 执行 else 下面缩进的代码
如果有更多的判断逻辑,就需要使用 else if 了
比如,计费规则更多一些
里程 | 收费 |
---|---|
<= 3公里 | 20 元/每公里 |
>3公里 且 <= 5公里 | 15 元/每公里 |
>5公里 且 <= 8公里 | 12 元/每公里 |
>8公里 | 10 元/每公里 |
就可以这样写
function charge(miles){
var unit
if (miles <=3){
console.log('20 元/每公里')
unit = 20
}
else if (miles <=5) { // 当不满足 miles <=3 的时候
console.log('15 元/每公里')
unit = 15
}
else if (miles <=8) { // 当不满足 miles <=3 也不满足miles <=5 的时候
console.log('12 元/每公里')
unit = 12
}
else{ // 当不满足 miles <=3 也不满足 miles <=5 也不满足 miles <=8 的时候
console.log('10 元/每公里')
unit = 10
}
return miles*unit
}
解释器执行上面的条件语句的时候,是顺序进行判断的,
当第1个条件 miles <=3
成立的话,就执行对应下面的缩进代码,
如果不成立,继续看后面的 else if 的条件 miles <=5
。 如果成立,就执行对应下面的缩进代码
如果不成立,继续看后面的 else if 的条件 miles <=8
。 如果成立,就执行对应下面的缩进代码
如果不成立,就执行最后的else 对应下面的缩进代码,
注意 else if 和 else 的区别是 :
else if 后面会有一个 条件表达式, 而 else 没有
当然 if 和 else if 后面 的条件表达式可以是一个复合表达式,比如
计费规则 和乘车时间 也有关系
里程 | 时间 | 收费 |
---|---|---|
<= 3公里 | <= 1小时 | 20 元/每公里 |
>3公里 | <= 1小时 | 15 元/每公里 |
function charge(miles, duration){
if (miles <= 3 && duration <= 1) {
console.log('20 元/每公里')
return miles*20
}
else if (miles > 3 && duration <= 1) {
console.log('15 元/每公里')
return miles*15
}
}
charge(3, 0.1)
条件判断嵌套
有的时候,条件判断成立或者不成立, 后面要做什么, 还需要再次分情况处理。
这时,往往需要 后续的代码中 再次进行 条件判断
比如,如果上面的计费规则更多一些
里程 | 时间 | 收费 |
---|---|---|
<= 3公里 | <= 1小时 | 20 元/每公里 |
> 1小时 | 22 元/每公里 | |
>3公里 | <= 1小时 | 15 元/每公里 |
> 1小时 | 18 元/每公里 |
就可以像下面这样,在条件判断后面缩进的代码里面继续使用条件判断
function charge(miles, duration){
if (miles <= 3) {
if (duration <= 1){
console.log('20 元/每公里')
return miles*20
}
else{
console.log('22 元/每公里')
return miles*22
}
}
else if (miles > 3) {
if (duration <= 1){
console.log('15 元/每公里')
return miles*15
}
else{
console.log('18 元/每公里')
return miles*18
}
}
}
要注意的是 里面的条件判断 成立后的代码还要 加花括号。
if 语句后面也可以没有else 或者 else if
比如
function charge(miles, isKing){
// 如果乘客是国王,就可以免费
if (isKing)
return 0
if (miles <=3) {
console.log('20 元/每公里')
return miles*20
}
else{
console.log('15 元/每公里')
return miles*15
}
}
条件赋值
我们在写赋值语句时,有时需要根据不同的情况给变量赋不同的值,比如
if (miles > 3)
var fee = miles*15
else
var fee = miles*20
可以简写为如下形式
var fee = miles > 3 ? miles*15 : miles*20
如果条件评估为真,则冒号左侧的值将分配给变量。 如果条件评估为假,则冒号右侧的条件将分配给变量。