ES2020 实用新特性-CFANZ编程社区

ES2020 新特性

1. `??` 判断运算符

??与 || 类似，但是更严格。用来判断运算符左侧是否为null或undefined时，才会返回右侧的值。

适用场景：

'' ?? 1 // ''
'' || 1 // 1
0 ?? 1  // 0
0 || 1  // 1
null ?? 1 // 1
undefined ?? 1 // 1

2. `?.`链式判断运算符

?.判断左侧对象是否为null或undefined。如果是则返回null或undefined；否则，返回右侧的值

适用场景：

简化 &&

// 简化 && 
this.$axios.post().then((res)=>{
	// if(res && res.data && res.data.id)
	if(res ?. data ?. id)
	if(res ?. ['data'] ?. ['id'])
})

简化 ? :三元表达式


// 简化 '? :' 三元表达式
let dom = document.getElementById('myInput')
let val = dom ? dom.value : 
let val = dom ?. value

3.`import()`动态导入，实现按需加载

普通的静态导入:

// 全部导入
import * as myModule from '/modules/my-module.js';

// 单个导入
import {myExport} from '/modules/my-module.js';

// 导入默认值
import myDefault from '/modules/my-module.js';

动态导入，可以通过一些事件去动态触发，并在导入成功后做一些操作。

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });
  // 支持使用await关键字
 let module = await import('/modules/my-module.js');

PS：
请不要滥用动态导入（只有在必要情况下采用）。静态框架能更好的初始化依赖，而且更有利于静态分析工具和tree shaking发挥作用

4. 顶层`await`

不再需要搭配async使用

// import() 方法加载
const strings = await import(`/i18n/${navigator.language}`);
// 数据库操作
const connection = await dbConnector();
// 依赖回滚
let jQuery;
try {
  jQuery = await import('https://cdn-a.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.com/jQuery');
}

5.`String.replaceAll()`一次性替换所有子字符串

replace仅替换第一次出现的子字符串，而replaceAll会替换所有的。

'aaa'.replace(/a/g,'A')     // 'AAA'

'aaa'.replace('a','A')     // 'Aaa'

'aaa'.replaceAll('a','A')  // 'AAA'

6.Proxy替代Object.defineProperty()

Proxy是对整个对象的代理，defineProperty()只能代理某个属性
对象新增属性，proxy可以监听到，defineProperty监听不到
数组的属性的新增修改也是
Proxy的性能要好一些，对象内部属性要全部递归代理，proxy可以只在调用时递归，defineProperty则需要一次性玩完从所有递归

function(){
	return new Proxy(obj,{
		get(target, key){}，
		set(target, key, val){}
	})
}

7.`Promise.any`快速获取一组promise中的第一个响应

一组promise中，只要其中一个promise成功，就返回那个已成功的promise
没有一个成功，就返回一个失败的promise和ArrregateError类型实例

try {
	const first = await Promise.any(promise)
} catch (err) {

}

// 或者
Promise.any(promise).then(
	(first)=>{},
	(err)=>{}
)

8.`BigInt`数据类型

用来表示任意数位的整数
JS 中的,Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。
在这里插入图片描述
使用BigInt,可以在标准JS中执行对大整数的算术运算，而不会有精度损失的风险

计算大整数时不用BigInt就会有精度问题：

9.`Array.prototype.at()`获取数组指定位置的成员

正数表示，从开始数第几个；负数为从末尾数。
在这里插入图片描述

10.哈希前缀`#`标记字段被私有

class ClassWithPrivateField {
    #privateField;
    #privateMethod() {
        return 'hello world';
    }
    constructor() {
        this.#privateField = 42;
    }
}

const instance = new ClassWithPrivateField()
console.log(instance.privateField); //undefined
console.log(instance.privateMethod); //undefined