2022-12-12 深入JavaScript高级语法五——ES7-ES12部分知识点解析

1、ES7知识点解析

1.1、Array新增方法

• includes

跟indexOf最大的差别：当数组里面包含NaN时，includes可以识别到，而indexOf不行。

1.2、指数的运算方法

• **运算符

// ES7之前
const result1 = Math.pow(3, 3) // 27
// ES7
const result2 = 3 ** 3 // 27

2、ES10知识点解析

2.1、Object.fromEntries

// Object.formEntries的应用场景
const queryString = 'name=why&age=18&height=1.88'
const queryParams = new URLSearchParams(queryString)
for (const param of queryParams) {
    console.log(param);
}

const paramObj = Object.fromEntries(queryParams)
console.log(paramObj);

备注：new URLSearchParams讲解

3、ES11知识点解析

2.1、globalThis

// 在浏览器下
// console.log(window);
// console.log(this);

// 在node下
// console.log(global);

// ES11
console.log(globalThis);

4、ES12知识点解析

4.1、FinalizationRegistry类

// ES12：FinalizationRegistry类
const finalRegistry = new FinalizationRegistry((value) => {
    console.log('注册在finalRestry的对象，某一个背销毁', value);
})

let obj = { name: 'why' }
let info = { age: 18 }

finalRegistry.register(obj, 'obj')
finalRegistry.register(info, 'info')

obj = null
info = null

4.2、WeakRef类

如果原对象没有被销毁，那么可以获取的原对象
如果原对象已经销毁，那么获取到的是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()?.name);
    console.log(info.deref() && info.deref().name);
}, 10000)

备注：js中的强引用和弱引用讲解

4.3、03_logical-assign-operator

• ||= 逻辑或运算符

// ||= 逻辑或赋值运算
let message = ''
// message = message || 'default value'
// 等价于
message ||= 'default value'
console.log(message); // 'default value'

• &&= 逻辑与运算符
• ??=逻辑空赋值运算

let message = ''
// message = message ?? 'default value'
// 等价于
message ??= 'default value'
console.log(message); // ''

备注：空值合并运算符（??）

4.4、String.replaceAll

备注：JS 中 replace 和 replaceAll 的区别