JavaScript流程控制

目录

一、什么是流程控制

二、顺序结构

三、分支结构--if语句

1.if语句

1.1语法结构

1.2执行思路 

​

1.3案例：进入网吧

2.if…else双分支语句

 2.1语法结构

 2.2执行思路

2.3案例：进阶进入网吧

 2.4案例：判断闰年

3.if else if语句（多分支语句）

3.1语法结构

3.2执行思路 

3.3案例：判断成绩 

4.三元表达式

4.1语法结构

 4.2执行思路

4.3案例：数字补0 

四、分支结构--switch语句

1.语法结构

2.执行思路

3.注意事项 

4.案例：水果查询

五、switch语句和if else if语句的区别

六、循环结构

1.什么是循环

2.循环的目的 

3.for循环

3.1语法结构

3.2循环执行过程

 3.3断点调试

 3.4for循环执行相同的代码

 3.5for循环执行不同代码

         

              ​               

3.6案例                                                                                                                             

​

4.双重for循环 

4.1循环嵌套

4.2语法结构

4.3执行过程

 4.4案例

4.while循环

4.1语法结构

 4.2执行思路

4.3案例 

 5.do while循环

5.1语法结构

5.2执行思路

5.3案例 

七、continue break

1.continue关键字

 1.案例

2.break关键字

 八、JS命名规范

1.标识符命名规范

2.操作符规范

 3.单行注释

 4.其他规范

---

一、什么是流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能

•  简单来说流程控制就是来控制我们的代码按照什么结构顺序来执行
• 流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序

二、顺序结构

程序会按照代码的先后顺序，依次执行

三、分支结构--if语句

由从上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。

1.if语句

1.1语法结构

if (条件表达式) {
     //执行语句
}

1.2执行思路 

 如果if里面的条件表达式结果为真true则执行中括号里面的执行语句

如果if里面的条件表达式结果为假flase则不执行中括号里面的语句则执行if语句后面的代码

1.3案例：进入网吧

//1.弹出prompt输入框，用户输入年龄，程序把这个值保存到变量中
var age = prompt('请输入你的你年龄');
//2.使用if语句来判断年龄，年龄大于18可以进入
if (age > 18) {
    alert('你可以进入网吧')
}

2.if…else双分支语句

 2.1语法结构

//条件成立 执行if里面代码，否则执行else里面的代码
if (条件表达式) {
    //[如果]条件成立执行的代码
} else {
    //[否则]执行的代码

 2.2执行思路

如果表达式结果为真执行语句1，否则执行语句2

if里面的语句1和else里面的语句2最终只能有一个语句执行        2选1

else后面直接跟中括号

2.3案例：进阶进入网吧

//1.弹出prompt输入框，用户输入年龄，程序把这个值保存到变量中
var age = prompt('请输入你的你年龄');
//2.使用if语句来判断年龄，年龄大于18可以进入
if (age > 18) {
     alert('你可以进入网吧')
} else {
     alert('你未成年还是去学习吧 ')
}

 2.4案例：判断闰年

接收用户输入的年份，如果是闰年就弹出闰年，否则就弹出平年

//1.弹出prompt输入框，让用户输入年份，并且保存在变量中
var year = prompt('请输入年份');
//2.使用if语句来判断是否是闰年
//能被4整除且不能被100整除的为闰年或者能够被400整除的就是闰年
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
     alert('你输入的年份是闰年')
} else {
     alert('您输入的年份是平年')
}

3.if else if语句（多分支语句）

3.1语法结构

if (条件表达式1) {
     语句1
} else if (条件表达式2) {
     语句2
} else if (条件表达式3) {
     语句3
} else {
     最后的语句
}

3.2执行思路 

如果条件表达式1满足就执行语句1，执行 完毕后，退出整个if分支语句

如果条件表达式1不满足，则判断条件表达式2，满足的话执行语句2

以此类推

如果所有条件都不成立执行else里面的语句

3.3案例：判断成绩 

1.90分（含）以上，输出A

2.80分（含）-90分（不含），输出B

3.70分（含）-80分（不含），输出C

4.60分（含）-70分（不含），输出D

5.60分（不含）以下，输出E 

//按照从大到小判断的思路
//弹出输入框让用户输入分数，保存到变量中
var score = prompt('请输入你的成绩');
//使用多分支if else if语句来分别判断输出不同的值
if (score >= 90) {
    alert('优秀');
} else if (score >= 80) {
    alert('很棒')
} else if (score >= 70) {
    alert('继续努力')
} else if (score >= 60) {
    alert('你很危险')
} else {
    alert('不及格')
}

4.三元表达式

4.1语法结构

