流程控制

就是来控制代码按照何种顺序来执行，流程控制有三种结构：顺序结构、分支结构、循环结构

顺序流程控制

程序按照代码先后顺序、依次执行

分支流程控制

JS中提供两种分支结构语句：if语句、switch语句

if 语句

if语法结构：

//条件成立则执行代码，否则什么也不做
if (条件表达式) {
	//执行的语句
}

案例：进入网吧
弹出一个输入框，要求用户输入年龄，如果年龄大于等于18则运行进入网吧

var age = prompt('请输入年龄');
if (age >= 18) {
	alert('允许进入网吧');
}

if else双分支语句

语法结构：

if (条件表达式) {
	//语句1
} else {
	//语句2
}

注意： else后面直接跟大括号{}，不跟小括号()
案例：

var age = prompt('请输入年龄');
if (age >= 18) {
	alert('允许进入网吧');
} else {
	alert('禁止未成年进入网吧');
}

案例： 判断闰年
接收用户输入的年份，如果是闰年就弹出闰年，否则弹出平年.
算法：可以被4整除且不能被100整除的为闰年或者说能够被400整除的是闰年

var year = prompt('请输入年份');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
	alert('是闰年');
} else {
	alert('不是闰年');
}

案例：判断是否中奖
接收用户输入的姓名来判断是否中奖，如果输入的是刘德华则提示中了5块，否则提示没中奖

var user_name = prompt('请输入用户名');
if (user_name == '刘德华') {
	alert('嘻嘻，中了5块钱');
} else {
	alert('呜呜，没中奖');
}

if else多分支语句

if else 多分支结构

if (条件表达式1) {
	//语句1
} else if (条件表达式2) {
	//语句2
} else if (条件表达式3) {
	//语句3
} else {
	//语句4
}

案例：判断成绩级别

var score = prompt('输入用户成绩');
score = parseFloat(score);
if (score >= 90) {
	alert('A');
} else if (score >= 80) {
	alert('B');
} else if (score >= 70) {
	alert('C');
} else if (score >= 60) {
	alert('D');
} else {
	alert('E');
}

三元表达式

由三元运算符组成的式子，我们称为三元表达式。语法如下：

条件表达式 ？表达式1 ：表达式2

说明：若条件表达式为真则返回表达式1的值，否则返回表达式2的值。

//条件表达式 ？表达式1 ：表达式2
var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result);

案例：数字补零
要求：用户输入数字，如果数字小于10，则在前面补0，比如：01，09，如果数字大于10则不需要补0，如20。

var num = prompt('请输入数字');
var result = num > 10 ? num : 0 + num;
console.log(result);

分支流程控制switch语句

switch也是多分支语句，语法结构如下：

switch (表达式) {
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    case value3:
        执行语句3;
        break;
    ...
    default:
        执行最后的语句;
}

说明：

• default里面的语句是在没有value值与switch里的表达式相匹配的时候才执行的。
• switch里面的值和case里面的值必须全等===的时候才算匹配成功。
• 如果当前的case里面没有break则不会退出switch，而是无论是否匹配，继续执行下一个case，直达遇到下一个break。

switch (2) {
       case 1:
           console.log('这是1');
           break;
       case 2:
           console.log('这是2');
           break;
       case 3:
           console.log('这是3');
           break;
       default:
           console.log('没有匹配结果');
     }

switch语句和if else if语句的区别

• 当分支较少时，if…else语句的执行效率比switch语句高
• 当分支较多时，switch语句的执行效率比较高，而且结构更清晰
• 一般情况下，它们两个语句可以相互替换
• switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，常用于范围判断(大于.等于某个范围)
• switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次。

案例1：
判断时间段，比如用户输入12点弹出中午好，用户输入18点弹出傍晚好，用户输入23点弹出深夜好。

var time = prompt('请用户输入时间');
if (time <= 4) {
    alert('清晨');
} else if (time <= 8) {
    alert('早上');
} else if (time <= 10) {
    alert('上午');
} else if (time <= 13) {
    alert('中午');
} else if (time <= 16) {
    alert('下午');
} else if (time <= 18) {
    alert('傍晚');
} else {
    alert('晚上');
}

案例2：
比较两个数的最大值（用户依次输入两个值，最后弹出最大的那个值）

var num1 = prompt('请输入第一个数字');
var num2 = prompt('请输入第二个数字');
var result = num1 > num2 ? alert('较大的数是' + num1) : alert('较大的数是' + num2);
console.log(typeof num1);

