流程控制语句

211 阅读7分钟

在JS中,程序执行的单位是行,也就是程序是一行一行的执行的,一般情况下一条语句就是一行。当然,你也可以将多条语句写在一行,但是不推荐大家这么做,因为这样写代码的可读性会降低。 知识点如下:

  • 选择解构
    • if
    • switch
  • 循环解构
    • while
    • do...while
    • for

选择解构

程序在运行过程中如果需要执行选择解构,我们可以使用if和switch两种语句来实现。

if

if语句会先判断一个表达式的布尔值,然后根据该值决定是否执行某些特点的语句。

 
    if(表达式){
        // 语句...
    }
    //或者
    if(表达式) //语句...
    // 当{}中只有一条居于的时候可以省略{}
        

上面的代码可以使用简略的写法,但是不建议咱们同学这么做(因为是新手)。

 
    if(10<20){// 表达式结果为true
        console.log('我执行了!');// 会执行
    }
    console.log('我总会执行');

    if(10>20){// 表达式结果为false
        console.log('我执行了!');// 不会执行
    }
    console.log('我总会执行');

if...else

有时候我们会遇到有两个选项必须选择其中一个的时候可以使用if...else结构。

 
    if(10=='10'){
        console.log('条件为true我执行');// 执行
    }else{
        console.log('条件为false我执行');// 不执行
    }

    if(10==='10'){
         console.log('条件为true我执行');// 不执行
    }else{
         console.log('条件为false我执行');// 执行
    }

if...else结构体和三元表达式的功能是很像的,但是我们需要注意的是三元表达式中只能写入表达式或者值,而if...else语句中可以写入多条语句或者其他的功能性代码。功能类似但是不能等同!

if...else if...else if...

我们也会遇到多个选择条件,这时候使用简简单单的if..else就不能很好的解决问题了,所以JS语言还为我们准备了多重if结构。

 
    if(表达式1){
        console.log('表达式1为真我执行');
    }else if(表达式2){
        console.log('表达式2为真我执行');
    }else if(表达式3){
        console.log('表达式3为真我执行');
    }else{
        console.log('他们都不执行我就执行');
    }

switch

我们再看选择结构中最后一个switch。Switch结构和if...else if...else结构非常像,它们都能够进行对变量的多次判断并给出相应的处理方案。 需求:小明为手机设置了快速拨号功能,按1给父亲打电话,按2给母亲打电话,按3给朋友打电话,按4给110打电话

 
    // 多重if结构实现 
    var callNum = Number(prompt());
    if (callNum==1) {
        console.log('打给父亲');
    }else if(callNum==2){
        console.log('打给母亲');
    }else if(callNum==3){
        console.log('打给朋友');
    }else if(callNum==4){
        console.log('快打110!!!');
    }else{
        console.log('其他的号码随便打');
    }

    // 使用switch结构实现
    var callNum = Number(prompt());
    switch(callNum){
        case 1:
            console.log('打给父亲');
            break;
        case 2:
            console.log('打给母亲');
            break;
        case 3:
            console.log('打给朋友');
            break;
        case 4:
            console.log('快打110!!!');
            break;
        default:
            console.log('其他的号码随便打');
    }

从上面的代码中我们可以看出对于变量的等值判断switch结构要比if结构清晰并且写起来更加舒服。 在switch语句中有一个default选项,它的执行逻辑和if语句中的else部分是一样的,default选项一定是等到其他的部分判断结束之后才会执行。default部分的书写顺序不是固定的,如果你愿意你也可以将default部分放在switch语句的顶部。

    var callNum = Number(prompt());
    switch(callNum){
         default:
            console.log('其他的号码随便打');
            break;
        case 1:
            console.log('打给父亲');
            break;
        case 2:
            console.log('打给母亲');
            break;
        case 3:
            console.log('打给朋友');
            break;
        case 4:
            console.log('快打110!!!');
            break;
    }

在上面的代码中我们将default部分放在了第一个,但是它的执行顺序并不会发生改变,而且我们也在该部分之后放了一个break关键字。 在switch语句中break是必须的,如果缺失了break就会发生switch穿透。 switch穿透是指当switch语句中某一个case被匹配到并且该case下的语句会被执行,当case部分逻辑执行完毕之后如果没有break的话就会一直往下一个case匹配。 也就是说在switch语句中当case被匹配到,程序只有遇到break才会跳出switch。

