JS跳出循环的三种方法(break, return, continue)

忘是亡心i 2022-06-07 13:05 173阅读 0赞

# JS跳出循环的三种方法(break, return, continue) #

## 前言: ##

*  一位前端界的大神让我去思考的一个问题, 给了Big-man一段代码，如下:

function Seriously(options) {
        //  if called without 'new', make a new object and return that
        if(window === this || !(this instanceof Seriously) || this.id !== undefined) {
            return new Seriously(options);
        }
    }

*  `return`语句执行之后还会继续执行吗？这是大神上来让我解决的问题，既然提到了`return`那我也就随带解决JS中另外的两种结束循环的方法`break`, `continue`。

--------------------

## `Break`语句: ##

*  `break`语句会使运行的程序立刻退出包含在**最内层的循环**或者退出一个`switch`语句。
 *  由于它是用来退出循环或者`switch`语句的, 所以只有当它出现在这些语句的时候, 这种形式的`break`语句才是合法的。
 *  如果一个循环的**终止条件**非常复杂, 那么使用`break`语句来**实现某些条件**比用一个循环表达式所有的条件容易得多。

for(var i = 519; i < 550; i++) { if(i == 522) { break; }
        console.log(i);
        alert(i);
        document.write(i);
    }

*  当`i = 521`的时候，直接退出`for`这个循环。这个循环将不再被执行。
 *  对于输出结果的话，可以自己去测试的吧。

--------------------

## `Continue`语句: ##

*  `continue`语句和`break`语句相似。所不同的是，它不是退出一个循环，而是开始循环的一次新迭代。
 *  `continue`语句只能用在`while`语句、`do/while`语句、`for`语句、或者`for/in`语句的循环体内, 在其他地方使用都会引起错误?

for(var i = 5; i >=0; i--) { if(i == 4 || i == 3 || i == 1) { continue; }
        console.log(i);
        alert(i);
        document.write(i);
    }

*  当`i = 4`、`i = 3`以及`i = 1`的时候，直接跳出`for`循环。下次继续执行。
 *  至于输出结果，还希望大家去打印一下。

--------------------

## `Return`语句: ##

*  `return`语句就是用于**指定函数返回的值**。`return`语句只能出现在**函数体内**，出现在代码中的**其他任何地方造成语法错误**！

for(var i = 1; i < 10; i++) { if(i == 8) { return; }
        console.log(i);
        alert(i);
        document.write(i);
    }

*  执行结果`Uncaught SyntaxError: illegal return statement(...)`  
    
    
     *  错误意思是**非法捕获的查询返回语句**。
 *  当执行`return`语句时, 即使函数主题中还有其他语句, 函数执行也会停止!

*  上面的实例里，当`username`为空时，就不会再向下执行，在一些**表单提交**中，也可以通过`return false`来阻止**默认的提交方式**，改用**Ajax的提交方式**，例如：

--------------------

## `this`对应的全局变量: ##

*  `window == this`这个`Boolean`等式，在不同的情况下的展现都不一样的。

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    
    <body>
    <script type="text/javascript"> function a() { console.log(window === this) } a(); </script>
    </body>
    </html>

*  这个时候的`window === this`打印出来的是`true`，这也就意味着`this`绝对等于`window`。

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    
    <body>
    <script type="text/javascript"> 'use strict' function a() { console.log(window === this) } a(); </script>
    </body>
    </html>

*  这个时候`window === this`返回回来的值却是`false`， 而且打印出来的`this`是`undefined`的。
 *  所以严格模式下面的代码操作需要更加的规范和合理才可以的。

--------------------

> Jackdan9 Thinking