06-JavaScript的流控制语句

06-JavaScript的流控制语句

JavaScript的流控制语句主要分为三大类：

1. 顺序控制：因为JS是一门解释性语言，所以从上至下按顺序依次执行
2. 分支控制：主要分为if条件语句和swith开关语句
3. 循环控制：主要分为for循环语句、while循环语句、do-while循环语句

1.分支控制

1.1if条件语句

1- 单分支

结构：

if(条件表达式){

语句;

}

例：

// 单分支
var a = 5;
if (a >= 5){
    console.log(a);
}

2- 双分支

结构：

if(条件表达式){

语句;

}else{

语句;

}

例：

// 双分支
var sex = window.prompt('请输入性别');
if (sex == '男'){
    console.log('你是一个帅哥');
}else{
    console.log('你是一个美女');
}

3- 多分支

注意：多分支，找到一个入口后，后面的都不判断了。
强调：一旦找到一个满足条件的入口，执行完毕后，就直接结束整个多分支。

结构：

if(条件表达式1){

//执行

}else if(条件表达式2){

//执行

}else if…{

//可以有多个else if

}else{

//可以没有

}

例：

// 猜年龄游戏
age = prompt('请输入年龄');
age = Number(age);
if (age < 30){
    console.log('你输入的年龄太小了，请往大猜。');
}else if(age > 30){
    console.log('你输入的年龄太大了，请往小猜。');
}else{
    console.log('恭喜，你猜对了！');
}

4- 逻辑与-&&、逻辑或||

逻辑与&&

// 逻辑与&&
var a = 200;
if (a<400 && a > 50){
    console.log('这是我需要的数字');
}

逻辑或||

// 逻辑或||
var a = 200;
if (a % 4 == 0 || a % 100 == 0){
    console.log('这是我需要的数字');
}

1.2swith开关语句

注意：case有几个都行，case后面接的是一个值而不是一个条件表达式（类似shell的case），default可以没有。当case1~n都不满足的时候，则default。default并不一定要在最后。break的作用是满足条件跳出整个switch语句

结构：

switch(条件表达式){

case 常量1:

语句; break;

case 常量2:

语句; break;
…

case 常量n:

语句; break;

default:

语句;

}

例：

// 星期分析
var day = new Date().getDay()
switch(day){
    case 0:
        console.log(day + '--' + 'Sunday');
        break;
    case 1:
        console.log(day + '--' + 'Monday');
        break;
    case 2:
        console.log(day + '--' + 'Tuesday');
        break;
    case 3:
        console.log(day + '--' + 'Wednesday');
        break;
    case 4:
        console.log(day + '--' + 'Thursday');
        break;
    case 5:
        console.log(day + '--' + 'Friday');
        break;
    case 6:
        console.log(day + '--' + 'Saturday');
        break;
    }

2.循环控制

2.1for循环语句

结构：

for循环

for(循环初值;循环条件;步长){

语句; //循环体

}

例：

// for循环
for (i=0;i<=5;i++){
    console.log(i);
}

2.2while循环语句

说明：while循环是先判断再执行语句

结构：

while(循环条件){

语句; //循环体

}

例：

// while循环
var i = 0
while (i<=5){
    console.log(i);
    i++;
}

2.3do-while循环语句

说明：do-while循环是先执行，再判断。

结构：

do{

语句;//循环体

}while(循环条件);

例：

// do-while循环
var i = 0;
do{
    console.log(i);
    i++;
}while(i<=5);

2.4 循环控制练习

练习1：将1-100所有是2的倍数再控制台中打印。使用while循环编写

// 将1-100所有是2的倍数再控制台中打印。使用while循环编写
var i = 1;
while (i<=100){
    if (i%2==0){
        console.log(i);
    }    
    i++;
}

练习2：将1-100所有是2的倍数再控制台中打印。使用for循环编写

// 将1-100所有是2的倍数再控制台中打印。使用for循环编写
for (i=1;i<=100;i++){
    if (i%2==0){
        console.log(i);
    }
}

练习3：求1-100之间所有数的和

// 求1-100之间所有数的和
// for循环
var i = 1, sum =0;
while (i<=100){
    sum += i;
    i++;
}
console.log(sum);

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

练习4：在浏览器中输出直角三角形

// 练习4：在浏览器中输出直角三角形

width = prompt('请输入直角三角形的长')

for (i=1;i<=width;i++){
    for (j=1;j<=i;j++){
        document.write('*');
    }
    document.write('<br>');
}

练习5：等腰锐角三角形

// 练习5：等腰锐角三角形
for(var i=1;i<=6;i++){ //行数
    
    //控制我们的空格数
    for(var s=i;s<6;s++){
        document.write('&nbsp;');
    }

    for(var j=1;j<=2*i-1;j++){
        document.write('*');
    }
    document.write('<br>');
}