首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端基础-JavaScript流程控制

前端基础-JavaScript流程控制

作者头像
cwl_java
发布2020-03-26 16:07:34
7700
发布2020-03-26 16:07:34
举报
文章被收录于专栏:cwl_Javacwl_Java

第5章 流程控制

程序的三种基本结构

顺序结构: 从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的;

分支结构:根据不同的情况及判断,执行对应代码;

循环结构:重复执行一段代码;

5.1 分支结构

if语句

语法结构

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

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

案例

//获取两个数字中的最大值
var num1=100;
var num2=20;
if(num1>num2){
    console.log(num1);
}else{
    console.log(num2);
}
// 判断一个数是偶数还是奇数
var n = 10;
if(n%2==0){
    console.log('偶数');
}else{
    console.log('奇数');
}
    /*
    * 例子:
    * 获取考试的分数,如果成绩是在90(含)分以上的,则显示级别:A
    * 如果成绩是大于等于80的则:B
    * 如果成绩是大于等于70的则:C
    * 如果成绩是大于等于60的则:D
    * 如果成绩是小于60的则:E
    *
    * */


    var score = 91;
    if (score >= 90) {
        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");
    }

作业:判断一个年份是闰年还是平年 闰年:能被4整除,但不能被100整除的年份 或者 能被400整除的年份

var n = 2016;
if(n%4==0){
    if(n%100 !=0){
        console.log('闰年');
    }else if(n%400 ==0){
        console.log('闰年');
    }else{
        console.log('平年');
    }
}else{
    console.log('平年');
}
三元运算符
表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

案例:

// 是否年满18岁
var age = 18;
var s = age>=18?'Yes':'no';
console.log(s);
// 从两个数中找最大值
var a1 = 110;
var a2 = 19;
var s = a1>a2?a1:a2;
console.log(s);
switch语句

语法格式:

switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  …
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}

/*
* 执行过程:
* 获取表达式的值,和值1比较,相同则执行代码1,遇到break跳出整个语句,结束
* 如果和值1不匹配,则和值2比较,相同则执行代码2,遇到break跳出整个语句,结束
* 如果和值2不匹配,则和值3比较,相同则执行代码3,遇到break跳出整个语句,结束
* 如果和值3不匹配,则和值4比较,相同则执行代码4,遇到break跳出整个语句,结束
* 如果和之前的所有的值都不一样,则直接执行代码5,结束
*/
break可以省略,如果省略,代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换(例如,字符串'10' 不等于数值 10)
/* *
* 判断这个人的成绩的级别:
* 如果是A,则提示,分数在90分以上
* 如果是B,则提示,分数在80分以上
* 如果是C,则提示,分数在70分以上
* 如果是D,则提示,分数在60分以上
* 否则提示,不及格
* */

var jiBie="B";
switch (jiBie){
    case "A" : 
        console.log("分数在90分以上的");
        break;
    case "B" : 
        console.log("分数在80分以上的");
        break;
    case "C" : 
        console.log("分数在70分以上的");
        break;
    case "D" : 
        console.log("分数在60分以上的");
        break;
    default :
        console.log("不及格");
}

5.2 循环结构

在JS语言中,循环语句有三种,while、do…while、for循环。

5.2.1 while语句

基本语法:

// 当循环条件为true时,执行循环体,
// 当循环条件为false时,结束循环。
while (循环条件) {
  //循环体
}

案例1:计算1-100之间所有数的和

// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
  // 循环体
  sum += i;
  // 自增
  i++;
}
console.log(sum);

案例2:打印100以内 7的倍数

var i = 1;
while(i<100){
    if(i%7==0){
        console.log(i);
    }
    i++;
}

案例3:打印100以内所有偶数

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

案例4:打印100以内所有偶数的和

var i = 1;
var s = 0;
while(i<=100){
    if(i%2==0){
        s = s+i;
    }
    i++;
}
console.log(s);

作业: 打印100以内的奇数 打印100以内的奇数的和

5.2.2 do…while语句

do…while循环和while循环非常像,二者经常可以相互替代, 但是do…while的特点是不管条件成不成立,都会执行一次。

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

案例:计算1+2+3+4+……+99+100 的结果

// 初始化变量
var i = 0;
var sum = 1;
do {
  sum += i;//循环体
  i++;//自增
} while (i <= 100);//循环条件
5.2.3 for语句

while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

for循环语法:

// for循环的表达式之间用的是;号分隔的,千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

执行顺序:1243 ---- 243 -----243(直到循环条件变成false)

  1. 初始化表达式
  2. 判断表达式
  3. 自增表达式
  4. 循环体
//打印1-100之间所有数
for(var i=1;i<=100;i++){
    console.log(i);
}

//求1-100之间所有数的和
var s = 0;
for(var i=0;i<=100;i++){
    s+=i;
}
console.log(s);

//求1-100之间所有偶数的和
var s = 0;
for(var i=1;i<=100;i++){
    if(i%2==0){
        s+=i;
    }
}
console.log(s);

//打印正方形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

//打印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = i; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

//打印9*9乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
  for (var j = i; j <=9; j++) {
    str += i + ' * ' + j + ' = ' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);
5.2.4 continue和break

break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号) continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)

案例1:求1-100之间不能被7整除的整数的和(用continue)

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

案例2:求200-300之间所有的奇数的和(用continue)

var s = 0;
for(var i=200;i<=300;i++){
    if(i%2==0){
        continue;
    }else{
        s+=i;
    }
}
console.log(s);

案例3:求200-300之间第一个能被7整数的数(break)

for(var i=200;i<=300;i++){
    if(i%7==0){
        console.log(i);
        break;
    }
}

总结: 代码的执行流程分为顺序、分支和循环三种结构,顺序结构是默认的,判断结构主要有if-else和switch-case两种,循环结构有while、do-while、for三种,其中continue和break是跳出循环;

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第5章 流程控制
    • 5.1 分支结构
      • 5.2 循环结构
        • 5.2.1 while语句
        • 5.2.2 do…while语句
        • 5.2.3 for语句
        • 5.2.4 continue和break
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档