[华为云在线课程][JavaScript数据类型和运算符及流程控制][学习笔记][第3章]

举报
John2021 发表于 2022/01/31 12:54:44 2022/01/31
【摘要】 第3章,JavaScript的流程控制在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行。流程控制主要有三种结构:分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。 3.1,JavaScript顺序结构顺序结构是程序中最简单、最基本的流程控...

第3章,JavaScript的流程控制

  • 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。我们要通过控制代码的执行顺序来实现我们要完成的功能。
  • 简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行。
  • 流程控制主要有三种结构:分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

3.1,JavaScript顺序结构

  • 顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。
console.log("1,学习JavaScript");//1,学习JavaScript
console.log("2,努力和坚持");//2,努力和坚持
console.log("3,兴趣驱动");//3,兴趣驱动

3.2,JavaScript分支结构

JavaScript的分支结构:

  • 由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程)从而得到不同的结果。
  • JavaScript提供了两种分支结构的语句:if语句,switch语句。

JavaScript的if分支结构:

  • if语句的语法结构:if(条件表达式){ 执行语句 }
  • 如果if里面的条件表达式结果为真true,则执行大括号里面的执行语句。
  • 如果if条件表达式结果为假,则不执行大括号里面的语句,则执行if语句后面的代码。
  • JavaScript的if分支结构案例:
if (3 < 5) {
    console.log("进入到if语句块");
}
var age = window.prompt("请输入你的年龄:");
if (age > 7) {
    console.log("你的年龄需要不断培养自主学习能力");
}

JavaScript的if…else双分支结构:

  • 如果表达式为真,那么执行语句1;否则执行语句2
  • if…else语句双分支语法结构:
if(条件表达式){
执行语句1
}else{
执行语句2
}
  • JavaScript的if…else双分支结构案例:
var age = 10;
if (age >= 10) {
    console.log("可以独自去旅行");
} else {
    console.log("回家学习");
}
var score = window.prompt("请输入你的考核平均分:");
if (score > 90) {
    console.log("你可以拿奖学金");
} else {
    console.log("继续努力加油");
}
  • 判断输入年份是闰年还是平年?提示:一般能被4整除的年份是闰年,不能被4整除的年份是平年。如:1988年、2008年是闰年;2005年、2006年、2007年是平年。但是如果是世纪年(也就是整百年),就只有能被400整除才是闰年,否则就是平年。
var year = window.prompt("请输入年份:");
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    window.alert("你输入的是闰年");
} else {
    window.alert("你输入的是平年");
}

JavaScript的if…else多分支结构

  • if…else语句多分支语法结构:
if (条件表达式1) {
    语句1;
} else if (条件表达式2) {
    语句2;
} else if (条件表达式3) {
    语句3;
} else {
    最后的语句;
}
  • 如果条件表达式1满足就执行语句1执行完毕后,退出整个if分支语句
  • 如果条件表达式1不满足,则判断条件表达式2满足的话,执行语句2,以此类推
  • 如果上面的所有条件表达式都不成立,则执行else里面的语句
  • JavaScript的if…else多分支结构案例:
