流程控制

在任何一门程序设计语言中，都需要支持满足程序结构化所需要的三种流程控制:

顺序控制
分支控制（条件控制）
循环控制

顺序控制：在程序流程控制中，最基本的就是顺序控制。程序会按照自上而下的顺序执行。

分支流程控制

if语句
switch语句

if语句【重要】

分类：单分支，双分支，多分支，分支嵌套

// 单分支
if (条件表达式){代码段
}
// 双分支
if (条件表达式) {代码段1 
}else {代码段2
}
// 多分支
if (条件表达式1){代码段1
} else if (条件表达式2){代码段2
} else if (条件表达式3){代码段3
}else{代码段4
}

()中可以是一个值，也可以是一个表达式

// 判断成绩是否及格
// 单分支
var score = 78;
if(score>=60 && score<=100){console.log('及格');
}
// 双分支
if(score>=60 && score<=100){console.log('及格');
}else{console.log('不及格');
}
// 双分支 改写 三元运算符
var res = score>=60&& score<=100?'及格':'不及格';
console.log(res);
// 多分支
var score = 59;
if(score>=60 && score<=100){console.log('及格');
}else if(score>=0 && score<=59){console.log('不及格');
}else{console.log('输入错误！');
}
// 分支嵌套
var score = 59;
if(score>=60 && score<=100){if(score>=85){console.log('优秀');}else if(score>=75){console.log('良好');}else{console.log('中等');}
}else if(score>=0 && score<=59){console.log('不及格');
}else{console.log('输入错误！');
}

2.2 Switch【掌握】

switch (变量){case 值1:代码段;break;case 值2:代码段;break;...default:代码段;
}

（）只能是变量或值，不能是表达式

var d = new Date();
console.log(d); // 获取日期时间对象
var week = d.getDay(); // 获取星期几
switch (week) {case 0:console.log('星期天');break;case 1:console.log('星期一');break;case 2:console.log('星期二');break;case 3:console.log('星期三');break;case 4:console.log('星期四');break;case 5:console.log('星期五');break;case 6:console.log('星期六');break;
}

对比（区别）：什么时候用if，什么时候用switch

if：条件是一个范围或者是具体的值

switch：条件是一个具体的值

能够使用switch实现的判断，都可以使用if来实现但是，能够使用if语句实现的判断，不一定能使用switch实现

案例：小游戏

    <button id='btn1'>唱歌</button><button id='btn2'>讲故事</button><button id='btn3'>说英语</button>
