正文

01 流程控制

流程控制即代码的执行过程，有三种方式：

1.顺序结构:从上到下,从左到右执行的顺序,就叫做顺序结构

2.分支结构:if语句,if-else语句,if-else if-else if…语句,switch-case语句,三元表达式语句

3.循环结构:while循环,do-while循环,for循环,后期还有一个for-in循环

02 分支语句之if语句

语法：

 语法:
 if(表达式){  
   代码块  
 }

执行过程:先判断表达式的结果是true还是false,如果是true则执行代码块,如果是false,大括号中的代码是不执行的

例子:

1.如果18大于16,请输出8,如果一个数字大于另一个数字则输出大的数字

2.问:阿珊的年龄是否大于18岁,如果是成年的,则提示,可以打代码了

if(18>16){  
      console.log(18);  
    }
//例子1:
    var num1=10;  
    var num2=100;  
    if(num1>num2){  
      console.log(num1);  
    }
    console.log("我执行了");  
//例子2
var age = 19;  
if (age >= 18) {  
  console.log("可以打代码了");  
} else {  
  console.log("打什么代码，浪起来")  
}

03 分支语句之if-else语句

理解：if-else 语句：两个分支,只能执行一个分支

语法如下：

  if(表达式){ 
     // 代码1
  }else{ 
     // 代码2
  }

执行过程：如果表达式的结果是true则执行代码1,如果表达式的结果是false,则执行代码2

举一些例子:

//定义变量,并初始化
var age = 100; 
//判断
if (age >= 18) { 
  console.log("可以看电影了,嘎嘎...");
} else { 
  console.log("看什么看,回家写作业去"); 
}
 //提示用户请输入年龄----
var age=prompt("请您输入您的年龄");//弹框---并且有输入,输入的内容在age变量中 
console.log(age);//最终的结果是字符串的类型 
//案例1:
var age = parseInt(prompt("请您输入年龄")); 
//判断
if (age >= 18) { 
  console.log("可以看电影了,嘎嘎..."); 
} else { 
  console.log("看什么看,回家写作业去"); 
}
//练习1:找到两个数字中的最大值
var num1=10; 
var num2=20; 
if(num1>num2){ 
  console.log(num1); 
}else{ 
  console.log(num2); 
}
//练习2:判断这个数字是奇数还是偶数
var number=parseInt(prompt("请输入一个数字")); 
if(number%2==0){ 
  console.log("偶数"); 
}else{ 
  console.log("奇数"); 
}

04 分支语句之三元表达式

语法:

var 变量=表达式1?表达式2:表达式3;

执行过程:表达式1的结果是true还是false,如果是true则执行表达式2,然后把结果给变量

如果表达式1的结果是false,则执行表达式3,把结果给变量

//两个数字中的最大值
var x = 10;
var y = 20;
var result1 = x > y ? x : y;
console.log(result1);

//显示成年还是未成年
var age = 10;
var result2 = age >= 18 ? "成年了" : "未成年";
console.log(result2);

总结:大多数情况,使用if-else的语句都可以用三元表达式的方式来表示

05 分支语句之if-else if语句

if语句只有一个分支

if-else语句有两个分支,最终执行一个分支

if-else if-else if-else if-else if…else—多分支,最终也是执行一个

if-else if语句…

语法:

if(表达式1){
 代码1
}elseif(表达式2){
 代码2
}elseif(表达式3){
 代码3
}else{
 代码4
   }

else if—这种结构可以写多个,具体多少个看需求,

else–结构是可以不用写的,具体也是看需求

执行过程:

先判断表达式1的结果,

如果为true则执行代码1

如果为false,则判断表达式2

如果表达式2为true则执行代码2

如果为false,则判断表达式3

如果表达式3为true则执行代码3

否则执行代码4

例子: 成绩的结果是在90到100(包含)之间则显示A级

如果成绩是在80到90(包含)之间,则显示B级

如果成绩是在70到80(包含)之间,则显示C级

如果成绩是在60(包含)到70(包含)之间,则显示D级

如果成绩在0到60(不包含)之间,则显示E级

