判断语句

布尔类型

js中有一种数据类型称之为布尔(英文叫 boolean)。

布尔数据只有两种取值: truefalse

对应 , 或者说

很多事情只有两种可能,是 或者 否。

比如: 今天是星期天吗?

要么 是 ,要么 否。

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

如果条件评估为真,则冒号左侧的值将分配给变量。 如果条件评估为假,则冒号右侧的条件将分配给变量。

您需要高效学习,找工作? 点击咨询 报名实战班

点击查看学员就业情况