let/const基本使用
在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const。
let、const在其他编程语言中都是有的，所以也并不是新鲜的关键字；但是let、const确确实实给JavaScript带来一些不一样的东西；
let关键字：从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量
const关键字：const关键字是constant的单词的缩写，表示常量、衡量的意思；它表示保存的数据一旦被赋值，就不能被修改；但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；
注意：另外let、const不允许重复声明变量；
let/const没有作用域提升
let、const和var的另一个重要区别是作用域提升：
我们知道var声明的变量是会进行作用域提升的；但是如果我们使用let声明的变量，在声明之前访问会报错；
那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？
事实上并不是这样的，我们可以看一下ECMA262对let和const的描述；这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值。
从上面我们可以看出，在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的。那么变量已经有了，但是不能被访问，是不是一种作用域的提升呢？
事实上维基百科并没有对作用域提升有严格的概念解释，那么我们自己从字面量上理解；
作用域提升：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；在这里，它虽然被创建出来了，但是不能被访问，我认为不能称之为作用域提升；
所以我的观点是let、const没有进行作用域提升，但是会在解析阶段被创建出来。
Window对象添加属性
我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性，但是let、const是不会给window上添加任何属性的。
那么我们可能会想这个变量是保存在哪里呢？我们先回顾一下最新的ECMA标准中对执行上下文的描述：
let、const声明的变量被保存到VariableMap中
也就是说我们声明的变量和环境记录是被添加到变量环境中的，但是标准有没有规定这个对象是window对象或者其他对象呢？其实并没有，那么JS引擎在解析的时候，其实会有自己的实现。
比如v8中其实是通过VariableMap的一个hashmap来实现它们的存储的。
那么window对象呢？而window对象是早期的GO对象，在最新的实现中其实是浏览器添加的全局对象，并且一直保持了window和var之间值的相等性。
var没有块级作用域
在我们前面的学习中，JavaScript只会形成两个作用域：全局作用域和函数作用域。
ES5中放到一个代码中定义的变量，外面是可以访问的：
let/const的块级作用域
在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：
但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的，这是因为引擎会对函数的声明进行特殊的处理，允许像var那样进行提升，大部分浏览器为了兼容以前的代码，让function是没有块级作用域。
块级作用域的应用
我来看一个实际的案例：获取多个按钮监听点击
const btns = document.getElementsByTagName('button')
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
console.log("第" + n + "个按钮被点击")
}
}
// 如果是这样写代码,无论我们点击哪一个按钮,都会打印第4个按钮被点击,这是因为循环完成之后全局的i就是4
// 以前我们可以通过一个立即执行函数并且传递一个参数来解决,其实就是通过函数多加一层作用域,如下:
// for (var i = 0; i < btns.length; i++) {
// (function(n) {
// btns[i].onclick = function() {
// console.log("第" + n + "个按钮被点击")
// }
// })(i)
// }
// console.log(i)
// 但是上面的立即执行函数比较麻烦,而且全局中还是有一个i为4, 所以我们现在使用let来解决
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
console.log("第" + i + "个按钮被点击")
}
}
暂时性死区
在ES6中，我们还有一个概念称之为暂时性死区：它表达的意思是在一个代码中，使用let、const声明的变量，在声明之前，变量都是不可以访问的；我们将这种现象称之为 temporal dead zone（暂时性死区，TDZ）。
白话意思就是，只要下面if语句中通过let声明了foo，即使在外层作用域我们也声明了foo，下面代码也是报错的，当然当我们删掉let foo = 'bar'的时候代码就不会报错了。
var、let、const的选择
那么在开发中，我们到底应该选择使用哪一种方式来定义我们的变量呢？
对于var的使用，我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题。
其实是JavaScript在设计之初的一种语言缺陷，当然目前市场上也在利用这种缺陷出一系列的面试题，来考察大家对JavaScript语言本身以及底层的理解；但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；
对于let和const来说，是目前开发中推荐使用的；我们会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改；只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；
这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；
总结：ES5的var和ES6的let、const有什么区别？
- var存在变量的作用域提升，所以声明之前我们是可以打印出来的，let和const不存在变量的作用域提升，声明之前我们无法使用。
- var是函数级作用域，会存在循环变量变成全局变量的问题，let和const是块级作用域不存在这个问题。
- const修饰的变量是不可变的，如果是基本数据类型就是基本数据类型不能改为其他值，如果是引用类型，就是指针，就是这个变量不能指向其他指针。
- 在全局通过var来声明一个变量，事实上会在window上添加一个属性（其实就是VO对应的GO），但是let、const是不会给window上添加任何属性的，通过let、const声明的属性会添加VE中，对应的是一个VariableMap对象中，它其实是一个hashmap。
字符串模板基本使用
在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接。
首先，我们会使用``符号来编写字符串，称之为模板字符串，其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容。
标签模板字符串使用
模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。除了通过()调用函数，我们还可以通过``调用函数。
如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：
- 模板字符串被拆分了；
- 第一个元素是数组，是被模块字符串拆分的字符串组合；
- 后面的元素是一个个模块字符串传入的内容；
// 第一个参数依然是模块字符串中整个字符串, 只是被切成多块,放到了一个数组中
// 第二个参数是模块字符串中, 第一个 ${}, 以此类推
function foo(m, n, x) {
console.log(m, n, x, '---------')
}
// 另外调用函数的方式: 标签模块字符串
// foo``
const name = "why"
const age = 18
// 第一个参数是:['Hello', 'Wo', 'rld']
// 第二个参数是:'why', 第三个参数是:18
foo`Hello${name}Wo${age}rld`
比如下面的style.div``就是通过标签模板字符串调用的。
React的styled-components库
函数的默认参数
在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：传入了参数，那么使用传入的参数；没有传入参数，那么使用一个默认值；那么我们的代码是这样写的：
// ES5以及之前给参数默认值
/*
* 缺点:
* 1.写起来很麻烦, 并且代码的阅读性是比较差
* 2.这种写法是有bug, 比如我们传0和空字符串也会被当成否,所以也会取值后面的,但是实际取值是0或者空字符串
*/
function foo(m, n) {
m = m || "aaa"
n = n || "bbb"
console.log(m, n)
}
而在ES6中，我们允许给函数一个默认值。
// 1.ES6可以给函数参数提供默认值, 也不会有上面的bug
function foo(m = "aaa", n = "bbb") {
console.log(m, n)
}
foo(0, "")
对象参数进行解构，设置默认值
// 对象参数的默认值,直接解构
function printInfo({name, age} = {name: "why", age: 18}) {
console.log(name, age)
}
printInfo({name: "kobe", age: 40})
// 另外一种写法:对空对象进行解构,解构之后设置默认值
function printInfo1({name = "why", age = 18} = {}) {
console.log(name, age)
}
printInfo1()
默认值的形参一般放后面
另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的），但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配。
// 有默认值的形参最好放到最后
function bar(x, y, z = 30) {
console.log(x, y, z)
}
bar(10, 20)
我们都知道函数都有一个length属性，表示的是函数的参数个数，如果函数有默认值，默认值以及后面的参数都不计算在length之内。
// 有默认值的函数的length属性
function baz(x, y, z, m, n = 30) {
console.log(x, y, z, m, n)
}
console.log(baz.length) //4
函数的剩余参数
ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中，如果最后一个参数是 ... 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组。
那么剩余参数和arguments有什么区别呢？
- 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；
- arguments对象不是一个真正的数组，而剩余参数是一个真正的数组，可以进行数组的所有操作；
- arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而剩余参数是ES6中提供并且希望以此来替代arguments的；
- 剩余参数必须放到最后
函数箭头函数的补充
在前面我们已经学习了箭头函数的用法，这里进行一些补充：箭头函数是没有显式原型的，所以不能作为构造函数，不能使用new来创建对象。
- 箭头函数不会绑定this、arguments属性，所以如果想找this、arguments会去上层作用域查找
- 箭头函数是没有显式原型的，所以不能作为构造函数，不能使用new来创建对象。
展开语法
展开语法(Spread syntax)：可以将数组、字符串、对象展开。
展开语法的场景：
- 用于函数调用时，展开数组，用于传递参数
- 构建数组时，展开数组或字符串，返回新数组
- 创建字面量对象时，展开对象，创建新对象。这个是在ES2018（ES9）中添加的新特性。
const names = ["abc", "cba", "nba"]
const name = "why"
const info = {name: "why", age: 18}
function foo(x, y, z) {
console.log(x, y, z)
}
// 1.函数调用时
// 第一种方式:可以,但是没必要
// foo.apply(null, names)
foo(...names)
foo(...name) //打印 w h y
// 2.构造数组时
const newNames = [...names, ...name]
console.log(newNames)
// 3.构建对象字面量时ES2018(ES9)
const obj = { ...info, address: "广州市", ...names }
console.log(obj)
注意：展开运算符其实是一种浅拷贝。意思就是只会拷贝第一层，下一层如果是引用类型的话，那么拷贝前后的对象的第二层都是指向同一个对象，会有相互影响的。
数值的表示
在ES6中规范了二进制和八进制的写法：
const num1 = 100 // 十进制
// b -> binary
const num2 = 0b100 // 二进制
// o -> octonary
const num3 = 0o100 // 八进制
// x -> hexadecimal
const num4 = 0x100 // 十六进制
console.log(num1, num2, num3, num4)
另外在ES2021新增特性：数字过长时，可以使用_作为连接符
// 大的数值的连接符(ES2021 ES12), 好处就是易读, 类似以前的三位加个逗号
const num = 10_000_000_000_000_000
console.log(num)
Symbol的基本使用
Symbol是什么呢？Symbol是ES6中新增的一个基本数据类型，翻译为符号。那么为什么需要Symbol呢？
在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突；
- 比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易造成冲突，从而覆盖掉它内部的某个属性；
- 比如我们前面在讲apply、call、bind实现时，我们有给其中添加一个fn属性，那么如果它内部原来已经有了fn属性了呢？
- 比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉；
Symbol就是为了解决上面的问题，用来生成一个独一无二的值。Symbol值是通过Symbol函数来生成的，生成后可以作为属性名；也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；
Symbol即使多次创建值，它们也是不同的：Symbol函数执行后每次创建出来的值都是独一无二的；我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；
Symbol作为属性名
我们通常会使用Symbol在对象中表示唯一的属性名：
相同值的Symbol
前面我们讲Symbol的目的是为了创建一个独一无二的值，那么如果我们现在就是想创建相同的Symbol应该怎么来做呢？
我们可以使用Symbol.for方法来做到这一点；并且我们可以通过Symbol.keyFor方法来获取对应的key；
Set的基本使用
在ES6之前，我们存储数据的结构主要有两种：数组、对象。
在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。
Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。
创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）,我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。
Set的常见方法
Set常见的属性：
size：返回Set中元素的个数；
Set常用的方法：
add(value)：添加某个元素，返回Set对象本身；
delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
has(value)：判断set中是否存在某个元素，返回boolean类型；
clear()：清空set中所有的元素，没有返回值；
forEach(callback, [, thisArg])：通过forEach遍历set；
另外Set是支持for of的遍历的。
WeakSet使用
和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
那么和Set有什么区别呢？
- 区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
- 区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；
WeakSet常见的方法：
add(value)：添加某个元素，返回WeakSet对象本身；
delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；
WeakSet的应用场景
注意：WeakSet没有clear方法，也不支持遍历
因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。所以存储到WeakSet中的对象是没办法获取的；
那么这个东西有什么用呢？事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；
比如我们有个方法，我们只希望通过new出来的实例来调用，不希望通过其他方式调用，就可以通过如下方式实现：
Map的基本使用
另外一个新增的数据结构是Map，用于存储映射关系。但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？
事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；某些情况下我们可能希望通过其他类型作为key，比如对象，如果是对象作为key使用在对象中，这个时候会自动将对象转成字符串来作为key。所以我们就可以使用Map，因为Map的key可以是对象。
注意：通过new Map创建map，参数是数组里面嵌套数组。因为如果使用对象的那种方式会把obj1当成字符串。
const map = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])
Map的常用方法
Map常见的属性：
size：返回Map中元素的个数；
Map常见的方法：
set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
delete(key)：根据key删除一个键值对，返回Boolean类型；
has(key)：判断是否包括某一个key，返回Boolean类型；
clear()：清空所有的元素；
forEach(callback, [, thisArg])：通过forEach遍历Map；
Map也可以通过for of进行遍历。当然遍历出来的每一项都是个数组。
WeakMap的使用
和Map类型的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。
那么和Map有什么区别呢？
- 区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
- 区别二：WeakMap的key对对象的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；
WeakMap常见的方法有四个：
set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；
WeakMap的应用
注意：WeakMap也没有clear方法，也不能遍历
因为没有forEach方法，也不支持通过for of的方式进行遍历；
那么我们的WeakMap有什么作用呢？
Vue3响应式原理就使用了WeakMap，比如我们有一个响应式对象obj，首先创建一个Map，Map的key就是obj的key，Map的value就是对应的render函数，然后再创建一个WeakMap，WeakMap的key就是obj对象，WeakMap的value就是这个Map。当我们界面的数据发生改变的时候，先在WeakMap里面使用obj找到对应的Map，然后再根据obj的key找到对应的render函数，然后再执行render函数。
为什么外层使用WeakMap呢？就是如果有一天obj对象不使用了，那么它就会被销毁了，并且对应保存的Map也会被销毁的。
ES7 - Array Includes
在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。
在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。
ES7 – 指数(乘方) exponentiation运算符
在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。
在ES7中，增加了 ** 运算符，可以对数字来计算乘方。
ES8 - Object values
ES6之前我们可以通过 Object.keys 获取一个对象所有的key，在ES8中提供了 Object.values 来获取所有的value值：
ES8 - Object entries
通过Object.entries(obj) 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。
上面我们说了，通过new Map创建map，参数是数组里面嵌套数组，其实里面就是entries。
ES8 - String Padding
某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的。
我们简单具一个应用场景：比如需要对身份证、银行卡的前面位数进行隐藏，只显示后四位：
ES8 - Trailing Commas 结尾逗号
在ES8中，我们允许在函数定义和调用时多加一个逗号，以前是不允许后面有逗号的。
ES8 - Object Descriptors
ES8中增加了另一个对对象的操作是 Object.getOwnPropertyDescriptors，可以获取对象的所有属性描述符。
async、await也是ES8新增的，后面讲Promise再说。
ES9新增知识点
- Async iterators：后续迭代器、生成器的时候再讲。
- Object spread operators：对象的展开运算符。
- Promise finally：后续讲Promise再讲。
ES10 - flat、flatMap方法
flat是降维、扁平的意思。
- map方法：传入一个函数，将数组中的元素操作一下返回，将所有的返回值作为一个新数组返回。
- flat()方法传入一个降维的维度，不传默认是1，会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
- flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
注意：flatMap是先进行map操作，再做flat的操作，flatMap中的flat相当于深度为1。
ES10 - Object fromEntries
在前面，我们可以通过 Object.entries(obj) 将一个对象转换成 entries，那么如果我们有一个entries了，如何将其转换成对象呢？
ES10提供了 Object.formEntries(entries)来完成转换，那么这个方法有什么应用场景呢？
const obj = {
name: "why",
age: 18,
height: 1.88
}
const entries = Object.entries(obj)
console.log(entries)
// 可以通过遍历将entries转成对象
// const newObj = {}
// for (const entry of entries) {
// newObj[entry[0]] = entry[1]
// }
// 1.ES10中新增了Object.fromEntries方法
const newObj = Object.fromEntries(entries)
console.log(newObj)
// 2.Object.fromEntries的应用场景
const queryString = 'name=why&age=18&height=1.88'
const queryParams = new URLSearchParams(queryString)
// 打印结果是: URLSearchParams {'name' => 'why' ,'age' => '18', 'height' => '1.88'}
for (const param of queryParams) {
console.log(param) //当我们遍历这个对象的时候发现每一项是个数组 [name,why] [age,18] [height,1.88]
}
// 直接将这个可遍历对象转成数组
const paramObj = Object.fromEntries(queryParams)
console.log(paramObj)
ES10 - trimStart trimEnd
去除一个字符串首尾的空格，我们可以通过trim方法，如果单独去除前面或者后面呢？
ES10中给我们提供了trimStart和trimEnd用来去除前面或者后面的空格。
ES10 其他知识点
- Symbol description：获取Symbol的description。
- Optional catch binding：后面讲解try cach讲解。
ES11 - BigInt
在早期的JavaScript中，我们不能正确的表示过大的数字，大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的。
ES11中，引入了新的数据类型BigInt，用于表示大的整数，BitInt的表示方法是在数值的后面加上n，或者使用BigInt()。
// ES11之前 大于max_safe_integer的值无法正确的标识
const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt) // 9007199254740991
console.log(maxInt + 1) //9007199254740992
console.log(maxInt + 2) //9007199254740992 表示的就是错的
// ES11之后: BigInt
const bigInt = 900719925474099100n
console.log(bigInt + 10n) //900719925474099110n
const num = 100
console.log(bigInt + BigInt(num)) //900719925474099200n
const smallNum = Number(bigInt)
console.log(smallNum) //900719925474099100
ES11 - Nullish Coalescing Operator 空值合并运算符？？
以前我们为了解决e的兼容性问题，有如下代码：
e = e || window.event;
|| 是逻辑或运算，只要 || 前面为true，就返回 || 前面的值，否则返回 || 后面的值。
但是 || 有弊端，比如前面是0或者空字符串，使用的也是后面的值，但是有可能我们的值就是0或者空字符串，那么我们怎么使用前面的值呢？
ES11增加了空值合并操作符(Nullish Coalescing Operator)，也就是？？。
？？只有当前面是undefined或者null，才使用后面的值，以后都推荐使用？？。
ES11 - Optional Chaining 可选链
可选链也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁。
const info = {
name: "why",
// friend: {
// girlFriend: {
// name: "hmm"
// }
// }
}
// 如果突然分手了,不加if会报错的,所以以前是这样写代码
console.log(info.friend.girlFriend.name)
if (info && info.friend && info.friend.girlFriend) {
console.log(info.friend.girlFriend.name)
}
// ES11提供了可选链(Optional Chainling),现在这样写更简洁,这样如果前面没值，后面代码就不执行了
console.log(info?.friend?.girlFriend?.name)
ES11 - 统一的全局对象 GlobalThis
在之前我们希望获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的，比如在浏览器中可以通过this(全局环境下)、window来获取，比如在Node中我们需要通过global来获取。
那么在ES11中对获取全局对象进行了统一的规范：globalThis
ES11 - for..in标准化
在ES11之前，虽然很多浏览器支持for...in来遍历对象类型，但是并没有被ECMA标准化。在ES11中，对其进行了标准化，for...in是用于遍历对象的key的。
ES11 其他知识点
- Dynamic Import：后续ES Module模块化中讲解。
- Promise.allSettled：后续讲Promise的时候讲解。
- import meta：后续ES Module模块化中讲解。
ES12 - FinalizationRegistry 给对象添加销毁的回调
FinalizationRegistry可以让你在对象被垃圾回收时请求一个回调。
FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。（清理回调有时被称为 finalizer ）;
你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值，有点类似OC的deallc方法。
// ES12: FinalizationRegistry类
const finalRegistry = new FinalizationRegistry((value) => {
console.log("注册在finalRegistry的对象, 某一个被销毁", value)
})
let obj = { name: "why" }
let info = { age: 18 }
// 第一个参数是给哪个参数添加销毁前的回调
// 第二个参数是给对象起个名字,表明是哪个对象,这个值会传递到回调函数的value里面
finalRegistry.register(obj, "obj")
finalRegistry.register(info, "value")
obj = null
info = null
ES12 - WeakRef 弱引用
如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用，如果我们希望是一个弱引用的话，可以使用WeakRef。
这时候obj是强引用这个对象，info是弱引用这个对象。
如果通过弱引用拿到对象，可以使用deref()方法，如果原对象没有销毁，deref()方法可以获取到原对象，如果原对象已经销毁，那么获取到的是undefined。
// ES12: WeakRef类
// WeakRef.prototype.deref:
// > 如果原对象没有销毁, 那么可以获取到原对象
// > 如果原对象已经销毁, 那么获取到的是undefined
const finalRegistry = new FinalizationRegistry((value) => {
console.log("注册在finalRegistry的对象, 某一个被销毁", value)
})
let obj = { name: "why" }
let info = new WeakRef(obj)
finalRegistry.register(obj, "obj")
obj = null
setTimeout(() => {
console.log(info.deref() && info.deref().name) // 以前的写法
console.log(info.deref()?.name) //可选链的写法
}, 10000)
ES12 - logical assignment operators 逻辑赋值运算
// 1. ||= 逻辑或赋值运算
let message = "hello world"
// message = message || "default value"
message ||= "default value" //上面代码的简写,用得少
console.log(message)
// &&的使用
const obj = {
name: "why",
foo: function() {
console.log("foo函数被调用")
}
}
obj.foo && obj.foo() // 有这个方法才调用
// 2. &&= 逻辑与赋值运算符 (基本不用,因为我们使用上面的&&更多)
let info = {
name: "why"
}
// 下面艰难的举一个例子
// 判断info有没有值, 有值的情况下, 取出info.name, 赋值给info
// info = info && info.name
info &&= info.name
console.log(info)
// 3.??= 逻辑空赋值运算
let message = 0
// message = message ?? "default value"
message ??= "default value"
console.log(message) // 0
// 逻辑空赋值运算和逻辑或赋值运算的区别其实就是??和||的区别, 这个上面讲过了
ES12其他知识点
- Numeric Separator：数值特别大的时候可以使用_分隔，这个前面讲二进制八进制说过了。
- String.replaceAll：字符串替换，和replace是相似的，只不过可以匹配所有的字符串。
