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語句時, 即使函數主題中還有其他語句, 函數執行也會停止!

<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>

上面的實例里，當username為空時，就不會再向下執行，在一些表單提交中，也可以通過return false來阻止默認的提交方式，改用Ajax的提交方式，例如：

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

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的。

所以嚴格模式下面的代碼操作需要更加的規范和合理才可以的。

vector illustration web development shield sign

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

作者：JD9

來源：CSDN

原文：https://blog.csdn.net/XXJ19950917/article/details/78310346

avaScript —— 極簡主義

看過上一篇文章評論內容的朋友，就會明白我為什么會在這個時候穿插去寫這篇文章！越基礎的東西就越容易被大家忽視，哪里是忽視，明明是我們從心底瞧不起它；好了，朋友，請收起我們那驕傲自大、不可一世、眼高手低的心態，掌握的牢固不牢固我們自己心里還不清楚嗎？先嘲笑下自己，給自己降降溫，然后以空杯的心態去面對每一個細小的知識點，come on！

點關注，不迷路哦~

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2];
let len = arr.length;

1、continue

特點：終止當前循環體，繼續去執行下一個循環。

for(let i = 0; i < len; i++) {
 if( arr[i] > 5 ) {
 continue;
 }
 console.log(arr[i])
}

結果：1, 2, 3, 4, 5, 1, 2

2、break

特點：退出包含在最內層(就近原則)的循環

for(let i = 0; i < len; i++) {
 if( arr[i] > 5 ) {
 break;
 }
 console.log(arr[i])
}

結果：1, 2, 3, 4, 5

寫到這里應該看出來continue和break的差別了吧，自己去觀察，最后我再作總結；接下來我們繼續進一步來挖掘什么是就近原則?

for(let k = 0; k < 2; k++){
 for(let i = 0; i < len; i++) {
 if( arr[i] > 5 ) {
 break;
 }
 console.log(arr[i])
 }
}
結果：1, 2, 3, 4, 5, 1, 2, 1, 2, 3, 4, 5, 1, 2

for(let k = 0; k < 1; k++){
 if ( k > 1 ) {
 break;
 }
 for(let i = 0; i < len; i++) {
 console.log(arr[i])
 }
}
結果：1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2

for(let k = 0; k < 2; k++){
 if ( k > 0 ) {
 break;
 }
 for(let i = 0; i < len; i++) {
 if( arr[i] > 5 ) {
 break;
 }
 console.log(arr[i])
 }
}
結果：1, 2, 3, 4, 5

for(let k = 0; k < 2; k++){
 if ( k < 1 ) {
 break;
 }
 for(let i = 0; i < len; i++) {
 if( arr[i] > 5 ) {
 break;
 }
 console.log(arr[i])
 }
}
結果：空

小結：所謂就近原則，就是只影響包含它的最近的循環，只能受父親，不能受爺爺，也不受兒子的影響，也可以說是解耦的。也常用語switch(n){ case 1: alert(1); break; default: alert(2); }中。

2）return

特點：只能出現在函數體內，用來終止整個函數的執行并返回想要返回值。

for(let i = 0; i < len; i++){
 if ( arr[i] > 5 ) {
 return false; // 只能出現在函數體內！！！
 }
 console.log(arr[i])
}
// 語法直接報錯，無任何輸出：
Uncaught SyntaxError: Illegal return statement

function func() {
 for(let i = 0; i < len; i++){
 if ( arr[i] > 5 ) {
 return 888;
 }
 console.log(arr[i])
 }
}
func();
結果：1, 2, 3, 4, 5, 888

小結：只能用于函數體內，用以終止整個函數的執行。

總結：

1）使用環境，是否必須在函數體中使用；

2）終止范圍，一條循環 or 整個循環 or 整個函數；

3) 就近原則

點關注，不迷路~

同時，便于查看歷史文章。

家好，html模板的判斷語句和Python里的寫法是一樣的，只不過每一行需要包裹在花括號和百分號里。

·從視圖函數里傳遞一個名稱為user的數據，user變量的值輸入小鐵，在html文件里判斷。如果user返回了數據顯示歡迎你小鐵，否則如果沒有顯示數據顯示請登錄。

·最后用and if來閉合判斷語句，運行Web服務，在瀏覽器里查看效果。因為user這個變量是有數據的，所以前端顯示的歡迎您小鐵。將user變量的值改成無，回到瀏覽器查看效果，這個時候瀏覽器顯示的是請登錄。

這就是html模板文件里if判斷語句的使用方法。

在線咨詢

上一篇：html圖片生成的需求-html2canvas簡明使用教程
下一篇：2千萬商機網揭秘前端（HTML5+CSS3+JavaScript）教學大綱

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JS跳出循環的三種方法(break, return, continue)

您的項目需求