JS跳出循环的三种方法(break, return, continue) 作者: 时间: 2021-09-19 分类: 默认分类 <article class="baidu_pl"> <div id="article_content" class="article_content clearfix"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css"> <div id="content_views" class="markdown_views"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <h1 id="js跳出循环的三种方法break-return-continue"><a name="t0"></a>JS跳出循环的三种方法(break, return, continue)</h1> <h2 id="前言"><a name="t1"></a>前言:</h2> <ul><li>一位前端界的大神让我去思考的一个问题, 给了Big-man一段代码，如下:</li></ul> <pre class="prettyprint" name="code"><code class="hljs coffeescript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="hljs-reserved">function</span> Seriously(options) { <span class="hljs-regexp">//</span> <span class="hljs-keyword">if</span> called without <span class="hljs-string">'new'</span>, make a <span class="hljs-keyword">new</span> object <span class="hljs-keyword">and</span> <span class="hljs-keyword">return</span> that <span class="hljs-keyword">if</span>(<span class="hljs-built_in">window</span> === <span class="hljs-keyword">this</span> || !(<span class="hljs-keyword">this</span> <span class="hljs-keyword">instanceof</span> Seriously) || <span class="hljs-keyword">this</span>.id !== <span class="hljs-literal">undefined</span>) { <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Seriously(options); } }<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <ul><li><code>return</code>语句执行之后还会继续执行吗？这是大神上来让我解决的问题，既然提到了<code>return</code>那我也就随带解决JS中另外的两种结束循环的方法<code>break</code>, <code>continue</code>。</li></ul> <hr> <h2 id="break语句"><a name="t2"></a><code>Break</code>语句:</h2> <ul><li><code>break</code>语句会使运行的程序立刻退出包含在<strong>最内层的循环</strong>或者退出一个<code>switch</code>语句。</li><li>由于它是用来退出循环或者<code>switch</code>语句的, 所以只有当它出现在这些语句的时候, 这种形式的<code>break</code>语句才是合法的。</li><li>如果一个循环的<strong>终止条件</strong>非常复杂, 那么使用<code>break</code>语句来<strong>实现某些条件</strong>比用一个循环表达式所有的条件容易得多。</li></ul> <pre class="prettyprint" name="code"><code class="hljs matlab has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="hljs-keyword">for</span>(var <span class="hljs-built_in">i</span> = <span class="hljs-number">519</span>; <span class="hljs-built_in">i</span> < <span class="hljs-number">550</span>; <span class="hljs-built_in">i</span>++) <span class="hljs-cell">{ if(i == <span class="hljs-number">522</span>) { break; }</span> <span class="hljs-transposed_variable">console.</span><span class="hljs-built_in">log</span>(<span class="hljs-built_in">i</span>); alert(<span class="hljs-built_in">i</span>); <span class="hljs-transposed_variable">document.</span>write(<span class="hljs-built_in">i</span>); }<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <ul><li>当<code>i = 521</code>的时候，直接退出<code>for</code>这个循环。这个循环将不再被执行。</li><li>对于输出结果的话，可以自己去测试的吧。</li></ul> <hr> <h2 id="continue语句"><a name="t3"></a><code>Continue</code>语句:</h2> <ul><li><code>continue</code>语句和<code>break</code>语句相似。所不同的是，它不是退出一个循环，而是开始循环的一次新迭代。</li><li><code>continue</code>语句只能用在<code>while</code>语句、<code>do/while</code>语句、<code>for</code>语句、或者<code>for/in</code>语句的循环体内, 在其他地方使用都会引起错误?</li></ul> <pre class="prettyprint" name="code"><code class="hljs matlab has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="hljs-keyword">for</span>(var <span class="hljs-built_in">i</span> = <span class="hljs-number">5</span>; <span class="hljs-built_in">i</span> >=<span class="hljs-number">0</span>; <span class="hljs-built_in">i</span>--) <span class="hljs-cell">{ if(i == <span class="hljs-number">4</span> || i == <span class="hljs-number">3</span> || i == <span class="hljs-number">1</span>) { continue; }</span> <span class="hljs-transposed_variable">console.</span><span class="hljs-built_in">log</span>(<span class="hljs-built_in">i</span>); alert(<span class="hljs-built_in">i</span>); <span class="hljs-transposed_variable">document.</span>write(<span class="hljs-built_in">i</span>); }<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <ul><li>当<code>i = 4</code>、<code>i = 3</code>以及<code>i = 1</code>的时候，直接跳出<code>for</code>循环。下次继续执行。</li><li>至于输出结果，还希望大家去打印一下。</li></ul> <hr> <h2 id="return语句"><a name="t4"></a><code>Return</code>语句:</h2> <ul><li><code>return</code>语句就是用于<strong>指定函数返回的值</strong>。<code>return</code>语句只能出现在<strong>函数体内</strong>，出现在代码中的<strong>其他任何地方造成语法错误</strong>！</li></ul> <pre class="prettyprint" name="code"><code class="hljs matlab has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="hljs-keyword">for</span>(var <span class="hljs-built_in">i</span> = <span class="hljs-number">1</span>; <span class="hljs-built_in">i</span> < <span class="hljs-number">10</span>; <span class="hljs-built_in">i</span>++) <span class="hljs-cell">{ if(i == <span class="hljs-number">8</span>) { return; }</span> <span class="hljs-transposed_variable">console.</span><span class="hljs-built_in">log</span>(<span class="hljs-built_in">i</span>); alert(<span class="hljs-built_in">i</span>); <span class="hljs-transposed_variable">document.</span>write(<span class="hljs-built_in">i</span>); }<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <ul><li>执行结果<code>Uncaught SyntaxError: illegal return statement(...)</code> <br> <ul><li>错误意思是<strong>非法捕获的查询返回语句</strong>。</li></ul></li><li>当执行<code>return</code>语句时, 即使函数主题中还有其他语句, 函数执行也会停止!</li></ul> <pre class="prettyprint" name="code"><code class="hljs xml has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">if</span>(username == <span class="hljs-string">""</span>) { alert(<span class="hljs-string">"please input your username: "</span>); <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (qq == <span class="hljs-string">""</span>) { alert(<span class="hljs-string">"please input your qq number: "</span>); <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; } </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> <ul><li>上面的实例里，当<code>username</code>为空时，就不会再向下执行，在一些<strong>表单提交</strong>中，也可以通过<code>return false</code>来阻止<strong>默认的提交方式</strong>，改用<strong>Ajax的提交方式</strong>，例如：</li></ul> <pre class="prettyprint" name="code"><code class="hljs r has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><form id=<span class="hljs-string">"form"</span> onSubmit=<span class="hljs-string">"return false"</span>> <span class="hljs-keyword">...</span> </form><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <hr> <h2 id="this对应的全局变量"><a name="t5"></a><code>this</code>对应的全局变量:</h2> <ul><li><code>window == this</code>这个<code>Boolean</code>等式，在不同的情况下的展现都不一样的。</li></ul> <pre class="prettyprint" name="code"><code class="language-html hljs has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="hljs-doctype"><!DOCTYPE html></span> <span class="hljs-tag"><<span class="hljs-title">html</span>></span> <span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span> <span class="hljs-tag"></<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span><span class="hljs-params">()</span> {<!-- --></span> console.log(window === <span class="hljs-keyword">this</span>) } a(); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span> <span class="hljs-tag"></<span class="hljs-title">html</span>></span><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> <ul><li>这个时候的<code>window === this</code>打印出来的是<code>true</code>，这也就意味着<code>this</code>绝对等于<code>window</code>。</li></ul> <pre class="prettyprint" name="code"><code class="hljs xml has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="hljs-doctype"><!DOCTYPE html></span> <span class="hljs-tag"><<span class="hljs-title">html</span>></span> <span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span> <span class="hljs-tag"></<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"><span class="hljs-pi"> 'use strict'</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span><span class="hljs-params">()</span> {<!-- --></span> console.log(window === <span class="hljs-keyword">this</span>) } a(); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span> <span class="hljs-tag"></<span class="hljs-title">html</span>></span><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li></ul></pre> <ul><li>这个时候<code>window === this</code>返回回来的值却是<code>false</code>， 而且打印出来的<code>this</code>是<code>undefined</code>的。</li><li>所以严格模式下面的代码操作需要更加的规范和合理才可以的。</li></ul> <hr> <blockquote> <p>Jackdan9 Thinking</p> </blockquote> </div><div><div></div></div> <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css" rel="stylesheet"> <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css" rel="stylesheet"> </div> </article> https://blog.csdn.net/XXJ19950917/article/details/78310346 标签: none
博主真是太厉害了！！！
叼茂SEO.bfbikes.com
不错不错，我喜欢看 https://www.jiwenlaw.com/
看的我热血沸腾啊https://www.ea55.com/
《喜願花》台湾剧高清在线免费观看：https://www.jgz518.com/xingkong/19612.html
《吸血网站》恐怖片高清在线免费观看：https://www.jgz518.com/xingkong/113745.html
《吸血网站》恐怖片高清在线免费观看：https://www.jgz518.com/xingkong/113745.html
《老虎出更(原声版)》动作片高清在线免费观看：https://www.jgz518.com/xingkong/146616.html
《美姐》剧情片高清在线免费观看：https://www.jgz518.com/xingkong/47410.html
建议增加具体方法论，避免停留口号层面。
这篇文章不错！