三分钟学会JavaScript基础之"条件判断"

JavaScript使用if () { ... } else { ... }来进行条件判断，这也是我们写代码经常用的一个方法。本文将带你快速入门条件判断。

let age = 20;
if(age >= 18){   // 如果age >= 18为true，则执行if语句块
   console.log('adult');
}else{
   console.log('teenager');
}

else语句是可选的，如果只包含一条语句，那么可以省略{}

let age = 20; 
if(age >= 18)
   console.log('adult') ;
else
   console.log('teenager') ;

而这样可能带来风险，当我们后面想要添加语句却忘了加{}时，就改变了if...else...的语义

let age = 20;
if (age >= 18)
    console.log('adult');
else
    console.log('age < 18'); // 添加一行日志
    console.log('teenager'); // <- 这行语句已经不在else的控制范围了

此时代码只执行console.log('age < 18');原有的console.log('teenager');已经不属于if...else...的控制范围了，它每次都会执行。

反观，有{}语句就不会出错

let age = 20;
if (age >= 18) {
    console.log('adult');
} else {
    console.log('age < 18');
    console.log('teenager');
}

此时就会正确运行

所以建议无论什么情况，都请加上{}

多条件判断

如果有多个类别的话，我们可以用多个if...else...的组合嵌套。 如果还要更细致地判断条件，可以使用多个if...else...的组合：

let age = 3;
if (age >= 18) {
    console.log('adult');
} else if (age >= 6) {
    console.log('teenager');
} else {
    console.log('kid');
}

上述多个if...else...的组合实际上相当于两层if...else...：

let age = 3;
if (age >= 18) {
    console.log('adult');
} else {
    if (age >= 6) {
        console.log('teenager');
    } else {
        console.log('kid');
    }
}

但是我们通常把else if连写在一起，来增加可读性。这里的else略掉了{}是没有问题的，因为它只包含一个if语句。注意最后一个单独的else不要略掉{}。

注意！！！，if...else...语句的执行特点是二选一，在多个if...else...语句中，如果某个条件成立，则后续就不再继续判断了。 解释下面代码为什么输出显示teenager

'use strict';
let age = 20;

if (age >= 6) {
    console.log('teenager');
} else if (age >= 18) {
    console.log('adult');
} else {
    console.log('kid');
}

因为第一个条件已经满足，所以后续代码不再判断了，所以输出teenager

'use strict';
let age = 20;

if (age >= 18) {
    console.log('adult');
} else if (age >= 6) {
    console.log('teenager');
} else {
    console.log('kid');
}

我们修改成这样，既能正确输出adult

由于age的值为20，它实际上同时满足条件age >= 6和age >= 18，这说明条件判断的顺序非常重要。

结语

这就是条件判断的基础用法。