var score=parseInt(prompt("请你输入成绩"));//有bug 
    if(!isNaN(score)&&!(score>100&&score<0)){//如果为true，说明不是数字 
      console.log("输入不规范，请重新输入") 
      if(score>90&&score<100){ 
      console.log("a级") 
      }else if(score>80&&score<90){ 
      console.log("b级") 
      }else if(score>70&&score<80){ 
      console.log("c级") 
      }else if(score>=60&&score<70){ 
      console.log("d级"); 
      }else{ 
      console.log("e级") 
      }
    }
// 或者可以这么写
var score = Number(prompt("请您输入成绩"));//有bug 
if (!isNaN(score)) {//如果为true就说明 不是数字 
  if (score > 90 && score <= 100) { 
    console.log("A级"); 
  } else if (score > 80) { 
    console.log("B级"); 
  } else if (score > 70) { 
    console.log("C级"); 
  } else if (score >= 60) { 
    console.log("D级"); 
  } else { 
    console.log("E级"); 
  }
} else { 
  console.log("您输入有误"); 
}

练习:判断一个年份是不是闰年

定义变量存储一个年份

var year=Number(prompt("请您输入年份"))
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
 console.log("闰年");
}else{
 console.log("平年");
}

06 分支语句之switch-case语句

switch-case语句—分支语句—多分支语句

语法:

