JS学习笔记——return、break和continue的使用和区别

最新推荐文章于 2024-03-07 16:28:00 发布

老Chen先生

最新推荐文章于 2024-03-07 16:28:00 发布

阅读量2.6k

点赞数 10

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/mrlaochen/article/details/120504227

版权

JavaScript 专栏收录该内容

28 篇文章 7 订阅

订阅专栏

平时在一些循环或者函数的使用中，我们经常用到return、break和continue，但会出现用错的地方，所以今天就来总结一下。

1、三者比较

在 break，continue和return 三个关键字中， break，continue是看做一类的，return 是函数返回语句，但是返回的同时也将函数停止。

相同之处：三个都会将此时进行的语句停止。

不同之处：

break：是立即结束当前语句，并跳出当前语句，进行下个语句执行
continue：是停止当前语句，并从头执行该语句
return：停止当前函数执行

使用的语句环境不一样，break和continue是用在循环或switch语句中，而return是用在函数语句中。

2、break

1、使用场景：退出循环或者switch语句。只有当它出现在这些语句时，这种形式的break语句才是合法的。

2、作用：结束执行当前自身循环，直接进入下一个语句环境

如下面例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var v=1;v<4;v++){
            for(var i=1;i<10;i++){
                if(i==6){
                    break;
                }
                console.log('---i---',i)
            }
            console.log('--v--',v)
        }
    </script>
</body>
</html>

在这里插入图片描述

当 i=6 的时候，遇到break，而break会直接退出自己所在的for循环
外层for循环不会受到break的影响
所以，可以得知：break会使当前自身这个循环将不再被执行，会直接进入下一个语句

3、continue

1、使用场景：只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内，在其它地方使用都会引起错误！

2、作用：结束本次的循环，直接进行下一次的循环

如同样例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var v=1;v<4;v++){
            for(var i=1;i<10;i++){
                if(i==6){
                    continue;
                }
                console.log('---i---',i)
            }
            console.log('--v--',v)
        }
    </script>
</body>
</html>

在这里插入图片描述

当 i=6 的时候，遇到continue，会跳出本次内层for循环，重新开始下一次循环
外层的循环正常执行，不会受到影响

4、return

1、使用场景：return语句应用范围只能出现在函数体内，出现在代码中的其他任何地方都会造成语法错误！

2、作用：（1）停止当前函数执行（2）返回控制与函数结果

还是同样例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var v=1;v<4;v++){
            for(var i=1;i<10;i++){
                if(i==6){
                    return;
                }
                console.log('---i---',i)
            }
            console.log('--v--',v)
        }
    </script>
</body>
</html>

在这里插入图片描述

可以看出，return并不能直接使用在循环中，其必须放在函数的内部使用

（1）停止函数

接着我们看一下return在函数中使用的情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function a(){
            console.log('--a开始--')
            for(var i=1;i<6;i++){
                if(i==3){
                    return;
                }
                console.log('---i---',i)
            }
            console.log('--a结束--')
        }
        a()
    </script>
</body>
</html>

在这里插入图片描述
这次，我们把return放在函数中：

可以看出，开始控制台打印--a开始--，表示进入了函数，然后执行for循环，当 i=3 时，遇到return，此时跳出循环，但是控制台并没有打印--a结束--字样，说明return立即终止当前函数a的执行

（2）返回控制与函数结果

我们可以在函数中，不同情况，return不同的结果，即return 表达式

function test(data){
  if(data<10){
        return '哈哈哈' + data
    }else{
        return data
    }
}

有时，我们还可能使用到 return true 或者 return false

return true：（1）终止处理；（2）表示返回正常的处理结果；
return false：（1）终止处理；（2）表示返回错误的处理结果；（3）阻止提交表单；（4）阻止执行默认的行为。

5、示例

我们用同一个例子对 break、continue和return进行测试：

function a(){
    console.log('--a开始--')
    for(var i=1;i<6;i++){
        if(i==3){
        	/* 依次执行break、continue和return */
            break;
            continue;
            return;
        }
        console.log('---i---',i)
    }
    console.log('--a结束--')
}
function b(){
    console.log('--b--')
}
function c(){
    console.log('--c--')
}
function test(){
    a();
    b();
    c();
}
test()

在这里插入图片描述

本文参考博客：

js中的break,continue和return的用法及区别

老Chen先生

关注

10
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
JS学习笔记——return、break和continue的使用和区别

平时在一些循环或者函数的使用中，我们经常用到return、break和continue，但会出现用错的地方，所以今天就来总结一下。1、三者比较在 break，continue和return 三个关键字中， break，continue是看做一类的，return 是函数返回语句，但是返回的同时也将函数停止。相同之处：三个都会将此时进行的语句停止。不同之处：break：是立即结束当前语句，并跳出当前语句，进行下个语句执行continue：是停止当前语句，并从头执行该语句return：停止函数
复制链接

扫一扫