JavaScript基礎知識20-循環結構:退出循環

嘍，大家好，我是雷工！

最近一段時間沒學習JavaScript，今天看數字孿生的資料，發現很多低代碼開發還是得必須熟悉JavaScript才行，為了以后方便搞數字孿生，有時間還是繼續學習下JavaScript。

以下為學習筆記。

1、continue結束循環：

continue：結束本次循環，繼續下次循環。

2、break結束循環：

break：跳出所在的循環。

代碼示例：

let res = prompt("大家關注【雷工筆記】了嗎？")
while(res !="關注了")
{
 	alert("請關注【雷工筆記】")
	 res = prompt("大家關注【雷工筆記】了么？")；
	 if(res == "關注了")
	 {
		 break；
	}
}

示例說明：

該示例即在得到“關注了”的回答后，跳出所在的循環。

3、continue結束循環與break結束循環的區別：

continue：退出本次循環，一般用在排除或者跳過某一選項時，可用continue；

break：退出整個循環，一般用于已經得到想要的結果，后續的循環不需要繼續運行的時候使用。

4、后記

昨天進了兩個自媒體的運營群，里邊大神好多，動不動就10W+，我這是不行了，發的亂七八糟，啥類型也有，流量還不好。

罷了，隨心隨性，想發點啥發點啥吧，不然該焦慮了！

. 基本概念

1.1 語句作用

return語句用于終止一個函數的執行，同時將一個返回值返回給這個函數的調用者。因此，return語句必須要被包含在函數之中；否則，程序就會出錯。如果沒有為return語句指明它的返回值，那么它就默認返回undefined。

如果一個函數中沒有顯式的寫明return語句，那么在函數執行時JavaScript會在該函數執行流程的末尾自動添加一條未指明返回值的return語句。return語句也可以被添加在函數的前面部分，這通常用于當滿足某個條件時而提前退出函數。

1.2 語法結構

return語句的語法結構如下所示：

return [expression];

其中expression可以是JavaScript中任意合法的表達式，它的計算結果就是return語句的返回值，在函數終止的時候會被返回給該函數的調用者。如果省略了expression，那么return語句的返回值就默認為undefined。

如果要顯式指明expression，那么它和return關鍵字必須寫在同一行上，即它們之間不能有換行符。否則，JavaScript會自動在return關鍵字的后面添加分號。此時，該return語句其實是一個未指明返回值的return語句，而expression在return語句之后永遠都不會被執行到。

2. 示例

2.1 指明返回值

<script>
    // 定義一個函數，計算一個數的兩倍
    function twice(x) {
        var result = x * 2;
        return result;
    }

    // 調用該函數，并打印返回值
    var value1 = twice(9);
    console.log("value1 = " + value1);
</script>

以上代碼的執行結果如下圖所示。我們用實參9調用函數twice()，它先計算9的兩倍然后再返回該結果，隨后該返回值被賦值給了變量value1。第10行的代碼打印出value1的值，可以看到它的值確實為18。

該示例中的twice()函數還可以簡寫為下面的形式，即計算兩倍的表達式被包含在return語句中，它的結果被直接返回。這樣就不需要先聲明一個變量臨時保存計算結果，再用return語句返回該變量。

<script>
    // 和上面代碼中的twice函數完全等價
    function twice(x) {
        return x * 2;
    }
</script>

2.2 省略返回值

<script>
    // 定義一個函數，它的最后是一條沒有指明返回值的return語句
    function abc() {
        console.log("執行函數abc().");
        return;
    }

    // 調用該函數，并打印返回值
    var value2 = abc();
    console.log("value2 = " + value2);
</script>

從下圖的執行結果中我們可以看到，首先打印出了字符串"執行函數abc()."，說明函數abc()確實被執行了。第10行的代碼打印出的變量value2的值為undefined，這正是return語句的默認返回值。

2.3 省略return語句

<script>
    // 定義一個函數，它省略了return語句
    function abc() {
        console.log("執行函數abc().");
    }

    // 調用該函數，并打印返回值
    var value3 = abc();
    console.log("value3 = " + value3);
</script>

下圖中的執行結果表明，該示例和上一個例子的執行結果完全一致（除了變量被命名為value3之外）。該例子的成功執行表明，當一個函數的執行流程的最后一條語句是沒有顯式指定返回值的return語句時，該return語句可以被省略。

當一個函數的執行流程的最后缺少return語句的時候，JavaScript會自動在該執行流程的最后添加一條沒有返回值的return語句，當然該函數的返回值就為undefined了。

2.4 return語句不能在函數之外

<script>
    // return 語句在函數之外：這會導致程序出錯
    return;
    console.log("青石野草");
</script>

以上代碼的執行結果如下圖所示，我們可以看到瀏覽器明確指出第3行的return語句是錯誤的。

2.5 提前終止函數

return語句不一定非要是函數的最后一條語句，它也可以處于函數的前面或中間，用于提前終止函數的執行。示例代碼如下所示：

<script>
    // 定義一個函數，它計算一個數的相反數；
    // 當參數為0時，它會被提前終止
    function opposite(x) {
        if(x == 0) {
            console.log("0的相反數是它自身。");
            return 0;
        }

        console.log("不為0的數的相反數是它的負數。");
        return -x;
    }

    // 調用函數，并打印返回值
    var value4 = opposite(0);
    console.log("value4 = " + value4);