案例3：
用户输入一个数，来判断是奇数还是偶数。

var num = prompt('请输入数字');
if (num % 2 == 0) {
    alert(num + '是偶数');
} else {
    alert(num + '是奇数');
}

案例4：
根据用户输入的数值（数字1~数字7），返回星期几

var day = prompt('请输入1~7之间的一个数字');
switch (day) {
    case '1':
        alert('星期1');
        break;
    case '2':
        alert('星期2');
        break;
    case '3':
        alert('星期3');
        break;
    case '4':
        alert('星期4');
        break;
    case '5':
        alert('星期5');
        break;
    case '6':
        alert('星期6');
        break;
    case '7':
        alert('星期天');
        break;
    default:
        alert('数字超出范围');
}

案例5：
接收班长口袋里的钱数，若大于等于2000则请大家吃西餐。若小于2000，大于等于1500，请大家吃快餐。若小于1500，大于等于1000，请大家喝饮料。若小于1000，大于等于500，请大家吃棒棒糖。否则提醒班长下次把钱带够。

var money = prompt('班长口袋里的金额');
if (money >= 2000) {
    alert('班长请大家吃西餐');
} else if (money >= 1500) {
    alert('班长请大家吃快餐');
} else if (money >= 1000) {
    alert('班长请大家喝饮料');
} else if (money >= 500) {
    alert('班长请大家吃棒棒糖');
} else {
    alert('班长记得下次把钱带够');
}

循环

在JS中主要有以下三种类型的循环：

• for循环
• while循环
• do…while循环

for循环

语法结构如下：

for (初始化变量； 条件表达式； 操作表达式) {
    //循环体
}

案例1：
打印100句“你好”

for (var i = 1; i <= 100; i++) {
    console.log('你好！');
}

案例2：
1+2+3+…+100

var sum = 0;
for (var i = 1; i <= 100; i++) {
    //sum = sum + i;
    sum += i;
}
console.log(sum);

案例3：
1到100之间数的平均值

var aver, sum = 0;
for (var i = 1; i <= 100; i++) {
    sum += i;
}
aver = sum / (i - 1);
console.log(aver);

案例4：
1到100之间所有奇数值之和and偶数之和

var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 2 == 1) {
        odd += i;
    } else {
        even += i;
    }
}
console.log(odd);
console.log(even);

案例5：
1到100之间所有可以被3整除的数之和

var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
        sum += i;
    }
}
console.log(sum);  // 1683

案例6：
求学生成绩
要求：用户输入班级人数，之后以此输入每个学生成绩，最后打印出该班级总的成绩和平均成绩。

var sum = 0;
var aver, score;
var num = prompt('请输入班级总人数');
for (var i = 1; i <= num; i++) {
    score = prompt('请输入第' + i + '个学生的成绩');
    sum += parseFloat(score);
}
aver = sum / num;
alert('班级总成绩是' + sum);
alert('班级平均成绩是' + aver);

案例7：
一行打出五颗星
要求：利用追加字符串的方式

//方法1：
console.log('★★★★★'); //★★★★★

//方法2：
for (var i = 1; i <= 5; i++) {
    console.log('★'); //5★
}

//方法3：
var str = '';
for (var i = 1; i <= 5; i++) {
    str += '★';
}
console.log(str); //★★★★★

双重for循环

语法格式如下

for (外层初始化变量; 外层条件表达式; 外层操作表达式) {
    for (里层初始化变量; 里层条件表达式; 里层操作表达式) {
        //执行语句
    }
}

案例1：
打印5行5列星星

//打印5行5列的星星
var str = '';
for (var i = 1; i <= 5; i++) {
    for (var j = 1; j <= 5; j++) {
        str = str + '☆';
    }
    str = str + '\n';
}
console.log(str);

案例2：
打印n行m列是星星
要求：用户输入行数和列数，之后在控制台打印用户输入的行数和列数的星星。

var n = prompt('请用户输入行数');
var m = prompt('请用户输入列数');
var str = '';
for (var i = 1; i <= n; i++) { // 控制行数
    
    for (var j = 1; j <= m; j++) { //  控制列数   
        str = str + '☆';
    }
    str = str + '\n';
}
console.log(str);

案例3：
打印倒三角

// 写法1：
var row = prompt('输入行数');
var col = prompt('输入列数');
var str = '';
for (var i = 1; i <= row; i++) {
    for (var j = 1; j <= col; j++) {
        str = str + '☆';
    }
    str = str + '\n';
    col = col - 1;
}
console.log(str);