var score = window.prompt("请输入分数:");
if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 70) {
    console.log("一般");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

JavaScript的switch分支结构

  • switch语句也是多分支语句,它用于基于不同的条件来执行不同的代码
  • 当要针对变量设置一系列的特定值的选项时,就可以使用switch
  • 利用我们的表达式的值和case后面的选项值相匹配,如果匹配上,就执行该case里面的语句,如果没有匹配上,那么执行default里面的语句
  • switch语法结构:
switch (表达式) {
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    default:
        执行最后的语句;
}
  • JavaScript的switch分支结构案例:
var fruit = window.prompt("请你输入水果的名称:");
switch (fruit) {
    case "苹果":
        console.log("苹果2元/斤");
        break;
    case "雪梨":
        console.log("雪梨4元/斤");
        break;
    default:
        console.log("没有此水果价格");
}
var time = window.prompt("请输入时间:");
switch (parseInt(time)) {
    case 12:
        console.log("中午好");
        break;
    case 18:
        console.log("傍晚好");
        break;
    case 23:
        console.log("深夜好");
        break;
    default:
        console.log("你好");
}

3.3,JavaScript循环结构

  • 在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句
  • JavaScript的循环三种方式:for循环,while循环,do…while循环

JavaScript的for循环结构

  • for语法结构:
for (初始化变量; 条件表达式; 操作表达式) {
    循环体
}
  • 初始化变量:用var声明一个变量,通常用于计数器赋值使用
  • 条件表达式:用来决定每一次循环是否继续执行
  • 操作表达式:每次循环最后执行的代码,经常用来计数器的变更
  • JavaScript的for循环案例:
for (var i = 1; i <= 5; i++) {
    console.log("你好啊?" + i);
}
/*
* 你好啊?1
* 你好啊?2
* 你好啊?3
* 你好啊?4
* 你好啊?5
* */
var sum = 0;
for (var i = 0; i <= 5; i++) {
    sum += i;
}
console.log("和为:" + sum);//和为:15
for (var i = 1; i <= 5; i++) {
    if (i == 1) {
        console.log("这个人1岁,刚出生");
    } else if (i == 2) {
        console.log("这个人2岁了,去幼儿园");
    } else {
        console.log("这个人" + i + "岁了");
    }
}
/*
* 这个人1岁,刚出生
* 这个人2岁了,去幼儿园
* 这个人3岁了
* 这个人4岁了
* 这个人5岁了
* */
var num = window.prompt("输入循环的次数:");
for (var i = 1; i <= num; i++) {
    console.log("我在循环做事情");
}

JavaScript的双重for循环

  • 双重for循环语法结构:
for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
    for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
        执行语句;
    }
}
  • 可以把里面的循环看做是外层循环语句
  • 外层循环循环一次,里面的循环执行全部
  • JavaScript的双重for循环案例:
var str = "";
for (var i = 1; i <= 5; i++) {
    for (var j = 1; j <= 5; j++) {
        str = str + "▲";
    }
    str = str + "\n";
}
console.log(str);
/*
* ▲▲▲▲▲
* ▲▲▲▲▲
* ▲▲▲▲▲
* ▲▲▲▲▲
* ▲▲▲▲▲
* */
var str = "";
for (var i = 1; i <= 5; i++) {
    for (var j = i; j <= 5; j++) {
        str = str + "☆";
    }
    str = str + "\n";
}
console.log(str);
/*
* ☆☆☆☆☆
* ☆☆☆☆
* ☆☆☆
* ☆☆
* ☆
* */

JavaScript的while循环结构

  • while语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。
  • while语句语法结构:
while (条件表达式) {
    循环体代码
}
  • 先执行条件表达式,如果为true,则执行循环体代码;如果为false,则退出循环,执行后面代码
  • 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为false,整个循环过程才会结束。
  • JavaScript的while循环案例:
var i = 1;
while (i <= 5) {
    console.log("循环了" + i + "次");
    i++;
}
/*
* 循环了1次
* 循环了2次
* 循环了3次
* 循环了4次
* 循环了5次
* */
var sum = 0;
var j = 1;
while (j <= 5) {
    sum += j;
    j++;
}
console.log(sum);//15

JavaScript的do…while循环结构

  • do…while语句其实是while语句的一个变体
  • 该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环
  • do…while语句语法结构:
do {
    循环体
} while (条件循环体);
  • do…while先执行一次循环体,再判断条件,如果条件表达式结果为真,则继续执行循环体,否则退出循环,do…while至少循环一次
  • JavaScript的do…while循环案例:
var sum = 0;
var j = 1;
do {
    sum += j;
    j++;
} while (j <= 10);
console.log(sum);//55
do {
    message = window.prompt("你好吗?");
} while (message !== "我很好");
console.log("我也很好");

3.4,JavaScript的continue break关键字

JavaScript的continue关键字

  • continue关键字用于立即跳出本次循环,继续下一次循环;
  • 本次循环体中continue之后的代码就会少执行一次
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue;
    }
    console.log("我正在干" + i + "件事");
}
/*
* 我正在干1件事
* 我正在干2件事
* 我正在干4件事
* 我正在干5件事
* */
var sum = 0;
for (var i = 1; i <= 5; i++) {
    if (i % 2 == 0) {
        continue;
    }
    sum += i;
}
console.log(sum);//9
/*
* 余2为0,代表遇到偶数时立即执行continue跳出本次循环
* 所以结果就是1+3+5=9
* */

JavaScript的break关键字

  • break关键字用于立即跳出整个循环,循环结束
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;
    }
    console.log("我正在干" + i + "件事");
}
/*
* 我正在干1件事
* 我正在干2件事
* */
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。