条件表达式？ 表达式1： 表达式2

 4.2执行思路

如果表达式为真则返回表达式1的值

如果表达式为假则返回表达式2的值

4.3案例：数字补0 

用户输入数字，如果数字小于10，就在前面补0，如果大于10，则不需要补 

//1.用户输入数字
var time = prompt('请输入一个0-59之间的数字');
//2.如果数字小于10则在这个数字前面补0，否则不做操作
var result = time < 10 ? '0' + time : time;
//3.用变量接收这个返回值，输出
alert(result);

四、分支结构--switch语句

1.语法结构

switch (表达式) {
   case value1:
        执行语句1;
        break;
   case value2:
        执行语句2;
        break;
   default:
        执行最后的语句;
}

2.执行思路

如果匹配上，就执行该case里面的语句

如果都没有匹配上，那么执行default里面的语句

3.注意事项 

• 表达式经常写成变量
• 数据类型必须一致
• 如果当前的case里面没有break就不会退出switch继续执行下一个case 

4.案例：水果查询

var fruit = prompt('请你输入查询的水果')
switch (fruit) {
     case '苹果':
         alert('苹果的价格是3.5元/斤');
         break;
     case '香蕉':
         alert('香蕉的价格是2元/斤');
         break;
     case '葡萄':
         alert('葡萄的价格是5元/斤');
         break;
     default:
         alert('没有这个水果')
}

五、switch语句和if else if语句的区别

1. 一般情况下，他们两个语句可以互相替换
2. switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，常用于范围判断（大于、等于某个范围）
3. switch语句进行条件判断后直接执行到程序的条件语句，效率更大。而if…else语句有几种条件，就得判断多少次
4. 当分支较少时，if…else语句的执行效率比switch语句高
5. 当分支较多时，switxh语句的执行效率比较高，而且结构更清晰

六、循环结构

1.什么是循环

在程序中，一组被重复执行的语句被称之为循环体

能否继续重复执行，取决于循环的终止条件。

由循环体及循环的终止条件组成的语句，被称之为循环语句

2.循环的目的 

可以重复执行某些代码

3.for循环

3.1语法结构

for (初始化变量; 条件b表达式; 操作表达式) {
     循环体
}

初始化变量：就是用var声明的一个普通变量，通常用于作为计数器使用

条件表达式：就是用来决定每一次循环是否继续执行         就是终止的条件

操作表达式：就是每次循环最后执行的代码        经常用于我们计数器变量进行更新（递增或者递减）

3.2循环执行过程

for (var i = 1; i <= 100; i++) {
     console.log('你好');
}

1.首先执行里面的计数器变量        var i=1，但是这句话在for里面只执行一次

2.i <=100 来判断是否满足条件，如果满足条件就去执行循环体，不满足条件退出循环

3.最后去执行i++        第一轮结束

4.执行i<=100判断是否满足条件，如果满足条件就去执行循环体，不满足条件退出循环        第二轮……

 3.3断点调试

F12键

 浅蓝色背景在哪就证明到了那一步

 3.4for循环执行相同的代码

var num = prompt('请你输入输出的次数');
for (var i = 1; i <= num; i++) {
    console.log('你好');
}

 

 3.5for循环执行不同代码

         

//输出一个人1-100岁
for (var i = 1; i <= 100; i++) {
     console.log('这个人今年' + i + '岁了');
}

                             

3.6案例                                                                                                                             

案例1 ：求1-100之间所有整数的累加和

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

案例2：求1-100之间所有数的平均值

var sum = 0; //求和的变量
var average = 0; //平均值的变量
for (var i = 1; i <= 100; i++) {
    // sum = sum + i;
    sum += i;
};
average = sum / 100;
console.log(average); //50.5

案例3：求1-100之间所有偶数和奇数的和

var even = 0;
var odd = 0;
   for (var i = 1; i <= 100; i++) {
   if (i % 2 == 0) {
         even += i;
   } else {
         odd += i;
   }
}
console.log('1-100之间所有偶数和是' + even);
console.log('1-100之间所有奇数和是' + odd);

 

 

案例4：求1-100之间所有能被3整除的数字的和 

var result = 0;
for (var i = 1; i <= 100; i++) {
     if (i % 3 == 0) {
         result += i;
     }
}
console.log('1-100之间能被3整除的和是' + result);

 

案例5：求学生成绩案例 

var num = prompt('请输入班级的总人数:'); //num是总的班级人数
var sum = 0; //求和的变量
var average = 0; //求平均值的变量
for (var i = 1; i <= num; i++) {
     var score = prompt('请输入第' + i + '个学生成绩');
     // 因为从prompt取过来的是字符串型的需要转换为数字型
     sum = sum + parseFloat(score);
}
average = sum / num;
alert('班级总成绩是' + sum);
alert('班级总成绩平均分是' + average);

