流程控制语句主要分为 :
- 顺序结构：即按顺序执行代码 ;
- 条件选择结构 ( 分支语句 )：包括 if-else 以及 switch;
- 循环结构：包括 for循环，while，do-while,for-in 等;
- 其他语句： break 和continue。
一、流程控制之分支语句
条件选择结构又叫分支语句，主要包括if-else、switch等，通过条件判断，有选择性的执行某段代码
1.1、if
if 即如果，就是假设一个条件，如果条件成立，就做某一个操作，即如果怎么样就会怎么样。
语法:if（条件）{ 条件成立执行 }
例1：如果年龄大于 7 岁，就上学
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<script>
var age = 8;
if (age > 7) {
console.log("上学"); }
//{}可以省略，省略了if就只能控制()后面的第一行语句。虽然可以省略，但是我们
//建议每次都加上，这样代码结构逻辑更清晰
if (age > 7) console.log("上学");// 控制台输出"上学"
alert(1);// 不管条件是否成立都会执行，因为这行代码不受if的控制
</script>
</body>
</html>
1.2、if-else
if-else是在if的基础上加了一个条件不成立时要做的操作，即条件成立做某个操作，条件不成立做某个操作。
语法：if( 条件 )｛条件成立做的事情｝else｛条件不成立做的事情｝
例1：如果成绩大于60就是及格，反之不及格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<script>
var s = 70;
if (s > 60) {
//条件成立执行的代码
console.log('及格');
} else {
//条件不成立执行的代码
console.log('不及格');
}
</script>
</body>
</html>
1.3、if-else嵌套
if-else 能用于一个条件的成立和不成立，但是如果问题存在多个假设就不能够满足要求，如成绩大于 90 为优秀，80-90 为良好，70-80 为还行，60-70 为及格，60 以下为不及格，像这种情况就没有办法用if-else去实现，这个时候就需要用到 if-else 嵌套。
语法：if( 判断条件 ){ 条件成立执行的代码 }else if( 判断条件 ){ 条件成立执行的代码 }else{ 以上条件都不成立时执行 }
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<script>
// if-else 可以一直嵌套，只要有 else 前面肯定有 if
var a = 85;
if (a > 90) {
alert("优秀");
} else if (a > 80) {
alert("良好");
} else if (a > 70) {
alert("还行");
} else if (a > 60) {
alert("及格")
}
</script>
</body>
</html>
1.4、switch
switch一般用于假设的个数有限，并且是同等级的关系，相对于if来说，结构更清晰。使用该语句来选择多个代码块之一来执行。
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<script>
// switch（选择项）根据这个选择项（确定的数据）选择要执行的代码
var s = "+";
switch (s) {
case "+": alert(10 + 10); break;
case "-": alert(10 - 10); break;
case "*": alert(10 * 10); break;
default: alert("都没有匹配到");
}
</script>
</body>
</html>
上面代码中，将所有可能出现的情况都使用case列举出来，变量s会去匹配对应的case，匹配到了以后执行case后面的代码，如果所有的case都匹配不到则会执行default后面的代码。
上面代码中，所有的case后面都会加一个关键字break，break的作用是防止穿透，如果不加break，当匹配到其中一个case以后，从当前case开始，后面代码不会再进行匹配，直接执行。
如果需要用到判断执行某些代码，可以使用if-else和switch，一般情况下，如果条件明确，并且是一些简单字符，数字等，会选择使用switch。
以前写的：
JS基础 if和switch区别