</body>
<script>var btn = document.getElementsByTagName('button');for(var i=0;i<btn.length;i++){// console.log(btn[i]);btn[i].onclick = function(){// this 点击的是谁，获取的就是谁// console.log(this);// if(this.innerText=='唱歌'){//     console.log('两只老虎。。。。');// }else if(this.innerText=='说英语'){//     console.log('ABCDEFG。。。。');// }else if(this.innerText=='讲故事'){//     console.log('从前有个山。。。。');// }switch(this.innerText){case '唱歌':console.log('两只老虎。。。。');break;case '说英语':console.log('ABCDEFG。。。。');break;case '讲故事':console.log('从前有个山。。。。');break;}}}
</script>

循环控制语句

一般来说，在循环结构中动态改变循环变量的值时，建议使用 while 结构，而对于静态的循环变量，则可以考虑使用 for 结构。

运算本质上没什么区别，while变量声明在外面。
for 三个条件写在一起，语法更加紧凑。
for循环是while的语法糖

3.1 while语句【掌握】

While 循环会在指定条件为真时循环执行代码块。 While循环，先进行条件判断，再执行循环体的代码

while (条件表达式){ 循环体 
}格式：while(条件){执行条件}（while不是条件判断，不转换布尔值，只条件判断）while循环遵循的规则：只有条件成立时，循环才会执行
特别注意：在循环中，设定条件时，一定要注意别设置死循环（没有终点）

注意：当前循环中，如果不满足条件，一次都不会执行

var i= 1;
while(i<=10){console.log(i);i++;
}

3.2 do......while【了解】

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。 do while循环，先执行循环体代码，再进行条件判断。至少执行一次循环体的代码。

do {代码段
} while (条件表达式)do...while循环格式： do{执行程序}while(条件)do...while循环遵循的规则：           不管条件是否成立，都会先执行一次程序执行完后，再判断条件是否循环

注意：当前循环中，代码至少执行一次

var i=1;do{i++; // 2console.log(i);}while(i<=10)

3.3 for【重要】

for (循环变量初始化表达式; 循环条件表达式; 更新循环变量表达式) {循环体
}格式： for(var 初始化变量;循环执行条件;变量如何变化){执行程序}for循环遵循的规则：  只有条件成立时，循环才会执行for循环是while循环的语法糖他们两的功能完全一样。

注意：

循环变量可以定义在for 循环结构体外
没有更新循环变量会变成死循环
循环条件中的‘；’不能省略
for循环只能来循环数组

基础案例：循环输出5个div标签

for(var i=0;i<5;i++){document.write('<div>1</div>')
}

基础案例：循环输出1-100

for(var i=1;i<=100;i++){document.write(i);
}

案例：计算1+2+...100=5050的和

var sum=0
for(var i=1;i<=100;i++){sum += iif(i<100){document.write(i+'+');}else{document.write(i+'='+sum)}
}
console.log(sum)

案例二：循环输出table表格，创建四行5列的表格

document.write('<table border="1">')for(var j=1;j<=4;j++){document.write('<tr>')for(var i=0;i<=3;i++){document.write('<td>@</td>');}document.write('</tr>')}
document.write('</table>')

案例三：打印一个八行三列的表格（隔行换色）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>document.write('<table border="1" width="500">');for(var i=1;i<9;i++){if(i%2 == 1){document.write('<tr bgcolor="red">');document.write('<td>1</td><td>1</td><td>1</td>')document.write('</tr>');}else{document.write('<tr bgcolor="green">');document.write('<td>1</td><td>1</td><td>1</td>')document.write('</tr>');}  }document.write('</table>');</script>
</body>
</html>

案例四：点击显示一张图片，点击显示多张图片

案例五：判断数组中值哪些是数字类型 var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];

  var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];for(i=0;i<arr.length;i++){// console.log(le);// console.log(typeof arr[i]);// console.log(isNaN(arr[i]));// console.log(Number(arr[i]));if(typeof arr[i] == "number" && !isNaN(arr[i])){// console.log(number);  console.log(arr[i]);}}

案例六：循环实现金字塔效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 50px;height: 50px;margin: 0 5px 5px;display: inline-block;}.red{background-color: #fff;}.green{background-color: green;}</style>
</head>
<body><script>for(i=0;i<6;i++){for(j=0;j<6-i;j++){document.write("<div class='red'></div>")}for(g=0;g<2*i+1;g++){document.write("<div class='green'></div>")}document.write("<br/>")}// document.write("<br/>")</script>
</body>
</html>

案例七：循环实现九九乘法表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 50px;height: 20px;background-color: red;margin: 2px;display: inline-block;color: #fff;font-size: 12px;}</style>
</head>
<body><script>// 循环得行for(var i=1;i<=9;i++){// 循环列for(var j=1;j<=i;j++){document.write("<div>"+i+"*"+j + "=" + (i*j) +"</div>")}document.write('<br>');}</script>
</body>
</html>

案例八：循环实现阶梯效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 50px;height: 50px;background-color: green;margin: 5px;display: inline-block;}</style>
</head>
<body><script>// for(i=6;i>0;i--){//     for(j=0;j<i;j++){//         document.write("<div></div>")//     }//     document.write("<br/>")// }for(i=0;i<6;i++){for(j=0;j<6-i;j++){document.write("<div class='red'></div>")}document.write("<br/>")}   </script>
</body>
</html>

3.4 for...in【掌握】

for (变量 in 对象) {代码段
}for/in 语句循环遍历对象的属性。循环内的代码块将为每个属性执行一次。

for...in 语句用来遍历对象的每一个属性。每次都将属性名作为字符串保存在变量里
在无法预知对象的任何信息，和循环次数的时候使用
for...in 循环专门用来循环数组和对象的

var arr = [{"name":"Java编程思想","price":78.9},{"name":"python入门宝典","price":59},{"name":"JavaScript程序设计","price":69}
];
for(var i=0;i<arr.length;i++){// console.log(arr[i]);// json - {"name":"Java编程思想","price":78.9}for(key in arr[i]){console.log(arr[i][key]);}
}

跳转语句

4.1 continue【掌握】

continue语句只能应用在循环中（while、do......while、for）语句中用于中止本次循环，根据控制表达式还允许继续进行下一次循环。

var iNum = 0; 
for (var i=1; i<10; i++) {if (i % 5 == 0) {document.write(i);continue;}iNum++;
}
alert(iNum);

4.2 break【掌握】

break语句只能应用在循环（while、do......while、for）或switch语句中 break语句用于退出循环，阻止再次反复执行任何代码或者退出一个switch语句

for (var i=1; i<10; i++) {if (i % 5 == 0) {break;}iNum++;
}
alert(iNum);

区别：

break 和 continue关键字都可以用在 for 和 while 循环结构中，表示跳出循环；

break：退出整个循环；

continue：退出当前这一次循环，继续下一次循环；

流程控制

流程控制

分支流程控制

if语句【重要】

2.2 Switch【掌握】

循环控制语句

3.1 while语句【掌握】

3.2 do......while【了解】

3.3 for【重要】

3.4 for...in【掌握】

跳转语句

4.1 continue【掌握】

4.2 break【掌握】

最新新闻

热搜词