喽，大家好，我是雷工！

最近一段时间没学习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 也越来越丰富，放在之前很难实现的功能，现在可能就是轻而易举的事，还是要多关注技术动态。

~

~本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！