流程控制语句的简单介绍

一、程序结构

​ JavaScript中的流程控制语句和其他的程序设计语言基本是一样的，主要分为：

• 顺序结构：即按顺序执行代码；
• 条件选择结构（分支语句）：包括if-else以及switch；
• 循环结构：包括for循环，while，do-while，for-in等；
• 其他语句：break和continue。

1、选择(分支)结构

条件选择结构又叫分支语句，通过条件判断，有选择性的执行某段代码。

（1） if语句：即如果，就是假设一个条件，如果条件成立，就做某一个操作，即如果怎么样就会怎么样。

语法：if（条件）{条件成立执行}

eg:
var age=8;
if(age>7){console.log("上学")}

（2） if…else

• if-else是在if的基建上加了一个条件不成立时要做的操作，即条件成立做某个操作，条件不成立做某个操作。
  语法：if（条件）{条件成立做的事情}else{条件不成立要做的事情}

  eg:如果成绩大于60就是及格，反之就是不及格
  var s=70;
  if(s>60){
  			console.log("及格");
  		}else{
  			console.log('不及格');
  		}
  

（3） ​if…else嵌套

• if-else能用于一个条件成立和不成立，但是如果问题存在多个假设就不能够满足要求，例如成绩的分段及格、良好、优秀等，都不能用if-else，这个时候就需要用到if-else嵌套实现。

  语法：
  if(判断条件)
  		{条件成立时执行的代码}
  else if(判断条件)
  		{条件成立时执行的代码}
  else
  		{以上条件都不成立执行的代码}
  
  

（4）​switch:一般用于假设的个数有限，并且是同等级的关系，相对于if来说，结构更清晰。使用该语句来选择多个代码块之一来执行。

•  switch与case的比较是===（全等比较）
  

//switch(选择项)根据这个选择项（确定的数据）选择要执行的代码
var s=“+”
switch(s){
	case"+":alert(10+10);break;
	case"-":alert(10-10);break;
  	case"*":alert(10*10);break;
  	default:alert("都没有匹配到")；
}

2 循环结构

循环的作用是让一段特定的代码执行指定的次数

（1）for

语法:for(表达式1;条件表达式2;表达式3){
				条件成立执行的代码块
			}
   for(初始化循环变量;判断条件(循环结束的条件);更新循环变量){
					循环体
				}

执行步骤：
1.初始化循环变量i=1；
2.判断条件是否成立i<10;
3.更新循环变量i=i+1;
4.回到第二部开始执行。
循环三要素：初始化循环变量，跳出循环的条件，更新循环变量，再循环中必须结束的循环打的条件，要更新循环变量，否则会成为死循环。

（2）for…in

对象没有索引也没有length属性，所以经常使用for…in来遍历对象

//用法：
for(var i in 对象){		//i 是要遍历的对象的属性
	循环体；
}

注意：若对象的属性是一个变量，则不能使用 对象.属性名的形式取值，应该使用 对象[属性名]

（3）while和do…while

//语法：
while(条件){
	循环体;
}

//
do{
	循环体；
}while(条件);

while循环时先进行条件判断，在执行循环体

do…while是先执行一次循环体，再进行判断

        // var i=0;
        // do{
        //     console.log('hello world');
        //     i++;
        // }while(i>3);

        var i=0;
        do{
            console.log('你好');
            i++;
        }while(i<3);


        var j=0;
        while(j<3){
            console.log('hello world');
            j++;
        }

二、分支结构

1. if 语句

//语法：
if(条件){
	代码块;
}

//执行规则：若条件成立，则执行代码块

示例：

        //周五考试，60分以上及格
        var score = prompt("请输入分数：");//输入框   返回值： 点击确定按钮时，返回  输入框的内容，，点击取消按钮时，返回null
        // console.log(score);
        if (score > 60) {
            alert("及格");
        }

2.if…else语法

//语法
if(条件){
	代码块;
}else{
	代码块;
}

//执行规则：若条件成立，则执行对应的代码块；否则，执行else对应的代码块

示例：

        //根据用户年龄，判断用户是否可以进入网吧 
        var age = prompt("请输入用户的年龄：");
        if (age >= 18) {
            alert("尽情玩耍吧");
        } else {
            alert('回家写作业吧');
        }

