快捷導(dǎo)航

JavaScript跳出循環(huán)的三種方法(break, return, continue)

更新時(shí)間：2019年07月30日 11:28:38 作者：JD9

這篇文章主要介紹了JavaScript跳出循環(huán)的三種方法(break, return, continue)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言:

一位前端界的大神讓我去思考的一個(gè)問(wèn)題, 給了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語(yǔ)句執(zhí)行之后還會(huì)繼續(xù)執(zhí)行嗎？這是大神上來(lái)讓我解決的問(wèn)題，既然提到了return那我也就隨帶解決JS中另外的兩種結(jié)束循環(huán)的方法break, continue。

Break語(yǔ)句:

break語(yǔ)句會(huì)使運(yùn)行的程序立刻退出包含在最內(nèi)層的循環(huán)或者退出一個(gè)switch語(yǔ)句。
由于它是用來(lái)退出循環(huán)或者switch語(yǔ)句的, 所以只有當(dāng)它出現(xiàn)在這些語(yǔ)句的時(shí)候, 這種形式的break語(yǔ)句才是合法的。
如果一個(gè)循環(huán)的終止條件非常復(fù)雜, 那么使用break語(yǔ)句來(lái)實(shí)現(xiàn)某些條件比用一個(gè)循環(huán)表達(dá)式所有的條件容易得多。

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

當(dāng)i = 521的時(shí)候，直接退出for這個(gè)循環(huán)。這個(gè)循環(huán)將不再被執(zhí)行。
對(duì)于輸出結(jié)果的話，可以自己去測(cè)試的吧。

Continue語(yǔ)句:

continue語(yǔ)句和break語(yǔ)句相似。所不同的是，它不是退出一個(gè)循環(huán)，而是開(kāi)始循環(huán)的一次新迭代。
continue語(yǔ)句只能用在while語(yǔ)句、do/while語(yǔ)句、for語(yǔ)句、或者for/in語(yǔ)句的循環(huán)體內(nèi), 在其他地方使用都會(huì)引起錯(cuò)誤?

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

當(dāng)i = 4、i = 3以及i = 1的時(shí)候，直接跳出for循環(huán)。下次繼續(xù)執(zhí)行。
至于輸出結(jié)果，還希望大家去打印一下。

Return語(yǔ)句:

return語(yǔ)句就是用于指定函數(shù)返回的值。return語(yǔ)句只能出現(xiàn)在函數(shù)體內(nèi)，出現(xiàn)在代碼中的其他任何地方造成語(yǔ)法錯(cuò)誤！

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

執(zhí)行結(jié)果Uncaught SyntaxError: illegal return statement(...)

錯(cuò)誤意思是非法捕獲的查詢返回語(yǔ)句。

當(dāng)執(zhí)行return語(yǔ)句時(shí), 即使函數(shù)主題中還有其他語(yǔ)句, 函數(shù)執(zhí)行也會(huì)停止!

<script type="text/javascript">
  if(username == "") {
    alert("please input your username: ");
    return false;
  } else if (qq == "") {
    alert("please input your qq number: ");
    return false;
  }
</script>

上面的實(shí)例里，當(dāng)username為空時(shí)，就不會(huì)再向下執(zhí)行，在一些表單提交中，也可以通過(guò)return false來(lái)阻止默認(rèn)的提交方式，改用Ajax的提交方式，例如：

<form id="form" onSubmit="return false">
...
</form>

this對(duì)應(yīng)的全局變量:

window == this這個(gè)Boolean等式，在不同的情況下的展現(xiàn)都不一樣的。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

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

這個(gè)時(shí)候的window === this打印出來(lái)的是true，這也就意味著this絕對(duì)等于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>

這個(gè)時(shí)候window === this返回回來(lái)的值卻是false，而且打印出來(lái)的this是undefined的。

所以嚴(yán)格模式下面的代碼操作需要更加的規(guī)范和合理才可以的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: