JavaScript控制结构
一.if选择结构
程序的结构有如下三种形式
-
顺序结构：由上自下，从左至右的顺序执行结构。是在无其他特定要求时默认的执行结构。
-
选择结构：判断给定的条件，根据判断的结果来控制程序的流程。
-
循环结构：程序中需要反复执行某个功能而设置的一种程序结构。
在日常生活中，我们无时无刻都在面临不同选择。做这件事还是做那件事？不同的选择也会造就不同的结果。
而在编程世界中，程序也需要根据不同的选择来判断应该做哪些事。一个程序往往包含了数个选择分支，来构建更为完善的功能。
1. if结构
-
语法
if(条件)
{
//JavaScript语句;
}
-
流程图
-
注意事项
-
关键字 if 后面跟随圆括号
-
用于判断的条件放到圆括号里。通常判断条件是一个返回真假值的 关系运算 或 逻辑运算，也可以直接是一个真值或假值
-
大括号中可以包含我们希望编写的代码内容，该内容仅仅会在 if 后圆括号中的判断条件成立（ 结果为真值 ）的情况下运行。
-
缩进：在大括号中的代码片段，应进行编码缩进（使用 tab 键），以明显区分当前的选择结构的内容与主体内容的差别，宜于代码阅读。
-
-
假值条件
在 JavaScript 中，判断条件遵循假值原则。即当示例中的“condition”的结果是
“”、''、±0、NaN、undefined、null、false时，条件结果为false，大括号中的代码将不会执行
示例中“condition”可能是一个表达式、函数、变量等，但最终都必须表示一个具体的布尔值。
2.if...else结构
-
语法
if(条件)
{
//JavaScript语句1;
}
else
{
//JavaScript语句2;
}
-
流程图
![]()
-
案例1：判断某年是否为闰年
var year=prompt("请您输入年份");
if (year%400==0||(year%4==0&&year%100!=0)) {
// console.log(year+"年是闰年");
//ES6的模板字符串
console.log(`${year}年是闰年`);
}else{
//ES5连接字符串与变脸的形式是采用+的形式来连接
console.log(year+"年是平年");
}
3 三元表达式
判断条件?返回真值：返回假值
4. 多重if结构
-
语法
if ( 条件1 ) {
// JavaScript语句1
}
else if ( 条件2 ) {
// JavaScript语句2
}
else {
// JavaScript语句3
}
-
流程图
-
案例：输入一个月份，判断当月的天数
var month=2,days;
if(month==2){
days=((year%4==0&&year%100!=0)||year%400==0)?29:28;
}else if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
days=31;
}else{
days=30;
}
console.log("当月是:"+days);
二.switch结构
-
语法
switch (表达式)
{
case 常量1 :
javaScript语句1;
break;
switch语句是多重条件判断，用于多个值相等的比较
switch表达式的值和case表达式的值进行比较，两值相等就执行case对应的分支语句。分支语句可有有任意多个，如果没有任何case表达式的值与switch表达式值相等就执行default的默认分支语句。
因为执行完分支语句后不会自动退出switch语句，会继续执行后续的分支语句，这叫做switch的穿透，为避免穿透，需要在每条分支语句后添加break, 跳出switch语句
三.循环结构的概念
1.现实生活中的循环
-
睡觉，吃饭
-
上课
-
旋转的车轮
-
25份试卷的打印
循环的特点
-
动作行为相同
-
所有循环都有终止条件
循环的分类
-
循环次数确定循环
-
循环次数不确定的循环
2.什么是循环
循环是指事物周而复始的运动或变化。这样的过程（循环周期、变化方式等）有的时候是可预测的，有的时候又并不能完全确定
3.程序中的循环
在程序世界中，也有许多问题需要使用循环的方式去解决。比如，电子闹钟每天定时启动、数万条数据逐一显示等等。
需要循环处理的问题往往具备以下特性：
-
具有相似性的行为；
-
具备多次处理的必要；
4.为什么要使用循环
计算从 1 开始到 n 的累加值，并显示每次的累加结果和计算次数。
当n=5的时候
当n=100时，我该怎么办？？？？？
编程语言的设计者在设计语法时，会着重考虑如何才能更好的简化开发流程、提高开发效率、提供更多的可扩展功能。而循环结构，就是一种提供了快速和简单的方式去处理一些重复的事情的方式
四.while循环
语法
//初始部分
while( 循环条件 ) {
//循环操作
//迭代部分
}
流程图
while循环是一种先判断，后循环的一种循环条件，特点：先判断、后循环，如果循环条件不满足则一次循环也不做
while可以完成循环次数确定的循环，也可以完成循环次数不确定的循环
//例子：在页面上输出10词，我要好好学习，天天向上
/*
while循环的语法
初始化
while(循环条件){
循环操作;
迭代变量;
}
*/
//第1步：初始化变量
var i=0;
//第2步：套用while循环结构，并明确指定循环的终止条件
while(i<10){
//第3步：编写循环体的内容
document.write(`第${i+1}次说:我要好好学习，天天向上<br>`);
//第4步：完成循环中变量的迭代(更新)，如果不完成此步操作，就会导致死循环
i++;//累加
}
循环的应用
输入考试成绩，如果考试成绩不及格必须要学习，如果考试成绩合格可以通关
var score=prompt("请输入你的考试成绩:");
while(score<60){
console.log("*******学习清单********");
console.log("早上要进行晨考");
console.log("听课");
console.log("课堂练习");
console.log("写作业");
console.log("**********************");
score=prompt("请输入您的本次考试成绩:");
}
alert("谢谢您通过本次学习");
求1-100的累加
var i=1;
var sum=0;
while(i<=100){
//sum=sum+i;
sum+=i;
i++;
}
console.log(sum);
求出1-100之间的偶数之和，奇数之和
var i=1;
var esum=0;
var osum=0;
while(i<=100){
if(i%2==0){
esum+=i;
}else{
osum+=i;
}
i++;
}
console.log('偶数之和为',esum);
console.log('奇数之和为',osum);
五.do..while循环
语法
do{
需要执行的代码
}
while (条件);
流程图
do..while循环和while循环的区别和联系
共同点：都能完成循环次数确定和不确定循环操作
不同点
-
while循环是先判断后执行的循环操作，do...while是先执行后判断。
-
循环条件不成立，while循环一次都执行，do...while是要执行一次。
六.for循环
语法
for (初始部分; 循环条件; 条件迭代) {
//循环执行的语句
}
执行顺序
var sal=10;
for(var i=0;i<10;i++){
sal+=0.05*sal;
}
console.log(sal);
案例：求1-100之间奇数之和
var sum=0;
for(var i=0;i<=100;i++){
if(i%2!=0){
sum+=i;
}
}
console.log("奇数之和:"+sum);
案例：求出1-1/2+1/3-1/4.....1/100的和
var sum=0;
for(var i=1;i<=100;i++){
if(i%2==0){
sum-=1/i;
}else{
sum+=1/i;
}
}
console.log(sum);
案例：求10的阶乘
var sum=1;
for(i=10;i>0;i--){
sum*=i;
}
console.log(sum);
案例：求水仙花数
for(var i=100;i<1000;i++)
{
var a=parseInt(i/100);
var b=parseInt((i-a*100)/10);
var c=parseInt(i%10);
if(i==a*a*a+b*b*b+c*c*c)
{
document.write(i+"<br/>");
}
}
七.嵌套循环结构
语法
for ( 声明变量; 循环条件; 循环结尾) {
// 外层循环代码
for ( 声明变量; 循环条件; 循环结尾) {
// 内层循环代码
}
// 外层循环代码
}
课堂案例
1.打印三角形
2.完成9*9乘法表
八.break和continue
1.break
-
break语句用于终止某个循环，使程序跳到循环块外的下一条语句
-
在循环中位于break后的语句将不再执行
-
break 语句不仅可以用在for循环中，也可以用在其他循环中
var count=0;
var sum=0;
for(var i=0;i<5;i++){
var score=~~prompt(`请输入第${i+1}名同学的考试成绩:`);
if(score<0){
break;
}
count++;
sum+=score;
}
if(count==5){
var avg=~~sum/5;
console.log(`总分数为${sum},平均分为:${avg}`);
}else{
console.log("没有完成所有学生成绩录入");
}
2.continue
-
continue用于循环
-
continue语句只能用在循环结构中
-
continue退出本次循环，继续后面的循环
案例：输出100以内的奇数，不包含3的倍数
for(i=0;i<100;i++){
if(i%2!=0){
if(i%3==0){
continue;
}
console.log(i);
}
}
案例：录入10名同学的考试成绩，并且统计在80分以上的人数,并且统计80分以上的同学的平均分
var count=0;
var sum80=0;
for(var i=0;i<10;i++){
var score=~~prompt(`请输入第${i+1}名同学的考试成绩:`);
if(score<80){
continue;
}
count++;
sum80+=score;
}
var avg80=parseFloat(sum80/count);
console.log(`考试成绩在80以上的人数是${count}人`);
console.log(`80以上的学生的平均分是${avg80}`);
break和continue的区别
两种都是跳出语句
-
break不仅可以用于循环，而且还可以在switch语句中使用，但continue只能用于循环
-
break是直接终止循环，continue跳出本次循环，继续下一次循环
九.死循环
无法靠自身控制结束的循环，称为死循环。
但是，死循环也可以解决一些问题，
比如：作业：篮球从5米高的地方掉下来，每次弹起的高度是原来的30%，经过几次弹起，篮球的高度是0.1米。
不知道要循环几次的问题，利用死循环，每判断一个条件，知道满足条件，利用break跳出整个循环。
十.Debug工具
我们在写程序的时候，会经常出现一些问题也叫bug（如程序运行报错，结果与预期不符等），面对这些问题，特别是对于初学者而言，会有很大的困扰，在解决问题的过程中会消耗大量的时间，因为没有掌握解决问题的方式
在 Chrome浏览器中的审查元素中，找到 Source 选项，点击当前的页面，在前面点击一个小箭头。
打断点，可以清楚的看清楚整个流程的顺序，帮助你分析当前的程序是否出错。
比如，你鼠标放在 i 变量上，会出现当前的 i 的值。
断点：可以让我们看见程序一行一行执行的顺序。
1、在浏览器审查元素中点击打断点；
2、在代码中，需要断点的位置，输入关键字 debugger 进行打断点；
下面的代码，进行打断点，理清其顺序：
for(var i=0;i<7;i++){
debugger;
for(var j=7;j>i;j--){
document.write('A');
}
for(var k=0;k<i;k++){
document.write("B");
}
document.write("<br>");
}
浙公网安备 33010602011771号