在JavaScript中，选择结构指的是根据“条件判断”来决定执行哪一段代码。选择结构有3种：单向选择、双向选择以及多向选择。但无论是哪一种，JavaScript只会执行其中的一个分支。
在JavaScript中，选择结构共有两种方式：一种是if语句；另外一种是switch语句。这一节我们先来介绍if语句。对于if语句，主要包括以下要点。
- （1）单向选择：if…
- （2）双向选择：if…else…
- （3）多向选择：if…else if…else…
- （4）if语句的嵌套
一、单向选择：if…
语法：
if(条件)
{
……
}
说明：
这个“条件”一般是一个比较表达式。如果“条件”返回为true，则会执行大括号{}内部的程序；如果“条件”返回为false，则会直接跳过大括号{}内部的程序，然后按照顺序来执行后面的程序。
由大括号括起来的程序，我们又称为“语句块”。语句块常用于选择结构、循环结构以及函数中，JavaScript是把一个语句块看成是一个整体来执行。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var score = 100;
if (score > 60) {
alert("那你很棒棒噢~");
}
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
由于变量score的值为100，所以score>60返回true，因此会执行大括号{}内部的程序。
二、双向选择：if…else…
语法：
if(条件)
{
……
}
else
{
……
}
说明：
“if…else…”相对“if…”来说，仅仅是多了一个选择。当条件返回为true时，会执行if后面大括号{}中的程序；当条件返回为false时，会执行else后面大括号{}中的程序。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var score = 100;
if (score < 60) {
alert("补考！");
} else {
alert("通过！");
}
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
由于变量score的值为100，而score<60返回false，因此会执行else后面大括号{}中的程序。
对于双向选择，我们是可以使用三目运算符来代替的，像上面这个例子，如果用三目运算符来写，实现代码如下。
举例：“三目运算符”代替“双向选择”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var score = 100;
var result = (score < 60) ? "补考！" : "通过！";
alert(result);
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
三、多向选择：if…else if…else…
多向选择，就是在双向选择的基础上增加n个选择分支。
语法：
if(条件1)
{
//当条件1为true时执行的代码
}
else if(条件2)
{
//当条件2为true时执行的代码
}
else
{
//当条件1和条件2都为false时执行的代码
}
说明：
多向选择语法看似很复杂，其实也是非常简单的，它只是在双向选择基础上再增加一个或多个选择分支罢了。小伙伴们对比一下这两个的语法格式就知道了。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var time = 21;
if (time < 12)
{
document.write("早上好！"); //如果小时数小于12则输出“早上好！”
}
else if (time >=12 && time < 18)
{
document.write("下午好！"); //如果小时数大于等于12并且小于18，输出“下午好！”
}
else
{
document.write("晚上好！"); //如果上面两个条件都不符合，则输出“晚上好！”
}
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
对于多向选择，我们会从第1个if开始判断，如果第1个if条件不满足，则判断第2个if条件……直到满足为止。一旦满足，就会退出整个if结构。
四、if语句的嵌套
在JavaScript中，if语句是可以嵌套使用的。
语法：
if(条件1)
{
if(条件2)
{
当“条件1”和“条件2”都为true时执行的代码
}
else
{
当“条件1”为true、“条件2”为false时执行的代码
}
}
else
{
if(条件2)
{
当“条件1”为false、“条件2”为true时执行的代码
}
else
{
当“条件1”和“条件2”都为false时执行的代码
}
}
说明：
对于这种结构，我们不需要去傻乎乎地去记，只需要从外到内根据条件一个个去判断就可以了。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var gender = "女";
var height = 172;
if(gender=="男")
{
if(height>170)
{
document.write("高个子男生");
}
else
{
document.write("矮个子男生");
}
}
else
{
if (height > 170)
{
document.write("高个子女生");
}
else
{
document.write("矮个子女生");
}
}
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
在这个例子中，首先外层if语句的判断条件gender=="男"返回false，因此会执行else语句。然后我们可以看到else语句内部还有一个if语句，这个内层if语句的判断条件height>170返回true，所以最终输出内容为“高个子女生”。
实际上，if语句的嵌套也是很好理解的，说白了就是在if或else大括号内部再增加一层判断。对于if语句的嵌套，我们一层一层由外到内地判断就可以了。这个过程就像剥洋葱一样，非常简单。下面再来一个例子，让小伙伴消化一下。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var x = 4;
var y = 8;
if (x < 5)
{
if (y < 5)
{
document.write("x小于5，y小于5");
}
else
{
document.write("x小于5，y大于5");
}
}
else
{
if (y < 5)
{
document.write("x大于5，y小于5");
}
else
{
document.write("x大于5，y大于5");
}
}
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
