首页 > 代码库 > 【从无到有】JavaScript新手教程——2.分支结构和循环

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

介绍完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 />");
}

   效果图:

  技术分享

 

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

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