JavaScript流程控制-分支与循环

87 阅读4分钟

在一个程序执行的过程中,各代码执行的顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解:流程控制就是来控制我们的代码按照什么顺序来执行的

流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码的执行顺序

顺序流程控制

顺序结构是程序中最简单、最基本的流程控制,他没有特定的语法结构,程序会按照代码的先后顺序依次执行,程序中大多数的代码都是这样执行的。

分支流程控制

由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同而结果。


JS语言提供了两种分支结构语句:

  • if语句
  • switch语句

if语句

if(条件表达式){
    //执行语句;
}

如果if 里面的条件表达式的结果为true,则执行大括号里的 执行语句
如果if 条件表达式结果为false,则不执行大括号里的语句,执行if语句后面的代码

双分支语句if-else

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

如果条件表达式为真,执行语句1 否则 执行语句2

if-else if语句(多分支语句)

利用多个条件来选择不同的语句执行,得到不同的结果,是多选一的过程

if(条件表达式1){
    //语句1;
}else if(条件表达式2){
    //语句2;
}else if(条件表达式3){
    //语句3;
}else{
    //最后的语句;
}

三元表达式

可以理解为是简化的 if-else语句
语法结构:

    条件表达式:?表达式1:表达式2

如果条件表达式的结果为 则返回表达式1的值
如果条件表达式的结果为 则返回表达式2的值

var num = 10;
var result = num > 5 ? '是的''不是的'console.log(result); // 输出是的

switch语句

switch语句也是多分支语句 也可以实现多选一

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

利用我们的表达式的值case后面的选项值相匹配, 如果匹配上 就执行该case里面的语句, 如果 都没有匹配上,那么就执行default里的语句

  • 在开发里面,表达式我们经常写成变量
  • 我们表达式的值和case里面的值相匹配的时候必须是全等(===),必须是值和数据类型一致才可以
  • break 可以不写,但不写就会顺序执行

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

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

循环结构

目的:可以重复执行某些代码
在程序中,一组被重复执行的语句称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体以及循环的终止条件组成的语句,称之为循环语句

JS中的循环

在JS中,主要有三种类型的循环语句:

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

for循环

for(初始化变量;条件表达式;操作表达式){
    //循环体
}
  • 初始化变量:就是用var声明的一个普通变量,通常用作计数器使用
  • 条件表达式:就是用来决定每一次循环是否继续执行,即终止的条件
  • 操作表达式:每次循环最后执行的代码,经常用于我们计数器变量的更新(递增或递减)
for(var i=1;i<=100;i++){
    console.log('Hello');
}
  1. 首先执行var i = 1; 但是这句话只执行一次
  2. 再执行 i<=100;判断 i 是否满足条件,满足就去执行循环体,否则退出循环
  3. 最后执行 i++;
  4. 接着再去执行 i<=100;判断是否满足条件,满足就去执行循环体,否则退出循环

for循环重复执行相同代码

1. 循环循环体

for(var i=0;i<=100;i++){
    console.log('好好学习')
}

2. 用户控制输出次数

var num = prompt('输入循环次数:');
for(var i = 1 ; i < = num ; i++){
    console.log('快去学习');
}

for 循环执行不同代码

for循环可以执行不同的代码 是因为我们有计数器变量 i 的存在,i 每次循环 都会变化

举个例子:

//1-100之间的整数累加和
var sum=0;
for(var i=1;i<=100;i++){
    sum+=i;
}
console.log(sum); // 5050
var num=prompt('请输入学生的人数:');
var sum=0; //总分
var average=0; // 均分
for(var i=1;i<=num;i++){
    var score=prompt('请输入第'+i+'名学生的成绩');
    //从prompt取过来的值是字符串型的,所以需要转化为数字型
    sum+=parseFloat(score);
}
alert('总成绩为'+sum+'分');
average=sun/num;
alert('平均成绩为'+average+'分')

双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。例如在for循环语句中,可以再嵌套一个for循环,这样的for循环语句我们称为双重for循环

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

可以把里层的循环看做外层循环的语句
外层循环执行一次,里面就执行全部

看这个代码帮助你理解:

for(var i=1;i<=3;i++){
    console.log("这是外层循环第"+i+"次")
    for(var j=1;j<=3;j++){
        console.log('这是里层循环第'+j+'次')
    }
}

双重for循环打印5行5列星星

        str='';
        for(var i=1;i<=5;i++){
        // 外层循环打印5行
            for(var j=1;j<=5;j++){
            // 内则循环负责一行打印5个
                str=str+'☆'; //追加字符串
            }
            str=str+"\n"
        }
        console.log(str)

还可以试试打印正三角形和倒三角形

双重for循环实现九九乘法表

        str='';
        for(var i=1;i<=9;i++){ //九行
            for(var j=1;j<=i;j++){
                str+=j+'×'+i+'='+i*j+'\t';;
            }
            str+='\n';
        }
        console.log(str);

while循环

while语句可以在条件表达式为真的情况下,循环执行指定的一段代码,直到表达式不为真的时候结束循环。

while(条件表达式){
    循环体代码;
}
  • 条件表达式为true,就执行循环体代码,为false就执行while语句后面的代码
  • 循环体代码执行完后,程序会继续判断条件表达式,为true就继续执行循环体,直到为false时,整个循环才会结束。
  • 里面应该有计数器,初始化变量
  • 里面也应该有操作表达式,防止死循环
var i=prompt('好好学习了吗?');
while(i!=='学了'){
    i=('好好学习了吗?')
}
alert('继续加油!');

do while 循环

是while语句的变体

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

与while语句的不同之处do while语句会先执行一次循环体,再判断条件。如果表达式的值为,则继续执行循环体,否则退出循环,继续执行后面的代码。

注意:do while循环语句至少会执行一次循环体代码

continue

continue关键字用于立即跳出本次循环, 继续下一次循环(本次循环体中continue之后的代码就会至少执行一次)

举例:

//求1-100之间,除了能被7整除之外的整数的集合
var sum = 0for(var i=1;i<=100;i++){
    if(i%7===0){
        continue;
    }
    sum+=i;
}

break

break 关键字用于立即跳出整个循环(循环结束)

for(var i=1;i<=5;i++){
    if(i==3){
    break;
    }
}