// 写法2：
var row = prompt('输入行数');
var col = prompt('输入列数');
var str = '';
for (var i = 1; i <= row; i++) {
    for (var j = i; j <= col; j++) {
        str = str + '☆';
    }
    str = str + '\n';
}
console.log(str);

案例4：
打印正三角形

// 写法1：
var str = '';
for (var i = 10; i > 0; i--) {
    for (var j = i; j <= 10; j++) {
        str = str + '☆';
    }
    str = str + '\n';
}
console.log(str);

//写法2：
var str = '';
for (var i = 1; i <= 10; i++) {
    for (var j = 1; j <= i; j++) {
        str = str + '☆';
    }
    str = str + '\n';
}
console.log(str);

案例5：
99乘法表

var str = '';
for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        str = str + j + 'x' + i + '=' + i * j + '\t'; //  '\t'是tab键
    }
    str = str + '\n';
}
console.log(str);

while循环

语法格式

while (条件表达式) {
    //循环体
}

相比较for循环的优点之处就在于可以做一些复杂的条件判断
案例：
弹出一个提示框“你爱我吗？”如果输入的不是“我爱你”，就一直弹出提示框“你爱我吗？”

var str = prompt('你爱我吗？');
while (str != '我爱你') {
    str = prompt('你爱我吗？');
}
alert('我也爱你呀');

do…while循环

语法结构：

do {
    //循环体
} while (条件表达式)

与while循环的不同之处在于do while是先执行以此循环体再判断条件，所以do while循环体至少执行一次。

案例：
打印人的一生

var age = 1;
do {
    console.log('今年' + age + '岁');
    age++;
} while (age <= 100)

案例：
计算1+2+3+…+100

var sum = 0;
var i = 1;
do {
    sum += i;
    i = i + 1;
} while (i <= 100)
console.log(sum);

案例：
弹出一个提示框“你爱我吗？”如果输入的不是“我爱你”，就一直弹出提示框“你爱我吗？”

do {
    var mesg = prompt('你爱我吗？');
} while (mesg !== '我爱你') //若满足while里面的条件表达式就一直执行  !==是指不全等
alert('我也爱你呀！');

循环小结

• JS中循环有for . while、do while
• 三个循环很多情况下都可以相互替代使用
• 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
• while和do…while可以做更复杂的判断条件，比for循环灵活一些
• while和do…while执行顺序不一样，while先判断后执行，do…while先执行一次，再判断执行
• while和do…while执行次数不一样，do…while至少会执行一次循环体，而while可能一次也不执行

continue

用于跳出本次循环，继续执行下一次循环，本次循环体中continue之后的代码就会少执行一次。

案例：
求1~100之间，除了能被7整除之外的整数和

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

break

之前提到break可以跳出整个switch语句，break还可以跳出整个for循环

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;
    }
    console.log('我正在吃第' + i + '个包子');
}
// 我正在吃第1个包子
// 我正在吃第2个包子

练习

接收用户输入的用户名和密码，若用户名为admin,密码为123456则提示用户登陆成功，否则让用户一直输入

do {
    userName = prompt('请输入用户名');
    password = prompt('请输入用户密码');
} while (userName != 'admin' && password != '123456')
alert('登陆成功！');

求整数1~100的累加值，但要求跳过所有个位数为3的数（用continue实现）

var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 10 == 3) {
        continue;
    }
    sum = sum + i;
}
console.log(sum);

模拟ATM机

// 里面现存有100块钱。
        // 如果存钱，就用输入钱数加上先存的钱数之后弹出显示余额提示框
        // 如果取钱，就减去取的钱数，之后弹出显示余额提示框
        // 如果显示余额，就输出余额
        // 如果退出， 弹出退出信息提示框
        var balance = 100;
        flag = 1;
        while (flag) {
            var mesg = prompt('请输入您需要的操作序号\n1.存钱\n2.取钱\n3.显示余额\n4.退出');
            switch (mesg) {
                case '1':
                    save = prompt('请输入存入金额');
                    balance = parseFloat(save) + balance;
                    alert('当前余额为' + balance);
                    break;
                case '2':
                    pay = prompt('请输入取款金额');
                    balance = balance - pay;
                    alert('当前余额为' + balance);
                    break;
                case '3':
                    alert('当前余额为' + balance);
                    break;
                case '4':
                    alert('正在退出');
                    flag = 0;
                    break;
                default:
                    alert('序号输入错误');
                    break;
            }
        }