</script>

我們使用實參0調用函數opposite()，當實參為0的時候，會執行if語句中的代碼。它首先打印字符串"0的相反數是它自身。"，然后遇到語句return 0;。這條return語句提前終止函數的執行，并返回0。因此，if語句后面的那一條打印語句和return -x;均不會被執行。下圖中的執行結果正印證了這一執行流程。

這個例子也說明了一個函數可以包含多個return語句，用于根據不同的情況而退出函數。

2.6 自動添加分號

<script>
    // 定義一個函數，它和第一個例子中的函數幾乎一樣；
    // 只是原本的return語句被拆分成了兩行。
    function twice(x) {
        var result = x * 2;
        return
        result;
    }

    // 調用函數，并打印返回值
    var value5 = twice(9);
    console.log("value5 = " + value5);
</script>

該示例的執行結果如下圖所示，可以看到第11行打印出的變量value5的值為undefined，而不是我們原本期望的數字18。這是怎么回事呢？

這個示例和第一個例子唯一的不同就是我們把return語句拆成了兩行，return關鍵字和它的返回值result被寫在了不同的行上。在其它編程語言或者JavaScript的某些其它語句中，這樣的拆行不會對原程序有任何影響。

但JavaScript的return語句是個例外，在本文的開頭我們就說過如果return關鍵字和它的返回值之間有換行符的話，JavaScript會自動在return關鍵字之后插入一個分號，此時該return語句的意義就和我們所期望的不同了。

這樣自動插入分號的結果就會讓該示例中的twice()函數實際等同于下面的代碼。此時無論傳遞的參數是多少，return語句都會提前終止函數并默認返回undefined，而變量result始終都不會被返回。

<script>
    // 定義一個函數，它和第一個例子中的函數幾乎一樣；
    // 只是原本的return語句被拆分成了兩行。
    function twice(x) {
        var result = x * 2;
        return;     // 注意，這個分號是JavaScript自動插入的；它改變了程序的語義。
        result;
    }
</script>

如果你真的想要將return語句寫在多行上，那么你可以將返回值用括號括起來。但請一定要注意，此時左括號也必須要和return關鍵字寫在同一行上，就像下面的代碼這樣：

<script>
    /* 要將return語句寫在多行上，可以用括號將返回值括起來；
     * 但是，左括號也必須要和return關鍵字寫在同一行上。
     */
    function twice(x) {
        return (
            x * 2
        );
    }
</script>

(完）

求

這兩天碰到一個需求：在用戶刷新頁面或者關閉頁面的時候，前端要給后臺發一條請求，釋放該頁面的授權占用。

分析了一下，這不就是在頁面卸載時發請求嘛，三下五除二就實現一版：

window.addEventListener("beforeunload", () => {
let oReq = new XMLHttpRequest();
oReq.open("POST", "http://127.0.0.1:1991/loginout");
oReq.send(JSON.stringify({name: "編程三昧"}));

測試發現：

刷新頁面時基本滿足需求（偶爾也會有后臺接收不到請求的現象，但概率很低）
關閉頁面時，后臺接收不到請求

既然異步 Ajax 不行，那就試試同步的吧，結果直接報錯了：

搜了一下，解釋如下：

Chrome now disallows synchronous XHR during page dismissal when the page is being navigated away from or closed by the user. This involves the following events (when fired on the path of page dismissal): beforeunload, unload, pagehide, and visibilitychange.

概括起來就是：對現在的 Chrome 來說，在頁面導航離開或者被用戶關閉時，不允許發送同步 XHR 請求，涉及到的事件有：beforeunload、unload、pagehide 和 visibilitychange。

雖然問題沒解決，但是卻長知識了，這波不太虧！

navigator.sendBeacon()

后來通過搜索，看到有一個接口是專門來干這事的，那就是 navigator.sendBeacon() 。

描述

這個方法主要用于滿足統計和診斷代碼的需要，這些代碼通常嘗試在卸載（unload）文檔之前向web服務器發送數據。

語法

navigator.sendBeacon(url, data);

參數

url 表明 data 將要被發送到的網絡地址。
data 參數是將要發送的 ArrayBufferView 或 Blob 、DOMString 或者 FormData 類型的數據。

返回值

當用戶代理成功把數據加入傳輸隊列時，sendBeacon() 方法將會返回 true，否則返回 false。

實現

既然有了接口，那實現起來就簡單了。

代碼

 window.addEventListener("beforeunload", (e) => {
    const data = {name: "編程三昧"};
    window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));
});

效果

不管是刷新頁面還是關閉頁面，后臺都能接收到前端發送過來的請求，完美實現需求。

總結

瀏覽器現在功能越來越強大，支持的 API 也越來越豐富，放在之前很難實現的功能，現在可能就是輕而易舉的事，還是要多關注技術動態。

~本文完，感謝閱讀！

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！你歸，無論得失，唯以余韻相贈！
知識與技能并重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

在線咨詢

上一篇：前端基礎面試題(HTML+CSS部分)
下一篇：H5（HTML5?）頁面策劃技巧

您的項目需求

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

整合營銷服務商