若if或者else语法后面的代码只要一句，则可以省略{}

3.多分支语句

//语法
if(条件1){
	代码块1;
}else if(条件2){
	代码块2;
}
...
else if(条件n){
	代码块n;
}else{
	代码块m;
}

//执行规则：条件1成立，则执行对应的代码块1,

示例：

        // 周五考试     60分以下的补考  90分以上的 优秀  其它  及格
        var score = prompt('请输入分数：');
        // if (score < 60) {
        //     alert("补考")
        // } else if (score >= 60 && score <= 90) {
        //     alert("及格")
        // } else if (score > 90) {
        //     alert("优秀，有奖...");
        // } else {
        //     alert('请重新输入');
        // }

        if (score > 90) {
            alert("优秀，，奖励");
        } else if (score > 60) {
            alert("及格");
        } else if (score > 0) {
            alert("补考");
        } else {
            alert('非法输入');
        }

4.if语句的嵌套

在分支语句中可以嵌套其它的分支语句

if(条件1){
    语句1
	if(条件2){
        语句2
    }
    else{最终语句}
}

if(条件1){
        执行语句1
}else{
	if(语句2){
        执行语句2
    }
}

示例：

        //周五考试   60分以下补考，其它及格
        var score = prompt("请输入考试分数：");
        if (score != null) {
            if (score >= 60) {
                alert('及格');
            } else {
                alert("补考");
            }
        } else {
            alert("点击了取消按钮");
        }

        //点击  取消   score   null

5.switch结构

//语法：
switch(表达式){
	case 值1:
		代码块;
	break;
	case 值2:
		代码块;
	break;
	...
	case 值n:
		代码块;
	break;
	default:
		代码块;
	break;
}

//执行规则：switch后的表达式与case后面的值相等时，即执行对应的代码块；若都不相等，则执行default对应的代码

示例：

        switch (slt.value) {        //   slt.value=== "+"
            case "+":
                console.log(v1 + v2);
                break;
            case "-":
                console.log(v1 - v2);
                break;
            case "*":
                console.log(v1 * v2);
                break;
            case "/":
                console.log(v1 / v2);
                break;
            default:
                console.log(v1 + v2);
                break;
        }

注意：switch.case的比较是一个全等的比较 (===)

注意：break的问题，若省略，会出现穿透问题。

三、DOM中查找节点对象的方法

1.根据id找元素

document.getElementById(id);//唯一的节点对象      不存在 null

2.根据标签名找元素

//在文档中，根据标签名找元素
document.getELementsByTagName(tagName);
//在指定的节点下找元素
node.getElementsByTagName(tagName);

该方法的返回值是一个集合(类数组/伪数组), 集合有：length属性，索引

可以通过索引来取出里面的值 ： 集合[索引]

3.根据class来找元素

//根据类名找元素
document.getElementsByClassName(cls);

返回值：集合，如果需要操作集合中的标签，使用的时候必须使用[下标]将具体的元素获取出来之后再使用。

四、循环结构

重复的执行一段代码

1.for循环

//语法
for(循环变量初始化;循环条件判断;循环迭代){
	循环体;
}
/*
	执行规则：for循环的执行可以分为如下几步:
	第一步：循环变量初始化					var i=0;
	第二步：循环条件的判断					i<5
		若判断结果为真，则执行第三步
		若判断结果为假，则结束循环
	第三步：执行循环体					 console.log(i)
	第四步：循环的迭代					 i++
	第五步：回到第二步
*/

        for (var i = 0; i < 5; i++) {
            console.log(i);
        }

2.循环嵌套

外层循环执行一次，内层循环执行一遍

/*
                *
                ***
                *****
                *******

                行号        *个数
                1           1
                2           3
                3           5
                4           7

                n           2*n-1
        */
        //控制行数
        for (var i = 1; i < 5; i++) {
            //打印一行*
            for (var j = 0; j < 2 * i - 1; j++) {
                document.write('*');
            }
            document.write("<br>");
        }

3.break和continue

break与continue的区别：

​ break结束循环

​ continue 结束本次循环，继续下一次循环

注意：break和continue都是只对所在循环生效(不能控制外层的循环)