JavaScript 语法：流程控制语句

作者:WangMin
格言:努力做好自己喜欢的每一件事

JavaScript流程控制语句的三种基本结构：顺序结构，选择结构，循环结构

顺序结构

从上到下执行的代码就是顺序结构，程序默认就是由上到下顺序执行的，也就是按照代码的先后顺序，依次执行。

条件选择结构控制语句

条件选择控制语句用于基于不同的条件来执行不同的动作，通常在写代码时，对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句，条件判断语句包括两类：

• if判断语句；
• switch多分支语句

1、if语句

1.1 if 语句：只有当指定条件为true时，使用该语句来执行代码。语法如下：

if(<表达式>){
   
   
      执行语句;
}

其中表达式必须有，执行时计算出一个Boolean值，若为真则执行整段语句，否则不执行；执行语句可选，可由一条或多条语句组成。实例如下：

var a=23,b=12;
if(a>b){
   
   
    console.log("a比b大哦");
}

if 语句还有一种写法，如下：

if(<表达式>) 
   执行语句;

这里的表达式和语句必须有，且语句只有一条，如果为空则会影响下面程序的执行。所以上面的例子还可以写成如下格式，结果一致：

var a=23,b=12;
if(a>b)console.log("a比b大哦");

1.2 if...else语句：当条件为true时执行代码，当条件为 false 时执行其他代码，语法如下：

if(<表达式>){
   
   
       执行语句;
}
else{
   
   
       执行语句;
}

其中表达式必须，要求是合法的JavaScript表达式或常量；执行语句可选，可以为一条语句或多条语句。实例如下：

var a=10,b=12;
if(a>b){
   
   
    console.log("a比b大哦");
}else{
   
   
    console.log("a比b小哦");
}

if...else语句还有一种简写方式，如下：

条件表达式 ?语句1：语句2；

所以上面的例子可以写成以下格式，结果一致：

var a=10,b=12;
a>b?console.log("a比b大哦"):console.log("a比b小哦");

1.3 if...else if....else 语句：使用该语句来选择多个代码块之一来执行。语法如下：

if(<表达式1>){
   
   
         执行语句;
}
else if(<表达式2>){
   
   
         执行语句;
}
else{
   
   
       执行语句;
}

表达式必须，执行语句可选，可以是一条或多条语句，此时组成多路选择结构，程序执行时按顺序执行各个if块，当某个条件满足就会执行相应语句块，这时其他代码块就会被忽略。实例如下：

var a=6;
if(a<=10){
   
   
    console.log("Good morning");
}else if(a<=20){
   
   
    console.log("Good day");
}else{
   
   
    console.log("Good evening");
}

2、switch语句
使用switch语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作。语法如下：

switch(<表达式>){
   
   
         case <标识1>:执行语句;
         break;
         case <标识2>:执行语句;
         break;
          ...
         [default:] 执行语句;
}

表达式：必须是合法的JavaScript语句；标识：必须，当表达式的值与标识的值相等时作则执行其后语句；执行语句：可选，由一条或多条语句组成。如果某个条件匹配成功，则执行相关的语句，但注意必须在每个语句后面加上一行代码：break，这样当某个条件满足时执行相关的语句后，才不会执行其他的代码块。实例如下：

var a=4;
switch(a){
   
   
case 0:console.log("今天是星期天");break;
case 1:console.log("今天是星期一");break;
case 2:console.log("今天是星期二");break;
case 3:console.log("今天是星期三");break;
case 4:console.log("今天是星期四");break;
case 5:console.log("今天是星期五");break;
case 6:console.log("今天是星期六");break;
default:console.log("今天不知道是星期几");
}//今天是星期四

循环结构控制语句

循环结构表示程序反复执行某个或某些操作，直到某条件为假(或为真)时才可终止循环。在循环结构中最主要的是：什么情况下执行循环? 哪些操作需要循环执行?
1、for语句：循环代码块一定的次数，for语句的一般形式为：

for（1单次表达式；2条件表达式；3末尾循环体）{
   
   
    4中间循环体;
}

单次表达式：一般为赋值表达式，给控制变量赋初值；
条件表达式：关系表达式或逻辑表达式，循环控制条件；
末尾循环体：一般为赋值表达式，给控制变量增量或减量(步长)。

for循环执行过程：会先判断条件表达式是否成立，如果条件成立则执行中间循环体，执行完中间循环体后接着执行末尾循环体 。在执行完末尾循环体后对条件表达式再次进行判断，若条件还成立，则继续重复中间循环体，当条件不成立时则跳出for循环。

案例1：求1到100之间的和

var sum=0;
for(var i=1;i<=100;i++){
   
   
   sum+=i;
}
console.log(sum);//5050

以上案例执行顺序：

1. 执行for循环体里的第一个参数，其变量名为i，并初始化为0。
2. 执行完第一个参数里的代码后，会执行第二个参数，判断 i 是否小于等于100。
3. 当第二个表达式为True时，会去执行循环体里的代码，也就是当 i 小于等于100的时候。
4. 执行完循环体里的代码后，就会去执行for循环的第三个参数也就是i++。
5. 当以上流程执行完成之后，进入第二次执行循环时就不会执行for循环第一个参数了。
6. 而是直接去执行第二个参数里的判断表达式。
7. 然后在去执行循环体里的代码。
8. 然后在执行for循环的第三个参数。
9. 最后直到参数二，“i>100”的时候循环才会结束。

