JavaScript.Info阅读笔记

链接地址

空值合并运算符 ??

获取第一个“已定义”的变量的值(即值不是 null 或 undefined 的变量)。和||作用类似。如下：

// 假设a = null,b=0,c=1
var value1 = a || b || c; //value1=1   获取第一个“真值”   
var value2 = a ?? b ?? c; //value2=0   获取第一个”不为 null/undefined“的值

switch语句

switch判断是否严格相等。

switch(x){
    case "value": // x=== "value"
        ...
    	break;
    default:
        ...
        break;
}

任何表达式都可以成为 switch/case 的参数

switch 和 case 都允许任意表达式。

比如：

let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("this runs, because +a is 1, exactly equals b+1");
    break;

  default:
    alert("this doesn't run");
}

这里 +a 返回 1，这个值跟 case 中 b + 1 相比较，然后执行对应的代码。

typeof 运算结果

8中数据类型：

• number
• string
• boolean
• null
• undefined
• bigint --- 任意长度的整数
• symbol
• object

typeof返回的值包括以下8个：

• number
• string
• boolean
• function
• undefined
• bigint --- 任意长度的整数
• symbol
• object

typeof运算符返回值的类型，注意以下两个特殊：

typeof null === "object"; //JavaScript 编程语言的设计错误
typeof function(){} === "function" // 函数被特殊对待

defer和async

defer并行加载js文件，下载完不会立即执行，等页面解析完成后，按照页面上script标签的顺序执行

async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行

DOMContentLoaded、load、beforeunload、unload

页面生命周期

DOMContentLoaded:

浏览器已完全加载HTML，并构建了DOM树，script标签也加载并执行结束之后才会触发该事件。 但像img和样式表之类的外部资源可能尚未加载完成。

假如脚本在等待样式表加载，那么DOMContentLoaded也会等待脚本加载并执行结束。

DOMContentLoaded事件发生在document对象上，我们必须使用addEventListener来捕获它。

window.onload:

当整个页面(包括样式、图片和其他资源)加载完成时，会在window对象上触发load事件。

window.onunload:

当访问者离开页面时，window 对象上的 unload 事件就会被触发。可以在unload事件处理程序中执行一些不涉及延迟的操作。

以下是一个常见情况：

当用户要离开的时候，我们希望通过 unload 事件保存一些数据到我们的服务器上。

有一个特殊的 navigator.sendBeacon(url, data) 方法可以满足这种需求，详见规范 https://w3c.github.io/beacon/。

它在后台发送数据，转换到另外一个页面不会有延迟：浏览器离开页面，但仍然在执行 sendBeacon。

let analyticsData = { /* 带有收集的数据的对象 */ };

window.addEventListener("unload", function() {
  navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
};

window.onbeforeunload:

在用户离开页面时，beforeunload处理程序要求进行更多确认。感觉有时候不会生效(不明白为啥！)。

MutationObserver

DOM变动观察器

MutationObserver 是一个内建对象，它观察 DOM 元素，在其发生更改时触发回调。

使正则表达式支持Unicode编码

核心关注：u修饰符 和 \p{...}查找。

详情参阅

实例：匹配一个16进制数字

\p{Hex_Digit}

let regexp = /x\p{Hex_Digit}\p{Hex_Digit}/u;
"number: xAF".match(regexp) // xAF

实例：匹配一个中文字符

\p{sc=Han}

let regexp = /\p{sc=Han}/gu;
let str = `Hello Привет 你好 123_456`;

str.match(regexp); // ["你","好"]