跳转至

判断语句

布尔类型

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

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

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

点击查看学员就业情况