案例6：一行打印五颗星星 

//一行打印五颗星星(采用追加字符串的方式打印)
var str = '';
for (var i = 1; i <= 5; i++) {
    str = str + '⭐';
}
console.log(str);

 

4.双重for循环 

4.1循环嵌套

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构 

4.2语法结构

for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
     for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
           执行语句;
     }
}

4.3执行过程

外层循环一次，里面循环全部

for (var i = 1; i <= 3; i++) {
     console.log('这是外层循环第' + i + '次');
     for (var j = 1; j <= 3; j++) {
          console.log('这是里层循环的第' + j + '次');
     }
}

 4.4案例

案例1：打印五行五列星星

1.内层循环负责一行打印五个星星

2.外层循环负责打印五行

var str = '';
for (var i = 1; i <= 5; i++) {
    for (var j = 1; j <= 5; j++) {
         str = str + '⭐';
    }
    //如果一行打印完毕就要另起一行
    str = str + '\n';
}
console.log(str);

 

 案例2：打印倒三角形

var str = '';
for (var i = 1; i <= 10; i++) {
     for (var j = i; j <= 10; j++) {
         str = str + '⭐';
     }
     //如果一行打印完毕就要另起一行
         str = str + '\n';
}
console.log(str);

 案例3：打印正三角形

var str = '';
for (var i = 1; i <= 9; i++) { //控制行数
     for (var j = 1; j <= i; j++) { //控制每一行的个数
         str = str + '⭐';
     }
     str = str + '\n';
}
console.log(str);

 

 

案例4：打印九九乘法表

案例分析：

1. 一共有9行，但是每一行的个数不一样，因此需要用到双重for循环
2. 外层的for循环控制行数i，循环9次，可以打印9行
3. 内层的for循环控制每行公式j
4. 核心算法：每一行公式的个数正好和行数一致，j<=i

var str = '';
for (var i = 1; i <= 9; i++) { //控制行数
      for (var j = 1; j <= i; j++) { //控制每一行的个数
          // 1 x2 = 2
          str += j + 'x' + i + '=' + i * j + '\t';
       }
       str = str + '\n';
}
console.log(str);

 

4.while循环

4.1语法结构

while (条件表达式) {
      循环体
}

 4.2执行思路

当条件表达式结果为true则执行循环体否则退出循环

var num = 1;
while (num <= 100) {
     console.log('你好');
     num++;
}

 里面应该也有计数器        初始化变量

里面应该也有操作表达式        完成计数器的更新        防止死循环

4.3案例 

案例1：打印1-100

var i = 1;
while (i <= 100) {
      console.log('这个人今年' + i + '岁了');
      i++;
}

 

 

案例2：求1-100的整数和 

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

案例3：弹出一个提示框，你爱我吗？如果输入我爱你就提示结束，否则一直询问

var message = prompt('你爱我吗？');
while (message !== '我爱你') {
     message = prompt('你爱我吗？')
}
alert('我也爱你呀！')

 5.do while循环

5.1语法结构

do {
      循环体
} while (条件表达式)

5.2执行思路

先执行一次循环体再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环

5.3案例 

案例1：打印1-100

var i = 1;
do {
    console.log('这个人今年' + i + '岁了');
    i++;
} while (i <= 100);

 

案例2： 求1-100的整数和

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

案例3：弹出一个提示框，你爱我吗？如果输入我爱你就提示结束，否则一直询问

do {
     var message = prompt('你爱我吗？');
} while (message !== '我爱你');
alert('我也爱你呀！')

七、continue break

1.continue关键字

continue关键字用于跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）

for (var i = 1; i <= 5; i++) {
     if (i == 3) {
          continue;
     }
     console.log('我正在吃第' + i + '个包子');
}

 

 1.案例

求1-100之间，除了能被7整除之外的和

var sum = 0;
for (var i = 1; i <= 100; i++) {
   if (i % 7 == 0) {
         continue;
   }
   sum += i;
}
console.log(sum); //4315

2.break关键字

breake关键字用于立即跳出整个循环（循环结束）。

for (var i = 1; i <= 5; i++) {
      if (i == 3) {
         break;
      }
      console.log('我正在吃第' + i + '个包子');
}

 

 八、JS命名规范

1.标识符命名规范

• 变量、函数的命名必须要有意义
• 变量的名称一般用名词
• 函数的名称一般用动词 

2.操作符规范

操作符的左右两侧各保留一个空格 

 3.单行注释

单行注释前面有一个空格 

 4.其他规范