从无到有JavaScript新手教程——2.分支结构和循环

Posted 2020-09-12

介绍完JS的简介和向量以及运算符，大家对JS也有了初步的了解和认识，今天带大家来看一下JS中常用的分支结构以及循环结构是怎么使用的

 

【JS中的分支结构】

一、【if-else结构】

　　1、结构写法：

if(判断条件){
        //条件为true时执行
}else{
        //条件为false时执行
}    

　　2、if()中的表达式，运算之后的结果应为：
　　　　①Boolean: true 真 false 假
　　　　②String： 非空字符串为真，空字符串为假
　　　　③Number：0为假，非0均为真
　　　　④Null/NaN/Undefined： 全为假
　　　　⑤object：全为真
　　3、else结构可以根据具体情况省略

二、【多重if结构（阶梯if）】

　　1、结构写法：

if(条件1){
        //条件1成立
}else if(条件2){
        //条件1不成立&&条件2成立
        //else if 部分可以又N多个
}else{
        //条件1不成立&&条件2不成立
}            

　　2、多重if结构中，各个判断条件是互斥的！只能选择其中一条路。
　　3、if/else的{}可以省略，一般不提倡。
　　　　如果省略{} 则if/else结构包含的代码仅为其后最近的一行(分号结束)；
　　　　如果省略{} 则else结构永远属于其前方最近一个if结构。

 

三、【嵌套if结构】

　　1、结构写法：

if (条件1){
        //条件1成立
    if (条件2){
            //条件1成立 条件2成立
    }else{
            //条件1成立 条件2不成立
    }
}else{
        //条件1不成立
}

　　2、if结构可以多重嵌套，但是原则上不超过三层

四、【switch-case结构】

　　1、结构写法：

switch(表达式){

    case 常量表达式1：
    语句1；
    break；

    case 常量表达式2：
    语句2；
    break；
    ……

    default：
    语句N；
    break；
}

　　2、注意事项：
　　　　①switch()中的表达式，以及每个case后面的表达式，可以为任何JS支持的数据类型；(对象和数组不行)
　　　　②case后面的所有常量表达式，必须各不相同，否则只会执行第一个；
　　　　③case后的表达常量可以是任何数据类型，同一个switch结构的不同case可以是多种不同的数据类型；
　　　　④switch结构在进行判断的时候，采用的是全等判断===；
　　　　⑤break的作用：执行完case代码后跳出当前switch结构；
　　　　　　>>>缺少break的后果：从正确的case项开始，依次执行所有的case和default 原因：⑥
　　　　⑥switch结构在判断时，只会判断一次正确答案，当遇到正确的case项后，将会不再判断后续项目，依次往下执行。
　　　　⑦switch结构的执行速率要快于多重if结构。在多路分支时，可优先考虑switch结构。

　　

　　举个例子：

 

var num4 = prompt(parseInt("输入一个数"));
switch (num4+5){
	case 9:
	document.write("这是9的case块")
	break;
        case 10:
	document.write("这是10的case块")
	break;
	default:
	document.write("这是default的case块")
	break;
}    

 

　　输入一个数字，如果输入的是4，则在屏幕上打印出"这是9的case块"

　　　　　　　　　如果输入的是5，则在屏幕上打印出"这是10的case块"

　　　　　　　　　如果是其他的数字，则在屏幕上打印出"这是default的case块"

 

【JS中的循环结构】

一、【循环结构的步骤】
　　①声明循环变量
　　②判断循环条件
　　③执行循环体(while{}中所有代码)操作
　　④更新循环变量
　　然后循环执行② ③ ④

二、【JS中循环条件支持的数据类型】：所有数据类型（同if）
　　①Boolean: true 真 false 假
　　②String： 非空字符串为真，空字符串为假
　　③Number：0为假，非0均为真
　　④Null/NaN/Undefined： 全为假
　　⑤object：全为真

三、【while循环】

var n = 1;    	//声明循环变量
while (n<=5){	    //判断循环条件
        document.write("helloworlds<br />");	    //执行循环体(while{}中所有代码)操作
	n++;	    //更新循环变量
}    

　　特点：先判断，再执行；
　　*【do-while循环】

do{
	语句
 }while(); 

　　特点：先执行，再判断；即便初始条件不成立，do-while循环也至少执行一次

四、【for循环】

for(var n=1,j=5;n<=5;n++,j--){
	document.write("helloFor<br />")
}

　　1、for循环三个表达式，分别为：①定义循环变量 ②判断循环条件 ③更新循环变量
　　　　三个表达式之间，用;分隔；
　　　　for循环三个表达式均可以省略，但两个”;“缺一不可
　　2、for循环特点：先判断，再执行；
　　3、for循环三个表达式均可以有多部分组成，之间用逗号分隔；但是第二部分判断条件需要用&&连接，最终结果需要为真/假

 

五、【循环控制语句】
　　1、break：终止本层循环，继续执行循环后面的语句；
　　　　>>>当循环有多层时，break只会跳过一层循环。
　　2、continue：跳过本次循环，继续执行下一次循环；
　　　　>>>对于for循环，continue执行后，继续执行循环变量更新语句n++
　　　　>>>对于while、do-while，continue执行后，继续执行循环条件判断；所以使用这两个循环时，必须注意continue一定要在n++之后使用。

for(var n=1;n<=20;n++){
	if(n%3==0){
		//break;
		continue;
	}
        document.write(n+"/");
}    

　　如果是break，则输出的结果是

　　

　　如果是continue，则输出的结果是

　　

 

六、【循环嵌套】
　　外层循环转一次，内层循环转一圈

 

for(var a=1;a<=5;a++){
　　for(var b=1;b<=5;b++){
　　　　document.write("*");
　　}
　　document.write("<br />");
}

 　　效果图：

　　

 

好啦 ，今天就到这里，希望对你有些帮助。