ES2020 实用新特性

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

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类型只能安全地表示-90071992740991 (-(2^53-1)) 和90071992740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。

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

原文，公众号看到的学习一下：