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.其他规范

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值