javascript 的流程控制语句：
Ⅰ、代码块：
其一、代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 我们的程序是由一条一条语句构成的
* 语句是按照自上向下的顺序一条一条执行的
* 在 JS 中可以使用 {} 来为语句进行分组,
* 同一个 {} 中的语句我们称为是一组语句，
* 它们要么都执行，要么都不执行，
* 一个 {} 中的语句我们也称为叫一个代码块
* 在代码块的后边就不用再编写 ; 了(即：代码块后面不需要再写分号)
*
* JS 中的代码块，只具有分组的的作用，没有其他的用途
* 代码块内容的内容，在外部是完全可见的
*/
{
var a = 10;
alert("hello");
console.log("你好");
document.write("语句");
}
console.log("a = "+a); //10
</script>
</head>
<body>
</body>
</html>
其二、结果为：
// 一进入页面后的弹窗：
// 点击确定后的控制台：
Ⅱ、流程控制语句：
其一、代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 流程控制语句
* - JS 中的程序是从上到下一行一行执行的
* - 通过流程控制语句可以控制程序执行流程，
* 使程序可以根据一定的条件来选择执行
*
* - 语句的分类：
* 1.条件判断语句
* 2.条件分支语句
* 3.循环语句
*
*
* 条件判断语句：
* - 使用条件判断语句可以在执行某个语句之前进行判断，
* 如果条件成立才会执行语句，条件不成立则语句不执行。
*
* - if 语句
* - 语法一：
* if(条件表达式){
* 语句...
* }
*
* if 语句在执行时，会先对条件表达式进行求值判断，
* 如果条件表达式的值为 true，则执行 if 后的语句，
* 如果条件表达式的值为 false，则不会执行 if 后的语句。
* if 语句只能控制紧随其后的那个语句,
* 如果希望 if 语句可以控制多条语句，
* 可以将这些语句统一放到代码块中
* if 语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使 if 后只有一条语句
*
*/
var a = 25;
if(a > 10 && a <= 20){
alert("a大于10，并且 a小于等于20");
}
</script>
</head>
<body>
</body>
</html>
其二、结果为：
// 一进入页面后的控制台：
Ⅲ、条件判断语句(if)：
其一、代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* if 语句
*
* 语法二:
* if(条件表达式){
* 语句...
* }else{
* 语句...
* }
*
* if...else...语句
* 当该语句执行时，会先对 if 后的条件表达式进行求值判断，
* 如果该值为 true，则执行 if 后的语句
* 如果该值为 false，则执行 else 后的语句
*
* 语法三：
* if(条件表达式){
* 语句...
* }else if(条件表达式){
* 语句...
* }else if(条件表达式){
* 语句...
* }else{
* 语句...
* }
*
* if...else if...else
* 当该语句执行时，会从上到下依次对条件表达式进行求值判断
* 如果值为 true，则执行当前语句。
* 如果值为 false，则继续向下判断。
* 如果所有的条件都不满足，则执行最后一个 else 后的语句
* 该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句
*/
var age = 50;
/*if(age >= 60){
alert("你已经退休了~~");
}else{
alert("你还没退休~~~");
}*/
age = 200;
/*if(age > 100){
alert("活着挺没意思的~~");
}else if(age > 80){
alert("你也老大不小的了~~");
}else if(age > 60){
alert("你也退休了~~");
}else if(age > 30){
alert("你已经中年了~~");
}else if(age > 17){
alert("你已经成年了");
}else{
alert("你还是个小孩子~~");
}*/
age = 90;
if(age > 17 && age <= 30){
alert("你已经成年了");
}else if(age > 30 && age <= 60){
alert("你已经中年了");
}else if(age > 60 && age <= 80){
alert("你已经退休了");
}else{
alert("你岁数挺大的了~~");
}
</script>
</head>
<body>
</body>
</html>
其二、结果为：
// 一进入页面后的弹窗：
Ⅳ、条件分支语句(switch)：
其一、代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 条件分支语句也叫 switch 语句
* 语法：
* switch(条件表达式){
* case 表达式:
* 语句...
* break;
* case 表达式:
* 语句...
* break;
* default:
* 语句...
* break;
* }
*
* 执行流程：
* switch...case..语句
* 在执行时会依次将 case 后的表达式的值和 switch 后的条件表达式的值进行全等比较，
* 如果比较结果为 true，则从当前 case 处开始执行代码。
* 当前 case 后的所有的代码都会执行，我们可以在 case 的后边跟着一个 break 关键字，
* 这样可以确保只会执行当前 case 后的语句，而不会执行其他的 case
* 如果比较结果为 false，则继续向下比较
* 如果所有的比较结果都为 false，则只执行 default 后的语句
*
* switch 语句和 if 语句的功能实际上有重复的，使用 switch 可以实现 if 的功能，
* 同样使用 if 也可以实现 switch 的功能，所以我们使用时，可以根据自己的习惯选择。
*/
//根据 num 的值，输出对应的中文
var num = 3;
/*if(num == 1){
console.log("壹");
}else if(num == 2){
console.log("贰");
}else if(num == 3){
console.log("叁");
}*/
num = "hello";
switch(num){
case 1:
console.log("壹");
//使用 break 可以来退出 switch 语句
break;
case 2:
console.log("贰");
break;
case 3:
console.log("叁");
break;
default:
console.log("非法数字~~");// 非法数字~~
break;
}
</script>
</head>
<body>
</body>
</html>
其二、结果为：
// 一进入页面后的控制台：
Ⅴ、循环语句(包含 while/do while)：
其一、代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 向页面中输出连续的数字
*/
// var n = 1;
// document.write(n++ +"<br />");/* 此时的 "<br />" 是在网页中表示换行，而直接使用 "/n" 只能将该字符输出在网页中，而并不能实现换行效果 */
/*
* 循环语句：
* 通过循环语句可以反复的执行一段代码多次
*
*
* while 循环
* - 语法：
* while(条件表达式){
* 语句...
* }
*
* - while 语句在执行时，
* 先对条件表达式进行求值判断，
* 如果值为 true，则执行循环体，
* 循环体执行完毕以后，继续对表达式进行判断
* 如果为 true，则继续执行循环体，以此类推
* 如果值为 false，则终止循环
*
*
* do...while 循环
* - 语法：
* do{
* 语句...
* }while(条件表达式)
*
* - 执行流程：
* do...while 语句在执行时，会先执行循环体，
* 循环体执行完毕以后，在对 while 后的条件表达式进行判断，
* 如果结果为 true，则继续执行循环体，执行完毕继续判断以此类推
* 如果结果为 false，则终止循环
*
* 实际上这两个语句功能类似，不同的是 while 是先判断后执行，
* 而 do...while 会先执行后判断，
* do...while 可以保证循环体至少执行一次，
* 而 while 不能
*/
var n = 1;
//向这种将条件表达式写死为 true 的循环，叫做死循环
//该循环不会停止，除非浏览器关闭，死循环在开发中慎用
//可以使用 break，来终止循环
/*while(true){
alert(n++);
//判断 n 是否是 10
if(n == 10){
//退出循环
break;
}
}*/
//创建一个循环，往往需要三个步骤
//1.创初始化一个变量
var i = 1;
//2.在循环中设置一个条件表达式
/*while(i <= 10){
//3.定义一个更新表达式，每次更新初始化变量
document.write(i++ +"<br />")
}*/
do{
document.write(i++ +"<br />");
}while(i <= 10);
/*while(true){
alert(1);
}*/
</script>
</head>
<body>
</body>
</html>
其二、结果为：
// 一进入页面后的控制台：
Ⅵ、while/do while 循环(练习)：
其一、代码为：(投资的年利率为 5%，求到 5000 元的年数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 假如投资的年利率为 5%，试求从 1000 块增长到 5000块，需要花费多少年
*
* 1000 1000*1.05
* 1050 1050*1.05
*/
//定义一个变量，表示当前的钱数
var money = 1000;
//定义一个计数器
var count = 0;
//定义一个 while 循环来计算每年的钱数
while(money < 5000){
money *= 1.05;
//使count自增
count++;
}
//console.log(money);
console.log("一共需要 "+ count +" 年");// 一共需要33年
</script>
</head>
<body>
</body>
</html>
其二、结果为：
// 一进入页面后的控制台：
其三、代码为：(成绩从 0-100 的奖励)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>if练习1</title>
<script type="text/javascript">
/*
* 从键盘输入小明的期末成绩:
* 当成绩为 100 时，'奖励一辆BMW'
* 当成绩为 [80-99] 时，'奖励一台iphone15s'
* 当成绩为 [60-80] 时，'奖励一本参考书'
* 其他时，什么奖励也没有
*/
/*
* prompt() 可以弹出一个提示框，该提示框中会带有一个文本框，
* 用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，
* 该字符串将会作为提示框的提示文字
*
* 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
*/
//将 prompt 放入到一个循环中
while(true){
//score 就是小明的期末成绩
var score = prompt("请输入小明的期末成绩(0-100):");
//判断用户输入的值是否合法
if(score >= 0 && score <= 100){
//满足该条件则证明用户的输入合法，退出循环
break;
}
alert("请输入有效的分数！！！");
}
//判断值是否合法
if(score > 100 || score < 0 || isNaN(score)){
alert("拉出去毙了~~~");
}else{
//根据 score 的值来决定给小明什么奖励
if(score == 100){
//奖励一台宝马
alert("宝马，拿去~~~");
}else if(score >= 80){
//奖励一个手机
alert("手机，拿去玩~~~");
}else if(score >= 60){
//奖励一本参考书
alert("参考书，拿去看~~~");
}else{
alert("棍子一根~~");
}
}
</script>
</head>
<body>
</body>
</html>
其四、结果为：
// 一进入页面后的弹窗：
// 点击确定 后的弹窗：
Ⅶ、for 循环(包含练习)：
其一、代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* for 语句，也是一个循环语句，也称为 for 循环
* 在 for 循环中，为我们提供了专门的位置用来放三个表达式：
* 1.初始化表达式
* 2.条件表达式
* 3.更新表达式
*
* for 循环的语法：
* for(①初始化表达式;②条件表达式;④更新表达式){
* ③语句...
* }
*
* for 循环的执行流程：
* ①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
* ②执行条件表达式，判断是否执行循环。
* 如果为 true，则执行循环③
* 如果为 false，终止循环
* ④执行更新表达式，更新表达式执行完毕继续重复②
*/
//创建一个执行 10 次的 while 循环
//初始化表达式
/*var i = 0;
//创建一个循环，定义条件表达式
while(i < 10){
//设置更新表达式
alert(i++);
}*/
for(var i = 0 ; i < 10 ; i++ ){
console.log(i);// 0,1,2,3,4,5,6,7,8,9
}
/*
* for 循环中的三个部分都可以省略，也可以写在外部
* 如果在 for 循环中不写任何的表达式，只写两个;(即：只写两个分号)
* 此时循环是一个死循环会一直执行下去，慎用
* for(;;){
alert("hello");
}
*/
</script>
</head>
<body>
</body>
</html>
其二、结果为：
// 一进入页面后的控制台：
其三、代码为：(求 1-100 的奇数之和)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 打印 1-100 之间所有奇数之和
*/
//创建一个变量，用来保存奇数之和
//var sum = 0;
//打印 1-100 之间的数
for(var i=1 , sum=0 ; i<=100 ; i++){
//判断 i 是否是奇数
//不能被 2 整除的数就是奇数
if(i%2 != 0){
//如果 i 除以 2 有余数则证明 i 是奇数
//console.log(i);
sum = sum+i;
}
}
console.log("奇数之和为 : "+sum);// 奇数之和为 : 2500
</script>
</head>
<body>
</body>
</html>
其四、结果为：
// 一进入页面后的控制台：
其五、代码为：(求 1-100 所有 7 的倍数值及总和)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 打印 1-100 之间所有 7 的倍数的个数及总和
*/
//定义一个变量，来保存总和
var sum = 0;
//定义一个计数器，来记录数量
var count = 0;
//打印1-100之间所有的数
for(var i=1 ; i<=100 ; i++){
//判断 i 是否是 7 的倍数
if(i % 7 == 0){
//console.log(i);
sum += i;
//使计数器自增 1
count++;
}
}
//输出总和
console.log("总和为:"+sum);// 总和为:735
//输出总数
console.log("总数量为:"+count);// 总数量为:14
</script>
</head>
<body>
</body>
</html>
其六、结果为：
// 一进入页面后的控制台：
其七、代码为：(求所有符合水仙花数的三位数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 水仙花数是指一个 3 位数，它的每个位上的数字的 3 次幂之和等于它本身。
（例如：1^3 + 5^3 + 3^3 = 153）,请打印所有的水仙花数。
*/
//打印所有的三位数
for(var i=100 ; i<1000 ; i++){
//获取 i 的百位 十位 个位的数字
//获取百位数字
var bai = parseInt(i/100);
//获取十位的数字
var shi = parseInt((i-bai*100)/10);
//获取个位数字
var ge = i % 10;
//判断 i 是否是水仙花数
if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){
console.log(i);// 153, 370, 371, 407
}
}
</script>
</head>
<body>
</body>
</html>
其八、结果为：
// 一进入页面后的控制台：
其九、代码为：(判断输入值是否是质数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在页面中接收一个用户输入的数字，并判断该数是否是质数。
质数：只能被 1 和它自身整除的数，1不是质数也不是合数，质数必须是大于 1 的自然数。
*/
var num = prompt("请输入一个大于1的整数:");
//判断这个值是否合法
if(num <= 1){
alert("该值不合法！");
}else{
//创建一个变量来保存当前的数的状态
//默认当前 num 是质数
var flag = true;
//判断 num 是否是质数
//获取 2-num 之间的数
for(var i=2 ; i<num ; i++){
//console.log(i);
//判断 num 是否能被 i 整除
if(num % i == 0){
//如果 num 能被 i 整除，则说明 num 一定不是质数
//设置 flag 为 false
flag = false;
}
}
//如果 num 是质数则输出
if(flag){
alert(num + "是质数！！！");
}else{
alert("这个不是质数")
}
}
</script>
</head>
<body>
</body>
</html>
其十、结果为：
// 一进入页面后的弹窗：
// 点击弹窗后的弹窗：
Ⅷ、break 和 continue：
其一、代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* break 关键字可以用来退出 switch 或循环语句
* 不能在 if 语句中使用 break 和 continue
* break 关键字，会立即终止离他最近的那个循环语句
*/
/*for(var i=0 ; i<5 ; i++){
console.log(i);
if(i == 2){
break;
}
}*/
/*for(var i=0 ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
break;
console.log("内层循环:"+j);
}
}*/
/*
* 可以为循环语句创建一个 label，来标识当前的循环
* label: 循环语句
* 使用 break 语句时，可以在 break 后跟着一个 label，
* 这样 break 将会结束指定的循环，而不是最近的循环
*/
/*outer:
for(var i=0 ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
break outer;
console.log("内层循环:"+j);
}
}*/
/*
* continue 关键字可以用来跳过当次循环
* 同样 continue 也是默认只会对离他最近的循环循环起作用
* 同样，continue 可以使用 label 标签;
*/
/*for(var i=0 ; i<5 ; i++){
if(i==2){
continue;
}
console.log(i);
}*/
outer:
for(var i=0 ; i<5 ; i++){
for(var j=0 ; j<5 ; j++){
continue;
console.log("-->"+j);
}
console.log("@--->"+i);
}
</script>
</head>
<body>
</body>
</html>
其二、结果为：
// 一进入页面后的控制台：
Ⅸ、其它练习
其一、代码为：(嵌套 for 循环打印特定图形)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
通过程序，在页面中输出如下的图形：
* 1 <1 i=0
** 2 <2 i=1
*** 3 <3 i=2
**** 4 <4 i=3
***** 5 <5 i=4
*****
*****
*****
*****
*****
***** 1 j<5(5-0) i=0
**** 2 j<4(5-1) i=1
*** 3 j<3(5-2) i=2
** 4 j<2(5-3) i=3
* 5 j<1(5-4) i=4
*/
//向 body 中输出一个内容
//document.write("*****<br />");
//通过一个 for 循环来输出图形
//这个 for 循环执行几次，图形的高度就是多少
//它可以用来控制图形的高度
for(var i=0 ; i<5 ; i++){
/*
* 在循环的内部再创建一个循环，用来控制图形的宽度
* 目前我们的外部的 for 循环执行 1 次，内部的就会执行 5 次
* 内层循环可以来决定图形的宽度，执行几次图形的宽度就是多少
*/
/*for(var j=0 ; j<i+1 ; j++){
document.write("* ");
}*/
for(var j=0 ; j<5-i ; j++){
document.write("* ");
}
//输出一个换行
document.write("<br />");
}
</script>
</head>
<body>
</body>
</html>
其二、结果为：
// 一进入页面后的页面展示：
其三、代码为：(打印出九九乘法表)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 1.打印 99 乘法表
* 1*1=1
* 1*2=2 2*2=4
* 1*3=3 2*3=6 3*3=9
* 1*4=4 2*4=8 3*4=12 4*4=16
* ....9*9=81
*
* 2.打印出 1-100 之间所有的质数
*/
//创建外层循环，用来控制乘法表的高度
for(var i=1 ; i<=9 ; i++ ){
//创建一个内层循环来控制图形的宽度
for(var j=1 ; j<=i ; j++){
document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
}
//输出一个换行
document.write("<br />");
}
</script>
<style type="text/css">
body{
width: 2000px;
}
span{
display: inline-block;
width: 80px;
}
</style>
</head>
<body>
</body>
</html>
其四、结果为：
// 一进入页面后的页面展示：
Ⅹ、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
