JavaScript 中的break、continue、return的用法和区别


JavaScript 中的break、continue、return的用法和区别

  • 代码块: 基本上是｛｝大括号之间
  • 这三个关键字可以从用法上，分为两类；
  • break、continue主要用于循环语句中。
    • break 立即停止当前语句，并跳出当前代码块，执行break代码块后面的代码。
    • continue 的作用是进入下一个迭代, 所以 continue 只能用于循环的代码块。。
  • return 则是用于在函数中返回特定的值。

1、break

  • break 在一些计算机编程语言中是保留字，其作用大多情况下是终止所在层的循环。

在循环中使用break

  • 当break语句用于do-while、for、while循环语句中时，可使程序终止循环。

  • 在多层循环中，一个break语句只向外跳一层。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    for(var j=0;j<2;j++){
        for (var i = 0; i < 5; i++) {
            // console.log(i)
            if (i == 3) {
                console.log(i+"等于3，跳出循环")
                break;
            }
            console.log(i+"不等于3，继续循环");
        }
        console.log("break 在多个嵌套循环中，只能影响到break所在的循环，不会影响到");
    }
    console.log("后续代码");

break1.png

在switch中使用break

  • 当 break 语句用于 switch 语句中时，会跳出 switch 代码块，终止执行代码。

  • 注意：break 关键字只能退出当前的代码块，不会影响到其他的代码块

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var num=5;
    switch (num){
        case 5:
            console.log("5");
        case 4:
            console.log("4");
            for(var i=0;i<3;i++){
                if(true){
                    break;//只能退出循环，不会影响到switch语句
                }
            }
        case 3:
            console.log("3");
            break;//这个break就能防止case穿透
        case 2:
            console.log("2");
    }

2、continue

  • continue 不是退出一个循环，而是开始循环的一次新迭代。(就是跳出当前的循环，然后继续后面的循环)
  • continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内，在其它地方使用都会引起错误！

continue 与 break 语句的区别

  • break 是结束整个循环体，continue是结束单次循环。
1
2
3
4
5
6
7
for(var i=0;i<6;i++){
    if(i===3){
        console.log(i+"等于3，跳出整个循环")
        break;
    }
    console.log(i);
}

break2.png

1
2
3
4
5
6
7
for(var i=0;i<6;i++){
    if(i===3){
        console.log("——"+i+"等于3，跳出i=3的循环，继续执行后续循环")
        continue;
    }
    console.log(i+1+"次循环");
}

continue1.png

  • 注意：

    • continue 语句（不带标签引用），只能用在循环或 switch 中。

3、return

  • ECMAScript 中的函数在定义时不必指定是否返回值。函数会在执行完 return 语句之后停止并立即退出。

  • return直接结束整个方法，不管这个return处于多少层循环之内。

  • 未指定返回值的函数 return 返回的是一个特殊的 undefined 值。

    • 在函数中不写return，或者return 关键字后面不写任何值；返回的就是一个 undefined；
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function fn(){
      console.log("简简单单的一个函数");
      return;
    }
    console.log(fn());// undefined

    function fnNoReturn(){
      console.log("简简单单的一个函数");
    }
    console.log(fnNoReturn());// undefined

  • return 语句会终止函数的执行并返回函数的值

递归中的return

  • 递归的意义：递归就是调用自身的一种编程技巧，在程序设计中应用广泛。递归函数就是函数对自身的调用，是循环运算的一种算法模式。

  • 递归必须由以下两部分组成。

    • 递归调用的过程。
    • 递归终止的条件。

  • 递归中的return 是逐级返回

    1
    2
    3
    4
    5
    6
    7
    function fn(num){
        if(num === 1){
            return 1;
        }
        return num+fn(--num);
    }
    console.log(fn(5));// 15

    • if 中的return是跳出函数循环的条件，只有当满足条件是才进入if语句中。

    • 一开始传入实参5 ，不满足条件，fn(5) 函数返回的结果是 5+fn(4) ;

    • fn(4) 相当于传入 实参4 并调用函数；

      • fn(4) 函数返回的结果是 4+fn(3) ;

    • fn(3) 相当于传入 实参3 并调用函数；

      • fn(3) 函数返回的结果是 3+fn(2) ;

    • fn(2) 相当于传入 实参2 并调用函数；

      • fn(2) 函数返回的结果是 2+fn(1) ;

    • fn(1) 相当于传入 实参1 并调用函数；

      • num===1 满足条件，函数返回 数值1，终止函数调用；

    • 所以fn(5)的return 返回的结果是：


      return2.png