for循环中执行的中间循环体可以为一个语句，也可以为多个语句，当中间循环体只有一个语句时，其大括号{}可以省略。 for语句的注意事项：

• for循环中的变量可以是一个也可以是多个，不要局限于一个变量处理到底，那样有时会很单调，当程序适合把多个变量组成循环时，用多个for语句来表示就是有些浪费了。

• for循环中语句可以为语句体， 语句体外加大括号"{}"将参加循环的语句括起来。 for循环的三个表达式都是逗号表达式，这样来说，其实每个分号表达式可以由几个逗号表达式构成，中间用"，”隔开，最后以“；”结束。

• for循环中的"单次表达式"、"条件表达式"和"循环体语句"都是选择项， 即可以缺省成只剩下“；”的空语句， "；"不能缺省的原因是编译格式，缺省了编译器不认识而会报错。 参考资料来源：百度百科——for循环。

2、 while语句：在执行循环体之前 测试一个条件，如果条件成立就进入循环体，否则跳到循环体后的第一条语句，语法如下：

var 赋初值
while(控制条件){
   
   
      循环语句;
      步长;
}

控制条件:必选项，以其返回值作为进入循环体的条件，返回布尔型处理，为真时进入循环体。

案例：通过while循环求1到100之间的和

var i =1;
var sum = 0;
while(i<=100){
   
   
  sum += i;
  i++;
}
console.log(sum);//5050

以上案例执行顺序：

1. 执行while循环体外的初始变量 i，并初始化为0。
2. 执行完初始变量 i，会执行while循环体内的控制条件，判断 i 是否小于等于100。
3. 当while循环体内的控制条件为True时，会去执行循环体里的代码，也就是当 i 小于等于100的时候。
4. 执行完循环的代码后，就会去执行while循环体中的步长也就是i++。
5. 当以上流程执行完成之后，进入第二次执行循环时就不会执行while循环体外的初始变量 i了。
6. 而是直接去执行while循环体内的控制条件。
7. 然后在去执行循环体里的代码。
8. 然后在执行while循环体中的步长。
9. 最后直到while循环体内的控制条件 "i>100" 的时候循环才会结束。

3、do-while语句：先进入循环，然后判断，为真就继续循环。语法如下：

do{
   
   
  循环体;
  步长;
}while（判断条件）先执行后判断 至少执行一次循环体

案例：通过do while循环求1到100之间的和

var i =1;
var sum = 0;
do{
   
   
    sum += i;
    i++;
}while(i<=100)
console.log(sum);//5050

4、for-in语句：通常用于遍历某个集合的每个元素，比如数组有很多元素，其元素索引构成了一个集合，使用for-in语句可以遍历这个集合，然后取得所有元素数据。

案例：通过for-in语句求数组arr所有元素的值的和

var arr=[1,2,3,4,5,6];
var sum=0;
for(var key in arr){
   
   
    sum+=arr[key];
}
console.log(sum);

其中 key（可以用任何变量） 表示的是数组的索引值，但是当你要获取到数组中的某个值时，需要使用索引值（下标）来获取，即arr[key]。

当这种循环方式用于对象数组时，情况如下：

var  obj = {
   
   
    a:1,
    b:'abc',
    c:true
}
for (let x in obj){
   
   
    console.log(x); //属性名
    console.log(object[x]); //属性名
}

这种循环方式它可以获取到对象数组中的索引值，可以通过索引值获取到对象数组中的元素值。

5、for…of语句：用法跟for-in语句差不多，但有细微差别。

案例：通过for-of语句求数组arr所有元素的值的和

var arr=[1,2,3,4,5,6];
var sum=0;
for(var key of arr){
   
   
    sum+=key;
}
console.log(sum);

其中 key（可以用任何变量） 直接表示的是数组的元素值。
当这种循环方式用于对象数组时，情况如下：

var  obj = {
   
   
    a:1,
    b:'abc',
    c:true
}
for (let x of obj){
   
   
    console.log(x); //元素值

}

这种循环方式它 不能直接表示出是数组的元素值，反而会报出以上错误。所以它不适用于循环对象数组。

6、退出循环break

在while、for、do...while、while循环中使用break语句退出当前循环，直接执行后面的代码。语句结构：

for(初始条件;判断条件;循环后条件值更新){
   
   
  if(特殊情况){
   
   
    break;
  }
  循环代码
}

案例通过for循环求1到10之间的和

var sum=0;
for(var i=1;i<=10;i++){
   
   
    if(i==5){
   
   
        break;    
    }
    sum+=i;
}
console.log(sum);//10

以上案例当我们在循环语句中添加了一个判断并让他在 i=5 是跳出这个循环，也就是说这里我们只获取到 1- 4之间数字的总和，后面的循环就没有执行了。

7、继续循环continue

当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会受到影响。语句结构：

for(初始条件;判断条件;循环后条件值更新){
   
   
  if(特殊情况){
   
   
    continue;
  }
  循环代码
}

案例通过for循环求1到10之间的和

var sum=0;
for(var i=1;i<=10;i++){
   
   
    if(i==5){
   
   
        continue;    
    }
    sum+=i;
}
console.log(sum);//50

从上面案例的结果来看，案例中，当 i=5没有执行循环语句， 后面循环没有受到影响，依次执行了循环语句，得到当前的这个结果就没有加上i=5时的结果。

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! :smile: 后续继续更新!!