嘍，大家好，我是雷工！

最近一段時(shí)間沒(méi)學(xué)習(xí)JavaScript，今天看數(shù)字孿生的資料，發(fā)現(xiàn)很多低代碼開(kāi)發(fā)還是得必須熟悉JavaScript才行，為了以后方便搞數(shù)字孿生，有時(shí)間還是繼續(xù)學(xué)習(xí)下JavaScript。

以下為學(xué)習(xí)筆記。

1、continue結(jié)束循環(huán)：

continue：結(jié)束本次循環(huán)，繼續(xù)下次循環(huán)。

2、break結(jié)束循環(huán)：

break：跳出所在的循環(huán)。

代碼示例：

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

示例說(shuō)明：

該示例即在得到“關(guān)注了”的回答后，跳出所在的循環(huán)。

3、continue結(jié)束循環(huán)與break結(jié)束循環(huán)的區(qū)別：

continue： 退出本次循環(huán)，一般用在排除或者跳過(guò)某一選項(xiàng)時(shí)，可用continue；

break：退出整個(gè)循環(huán)，一般用于已經(jīng)得到想要的結(jié)果，后續(xù)的循環(huán)不需要繼續(xù)運(yùn)行的時(shí)候使用。

4、后記

昨天進(jìn)了兩個(gè)自媒體的運(yùn)營(yíng)群，里邊大神好多，動(dòng)不動(dòng)就10W+，我這是不行了，發(fā)的亂七八糟，啥類型也有，流量還不好。

罷了，隨心隨性，想發(fā)點(diǎn)啥發(fā)點(diǎn)啥吧，不然該焦慮了！

. 基本概念

1.1 語(yǔ)句作用

return語(yǔ)句用于終止一個(gè)函數(shù)的執(zhí)行，同時(shí)將一個(gè)返回值返回給這個(gè)函數(shù)的調(diào)用者。因此，return語(yǔ)句必須要被包含在函數(shù)之中；否則，程序就會(huì)出錯(cuò)。如果沒(méi)有為return語(yǔ)句指明它的返回值，那么它就默認(rèn)返回undefined。

如果一個(gè)函數(shù)中沒(méi)有顯式的寫(xiě)明return語(yǔ)句，那么在函數(shù)執(zhí)行時(shí)JavaScript會(huì)在該函數(shù)執(zhí)行流程的末尾自動(dòng)添加一條未指明返回值的return語(yǔ)句。return語(yǔ)句也可以被添加在函數(shù)的前面部分，這通常用于當(dāng)滿足某個(gè)條件時(shí)而提前退出函數(shù)。

1.2 語(yǔ)法結(jié)構(gòu)

return語(yǔ)句的語(yǔ)法結(jié)構(gòu)如下所示：

return [expression];

其中expression可以是JavaScript中任意合法的表達(dá)式，它的計(jì)算結(jié)果就是return語(yǔ)句的返回值，在函數(shù)終止的時(shí)候會(huì)被返回給該函數(shù)的調(diào)用者。如果省略了expression，那么return語(yǔ)句的返回值就默認(rèn)為undefined。

如果要顯式指明expression，那么它和return關(guān)鍵字必須寫(xiě)在同一行上，即它們之間不能有換行符。否則，JavaScript會(huì)自動(dòng)在return關(guān)鍵字的后面添加分號(hào)。此時(shí)，該return語(yǔ)句其實(shí)是一個(gè)未指明返回值的return語(yǔ)句，而expression在return語(yǔ)句之后永遠(yuǎn)都不會(huì)被執(zhí)行到。

2. 示例

2.1 指明返回值

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

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

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

該示例中的twice()函數(shù)還可以簡(jiǎn)寫(xiě)為下面的形式，即計(jì)算兩倍的表達(dá)式被包含在return語(yǔ)句中，它的結(jié)果被直接返回。這樣就不需要先聲明一個(gè)變量臨時(shí)保存計(jì)算結(jié)果，再用return語(yǔ)句返回該變量。

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

2.2 省略返回值

<script>
    // 定義一個(gè)函數(shù)，它的最后是一條沒(méi)有指明返回值的return語(yǔ)句
    function abc() {
        console.log("執(zhí)行函數(shù)abc().");
        return;
    }

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

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

2.3 省略return語(yǔ)句

<script>
    // 定義一個(gè)函數(shù)，它省略了return語(yǔ)句
    function abc() {
        console.log("執(zhí)行函數(shù)abc().");
    }

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

下圖中的執(zhí)行結(jié)果表明，該示例和上一個(gè)例子的執(zhí)行結(jié)果完全一致（除了變量被命名為value3之外）。該例子的成功執(zhí)行表明，當(dāng)一個(gè)函數(shù)的執(zhí)行流程的最后一條語(yǔ)句是沒(méi)有顯式指定返回值的return語(yǔ)句時(shí)，該return語(yǔ)句可以被省略。

當(dāng)一個(gè)函數(shù)的執(zhí)行流程的最后缺少return語(yǔ)句的時(shí)候，JavaScript會(huì)自動(dòng)在該執(zhí)行流程的最后添加一條沒(méi)有返回值的return語(yǔ)句，當(dāng)然該函數(shù)的返回值就為undefined了。

2.4 return語(yǔ)句不能在函數(shù)之外

<script>
    // return 語(yǔ)句在函數(shù)之外：這會(huì)導(dǎo)致程序出錯(cuò)
    return;
    console.log("青石野草");
</script>

以上代碼的執(zhí)行結(jié)果如下圖所示，我們可以看到瀏覽器明確指出第3行的return語(yǔ)句是錯(cuò)誤的。