switch(表达式){
 case 值1:代码1;break;
 case 值2:代码2;break;
 case 值3:代码3;break;
 case 值4:代码4;break;
 ...多个case
 default:代码5;

注意问题:

default后面的break是可以省略的

default也可以省略

switch-case 语句中和case后面的值比较的时候使用的是严格的模式

break是可以省略

执行过程:

获取表达式的值,和值1比较,如果一样,则执行代码1,遇到break则跳出整个的语句,

后面代码不执行

如果表达式的值和值1不一样,则和值2比较,如果相同则执行代码2,

遇到break则跳出

否则和值3比较,相同则执行代码3,遇到break,跳出,

否则和值4比较,相同则执行代码4,遇到break则跳出,否则直接执行代码5

例子:获取一个人的成绩的级别,如果是A级则显示90到100直接的分数

如果是B级则显示80到90分

如果是C级则显示70到80之间分数

如果是D级则显示60到70分之间

否则显示0到59之间

var jiBie=prompt("请输入级别");
switch(jiBie){
    case"a":console.log("90-100");break;
    case"b":console.log("80-90");break;
    case"c":console.log("70-80");break;
    case"d":console.log("60-70");break;
    default:console.log("0-59");//break;(可以省略)
}


varjiBie = "E";
switch(jiBie) {
 case "A":
   console.log("90到100之间");
   break;
 case "B":
   console.log("80到90之间");
   break;
 case "C":
   console.log("70到80之间");
   break;
 case "D":
   console.log("60到70之间");
   break;
 default :
   console.log("0到59之间");
 }

根据月份显示对应的天数

var  mouth=parseInt(prompt("请输入月份"));
   switch(mouth){
       case 1:
       case 3:
       case 5:
       case 7:
       case 8:
       case 10:
       case 12:console.log("31");break;

       case 2:console.log("28");break;

       case 4:
       case 6:
       case 9:
       case 11:console.log("30");break;
   }
// 1,3,5,7,8,10,12 —31天
// 2----28天
// 4,6,9,11----30
   var month=parseInt(prompt("请输入月份"));
   switch (month){
     case 1:console.log("31天");break;
     case 2:console.log("28天");break;
     case 3:console.log("31天");break;
     case 4:console.log("30天");break;
     case 5:console.log("31天");break;
     case 6:console.log("30天");break;
     case 7:console.log("31天");break;
     case 8:console.log("31天");break;
     case 9:console.log("30天");break;
     case 10:console.log("31天");break;
     case 11:console.log("30天");break;
     case 12:console.log("31天");break;

   }
   // 练习:根据数字显示对应的星期
var num = parseInt(prompt("请输入一个星期的数字"));
switch (num) {
    case 1: console.log("day1"); break;
    case 2: console.log("day2"); break;
    case 3: console.log("day3"); break;
    case 4: console.log("day4"); break;
    case 5: console.log("day5"); break;
    case 6: console.log("day6"); break;
    case 7: console.log("day7"); break;
    default: console.log("输入有误");
}

07 总结分支语句

分支语句:

if语句:一个分支

if-else语句:两个分支,最终只执行一个分支

if-else if-else if…语句: 多个分支,也是只会执行一个

switch-case语句:多分支语句,最终也会一个(必须要有break)

三元表达式:和if-else语句是一样的

什么时候使用if-else if…: 一般是对范围的判断

什么时候使用switch-case语句:一般是对具体的值的判断

如果有多个分支,是针对范围的判断一般选择if-else if的语句

如果有多个分支,是针对具体的值判断,一般选择用switch-case语句

08 循环语句之while循环

循环:一件事不停的或者是重复的做

循环要有结束的条件,循环还应该有计数器(记录循环的次数的

while循环

while循环语法:

计数器
var 变量=0;
while(循环的条件){
  循环体;
  计数器++;
}

执行过程:

先判断条件是否成立,(条件的结果是true还是false),如果是false,

那么循环的代码(while的大括号中的代码都不执行),如果是true,

那么先执行循环体,然后执行计数器,然后,直接去—>循环的条件,

再次判断是否成立,成立则继续执行循环体,否则跳出循环,执行完循环体之后,

计数器加1,然后再去循环的条件,判断,成立则循环,否则跳出循环

练习:

// 计算1-100之间所有数字的和
var sum=0;
var i=0;
while(i<=100){
//sum=sum+i;
sum+=i;
i++
}
console.log("和为："+sum)

var sum=0;
while(i<10){
 console.log("和为："+sum)
 sum+=i;
}


var sum=0;//存储最终的和
var i=1;//计数器
while(i<=100){
 //sum=sum+i;//不停的计算数字的和
 sum+=i;
 i++;
}
console.log("和为:"+sum); 


 var sum=0;//存储最终的和
 var i=0;//计数器
 while(i<=5){
   //sum=sum+i;//不停的计算数字的和
   sum+=i;
   i++;
 }
 console.log("和为:"+sum);

 // 求6的阶乘:
 var ji = 1;//存储最终的阶乘的结果
 var i = 1;//开始的数字
 while (i <= 6) {
     ji *= i;
     i++;
 }
 console.log(ji)
  var ji = 1;//存储最终的阶乘的结果
  var i = 1;//开始的数字
  while (i <= 6) {
    ji *= i;
    i++;
  }

  console.log(ji);

求1-100之间所有的偶数的和
var i=1;//计数器
var sum=0;//存储所有数字的和
//判断这个数字是不是奇数,如果是奇数则相加,把结果存放在sum变量中
while(i<=100){
    if(i%2!=0){
    sum+=i;
    }
    i++;//为了不变成死循环
}
console.log(sum)

求1-100之间所有的奇数的和
var i = 1;//计数器
var sum = 0;//存储和的
while (i <= 100) {
  if (i % 2 != 0) {
    sum += i;
  }
  i++;
}
console.log(sum);
// 请输出1-100之间所有能够被7整除的数字
 var i = 0;
     while (i <= 100) {
         if (i % 7 == 0) {
             console.log(i);
         }
         i++;
     }

     var i=1;
     while(i<=100){
       //判断这个数字是否能够被7整除
       if(i%7==0){
         console.log(i);
       }
       i++;
     }

//求帐号和密码是否一致,登录的效果实现
//提示用户输入帐号
//提示用户输入密码
//如果帐号或者密码不对,则一直提示用户输入帐号和密码
//帐号–admin
//密码–123—字符串类型
var userName=prompt("请输入帐号");
 var userPwd=prompt("请输入密码");
 while(userName!="admin"||userPwd!="123"){
      userName=prompt("请输入帐号");
      userPwd=prompt("请输入密码");
 }
 console.log("登录成功")

09 循环语句之do-while循环

语法:

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

执行过程:

先执行一次循环体,然后判断条件是否成立,不成立,

则跳出循环,成立则执行循环体,然后再判断条件是否成立,成立则继续循环,否则跳出…

输出:阿珊要睡觉了…10次

var i=0;
 do{
   console.log("阿珊要睡觉了")
   i++;
 }while(i<10);
 //注意：分号一定要下

 // 练习:求100以内所有3的倍数的和

  //方法1：
    var i = 1;
    var sum = 0;
    while (i <= 100) {
      if (i % 3 == 0) {
        sum += i;
      }
      i++;
    }
    console.log(sum)

    //方法2
    var i = 1;
    var sum = 0;
    do {
      if (i % 3 == 0) {
        sum += i;
      }
      i++;
    } while (i <= 100);
    console.log(sum)

10 总结while循环和do-while循环

while循环特点:先判断,后循环,有可能一次循环体都不执行

do-while循环特点:先循环,后判断,至少执行一次循环体

11 循环语句之for循环

  for(表达式1;表达式2;表达式3){
    循环体;
  }

执行过程:

先执行一次表达式1,然后判断表达式2;如果不成立则直接跳出循环

如果表达式2成立,执行循环体的代码,结束后,跳到表达式3执行,然后跳到表达式2,判断表达式2是否成立,不成立,则跳出循环

如果表达式2成立,则执行循环体,然后再跳到表达式3,再跳到表达式2,判断是否成立,一直如此

for(var 
//例子:打印10次,哈哈,我又变帅了
for (var i = 0; i < 10; i++) {
  console.log("日照香炉生紫烟,一对情侣在林间.远看身影如神仙,近看竟然是于千");
}

//求1-100之间所有数字的和

var sum = 0;
for (var i = 1; i <= 100; i++) {
  sum += i;
}
console.log("和为:" + sum);


//    for (var i = 0; i < 10; i++) {
//      console.log("小杨好帅");
//    }
for(var i=0;i<10;i++){
  console.log("love")
//求1-100之间所有偶数的和

var sum=0;
for(var i=0;i<=100;i++){
  if(i%2==0){
    sum+=i;
  }
}
console.log(sum)

// 求1-100之间所有奇数的和
 var sum=0;
 for(var i=0;i<=10;i++){
   if(i%2!=0){
     sum+=i;
   }
 }
 console.log(sum)
// 求1-100之间所有能被3整除的数字的和
var sum=0;
for(var i=1;i<100;i++){
  if(i%3==0){
    sum+=i;
  }
}
console.log(sum)
// 求1-100之间所有能被7整除的数字的和
var sum=0;
for(var i=1;i<=100;i++){
  if(i%7==0){
    sum+=i;
  }
}
console.log(sum)
//画星星

for(var i=0;i<=5;i++){
  for(var j=0;j<=i;j++){
    document.write("☪")
  }
  document.write("<br/>")
}
    //控制行数的---正方形的
    for (var i = 0; i <= 5; i++) {
      //控制每一行有几个星星
      for (var j = 0; j <= 5; j++) {
        document.write("★");
      }
      document.write("<br/>");
    }

    //
    //    for(var j=0;j<=2;j++){
    //      document.write("★");
    //    }
三角形的—五角星----随着行数的增加,每一行都会比上一行多一个五角星

for (var i = 0; i <= 5; i++) {
  //控制每一行有几个星星
  for (var j = 0; j <= i; j++) {
    document.write("★");
  }
  document.write("<br/>");
}
// 乘法口诀表
 for(var i=1;i<=9;i++){
   //控制每一行有多少个表达式
   for(var j=1;j<=9;j++){
     document.write(j+"*"+i+"="+i*j);
   }
   document.write("<br/>");
 }

 for(var i=1;i<=9;i++){
   //控制个数
   for(var j=1;j<=i;j++){
     document.write(j+"*"+i+"="+i*j)
   }
   document.write("<br/>")
}

JavaScript系列6部曲：流程控制（万字长文）

正文

01 流程控制

02 分支语句之if语句

03 分支语句之if-else语句

04 分支语句之三元表达式

05 分支语句之if-else if语句

06 分支语句之switch-case语句

07 总结分支语句

08 循环语句之while循环

09 循环语句之do-while循环

10 总结while循环和do-while循环

11 循环语句之for循环

热门文章

最新文章

相关课程

相关电子书

相关实验场景