循环结构

我们学习编程,使用计算机。我们需要知道计算机最大的优势和特点是什么? 是速度,计算机的计算速度极快,我们人类是无法与之媲美的,所以我们应该将一些重复性的劳动交给计算机去做,这样能够充分的利用计算机的优势又能最大程度的解放我们人类自己。 循环操作用于执行重复的操作,它拥有多种形式。而无论是哪一种形式其实都离不开四个组成部分:

  • 1,循环变量:通常作为条件出现
  • 2,条件判断:循环是否执行的依据
  • 3,循环操作:重复执行的部分
  • 4,更新变量:防止循环成为死循环,跳出循环体的重要组成部分

while

我们来看第一种循环结构,while循环。既然是循环语句那么就必然绕不开上述的四个组成部分,不过我们可以稍微放缓一下脚步,一点点的来学习。 首先while循环语句一个循环和一段执行的代码,只要条件为真,就会不断的执行循环体的代码。

    while(条件){
        // 循环体
    }

循环条件一般是以表达式的形式出现的,返回的值是Boolean类型,根据值的true/false来决定循环体是否执行。当然,如果仅仅是这样的话那么这个循环语句就不是一个完整的循环语句。 在浏览器控制台输出100次'hello world!'。

 
    var num = 1;// 初始化循环变量
    while(num <= 100){// 循环变量
        // 循环体
        console.log('第'+num+'次输出:hello world!');
        // 更新变量
        num++;
    }

上面的代码会在num变量的值等于101的时候不满足循环条件,整个循环语句运行结束,跳出循环体,程序接着往下执行。

死循环

我们在编写循环程序的时候一定要注意给循环结构留出一个出口,也就是说循环程序运行到一定的程度必须要结束,否则程序就会进入死循环死循环是指程序一直停留在某一阶段重复执行某一些操作而不会继续执行后面的代码。这种现象对内存资源的消耗是非常巨大的,正常的情况就是内存溢出

    内存溢出(out of memory)通俗理解就是内存不够,通常在运行大型软件或游戏时,软件或游戏所需要的内存远远超出了你主机内安装的内存所承受大小,就叫内存溢出。

下面的代码就是死循环的代码。

 
    // 第一段
    while(true){
        // 循环体
    }

    // 第二段
    var num = 1;// 初始化循环变量
    while(num <= 100){// 循环变量
        // 循环体
        console.log('第'+num+'次输出:hello world!');
        // 更新变量
        // num++;
    }

do...while

Do...while循环,和while循环非常相似,但是他们之前拥有一个绝对的区别点: While循环是先判断后执行,do...while循环是先执行一次再进行判断。

 
    // 正常情况
    var num = 1;
    do{
        console.log('第'+num+'次输出:hello world!');
        num++;
    }while(num <= 100);

    // 非常规情况,表达式的结果为false
    var num = 101;
    do{
        console.log('第'+num+'次输出:hello world!');
        num++;
    }while(num <= 100);

上面的非常规情况下,循环条件从第一次判断就是false,但是do...while循环体依然会执行一次。关于do...while循环语句我们唯一需要清楚记得的就是它的执行顺序。

for

For循环语句是循环操作的另一种形式,可以同时初始化循环变量,设置循环条件和更新循环变量。结构形式如下:

    // 数字表示执行的顺序
    for( 1,初始化循环变量 ; 2,循环条件 ; 4,更新变量 ){
         3,循环体
    }

For循环语句比while循环语句的好处就在于使用for语句可以使得循环语句体的结构更加的清晰。 我们在使用for语句的时候需要注意小括号中的三个表达式:

  • 初始化表达式:确定循环变量的初始值,只会在循环开始的时候执行一次
  • 条件表达式:每次循环都会访问这个表达式,值为真才会往里面执行
  • 更新表达式:在循环体执行结束之后才会执行的表达式

使用for循环打印100次'hello world!'。

 	for( var i=1;i<=100;i++ ){
        console.log('第'+i+'次输出:hello world!');
    }