2.5 提前終止函數(shù)

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

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

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

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

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

這個(gè)例子也說(shuō)明了一個(gè)函數(shù)可以包含多個(gè)return語(yǔ)句，用于根據(jù)不同的情況而退出函數(shù)。

2.6 自動(dòng)添加分號(hào)

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

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

該示例的執(zhí)行結(jié)果如下圖所示，可以看到第11行打印出的變量value5的值為undefined，而不是我們?cè)酒谕臄?shù)字18。這是怎么回事呢？

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

但JavaScript的return語(yǔ)句是個(gè)例外，在本文的開(kāi)頭我們就說(shuō)過(guò)如果return關(guān)鍵字和它的返回值之間有換行符的話，JavaScript會(huì)自動(dòng)在return關(guān)鍵字之后插入一個(gè)分號(hào)，此時(shí)該return語(yǔ)句的意義就和我們所期望的不同了。

這樣自動(dòng)插入分號(hào)的結(jié)果就會(huì)讓該示例中的twice()函數(shù)實(shí)際等同于下面的代碼。此時(shí)無(wú)論傳遞的參數(shù)是多少，return語(yǔ)句都會(huì)提前終止函數(shù)并默認(rèn)返回undefined，而變量result始終都不會(huì)被返回。

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

如果你真的想要將return語(yǔ)句寫(xiě)在多行上，那么你可以將返回值用括號(hào)括起來(lái)。但請(qǐng)一定要注意，此時(shí)左括號(hào)也必須要和return關(guān)鍵字寫(xiě)在同一行上，就像下面的代碼這樣：

<script>
    /* 要將return語(yǔ)句寫(xiě)在多行上，可以用括號(hào)將返回值括起來(lái)；
     * 但是，左括號(hào)也必須要和return關(guān)鍵字寫(xiě)在同一行上。
     */
    function twice(x) {
        return (
            x * 2
        );
    }
</script>

(完）

求

這兩天碰到一個(gè)需求：在用戶刷新頁(yè)面或者關(guān)閉頁(yè)面的時(shí)候，前端要給后臺(tái)發(fā)一條請(qǐng)求，釋放該頁(yè)面的授權(quán)占用。

分析了一下，這不就是在頁(yè)面卸載時(shí)發(fā)請(qǐng)求嘛，三下五除二就實(shí)現(xiàn)一版：

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

測(cè)試發(fā)現(xiàn)：

• 刷新頁(yè)面時(shí)基本滿足需求（偶爾也會(huì)有后臺(tái)接收不到請(qǐng)求的現(xiàn)象，但概率很低）
• 關(guān)閉頁(yè)面時(shí)，后臺(tái)接收不到請(qǐng)求

既然異步 Ajax 不行，那就試試同步的吧，結(jié)果直接報(bào)錯(cuò)了：

搜了一下，解釋如下：

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.

概括起來(lái)就是：對(duì)現(xiàn)在的 Chrome 來(lái)說(shuō)，在頁(yè)面導(dǎo)航離開(kāi)或者被用戶關(guān)閉時(shí)，不允許發(fā)送同步 XHR 請(qǐng)求，涉及到的事件有：beforeunload、unload、pagehide 和 visibilitychange。

雖然問(wèn)題沒(méi)解決，但是卻長(zhǎng)知識(shí)了，這波不太虧！

navigator.sendBeacon()

后來(lái)通過(guò)搜索，看到有一個(gè)接口是專門(mén)來(lái)干這事的，那就是 navigator.sendBeacon() 。

描述

這個(gè)方法主要用于滿足統(tǒng)計(jì)和診斷代碼的需要，這些代碼通常嘗試在卸載（unload）文檔之前向web服務(wù)器發(fā)送數(shù)據(jù)。

語(yǔ)法

navigator.sendBeacon(url, data);

參數(shù)

• url 表明 data 將要被發(fā)送到的網(wǎng)絡(luò)地址。
• data 參數(shù)是將要發(fā)送的 ArrayBufferView 或 Blob 、DOMString 或者 FormData 類型的數(shù)據(jù)。

返回值

當(dāng)用戶代理成功把數(shù)據(jù)加入傳輸隊(duì)列時(shí)，sendBeacon() 方法將會(huì)返回 true，否則返回 false。

實(shí)現(xiàn)

既然有了接口，那實(shí)現(xiàn)起來(lái)就簡(jiǎn)單了。

代碼

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

效果

不管是刷新頁(yè)面還是關(guān)閉頁(yè)面，后臺(tái)都能接收到前端發(fā)送過(guò)來(lái)的請(qǐng)求，完美實(shí)現(xiàn)需求。

總結(jié)

瀏覽器現(xiàn)在功能越來(lái)越強(qiáng)大，支持的 API 也越來(lái)越豐富，放在之前很難實(shí)現(xiàn)的功能，現(xiàn)在可能就是輕而易舉的事，還是要多關(guān)注技術(shù)動(dòng)態(tài)。

~

~本文完，感謝閱讀！

~

學(xué)習(xí)有趣的知識(shí)，結(jié)識(shí)有趣的朋友，塑造有趣的靈魂！

大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號(hào)是『編程三昧』，歡迎關(guān)注，希望大家多多指教！

你來(lái)，懷揣期望，我有墨香相迎！ 你歸，無(wú)論得失，唯以余韻相贈(zèng)！

知識(shí)與技能并重，內(nèi)力和外功兼修，理論和實(shí)踐兩手都要抓、兩手都要硬！