ecma 2020(ES11) 新特性
ecma自从2015年发布es6后，约定每年发布一个新的版本，来看看ecma 2020版本有哪些有趣的新特性吧。
可选链运算符（?.）
可选链运算符（?.）允许读取位于连接对象链深处的属性值，而不必明确验证链中的每个引用是否有效。它的功能类似于 . 链式运算符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。
当尝试访问可能不存在的对象属性时，可选链运算符将会使表达式更短、更简明。
来看一个例子：
const redirect = route.query && route.query.redirectroute是一个对象，我们想将 route.query.redirect 赋值给redirect变量，但是route的属性无法确定，query属性有可能没有，如果直接将 route.query.redirect 赋值给redirect，那么，一旦route对象中没有query属性，那么就会报错：Uncaught TypeError: Cannot read properties of undefined (reading 'redirect')。所以，为了取到route对象中redirect的值，需要先判断route.query是否存在，再进行取值。
有了可选链运算符（?.），在访问 route.query.redirect 之前，不再需要明确地先校验 route.query 的状态，再用短路计算(&&)来获取最终结果：
const redirect = route.query?.redirect可选链运算符（?.） 会在尝试访问 route.query.redirect 之前，先隐式地检查 route.query ，如果route.query 是 null 或者 undefined，表达式将会短路计算直接返回 undefined。
这个新特性，最大的好处是能够让代码变得更直观，简洁，安全。
空值合并运算符（??）
和可选链运算符（?.）一样，空值合并运算符（??）也长得有点奇怪。它是作为一个替补救火队员的身份出现的，为啥这么说呢？来看一个例子：
const emptyText = ""
const result = emptyText || "default"因为空字符串，是一个假值，Boolean("") === false，所以，上面的结果，result为“default”。有时，我们希望能够进行更严格的判断，只有当这个值是null或undefined时才为false，那么，所以就推出了??运算符。
空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。
与逻辑或运算符（||）不同，逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' "或 0）时。见下面的例子。
Dynamic import()
静态的 import 语句用于导入由另一个模块导出的绑定。比如，在编写SPA项目时，会经常遇到的：
import Vue from 'vue'表示从vue库中导入Vue对象。这样，在本文件中就可以使用导入的Vue对象了，这是JavaScript模块化的体现。
而动态导入则是一个函数，以这种方式调用，将返回一个 promise。来看一个例子：
import('./math.js')
.then(module => {
const result = module.add(5, 10)
console.log(result)
})
.catch(err => console.log(err))其中，math.js如下：
export const add = (x, y) => x + y运行结果为15。
标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。在有些场景中，你希望根据条件导入模块或者按需导入模块（比如，SPA页面的首屏优化），这时你可以使用动态导入代替静态导入。
小结
自从es6这个大版本发布后，JavaScript已经彻底蜕变为一门功能强大且成熟的开发语言，解决了之前es5时代的很多痛点，核心功能该有的也都有了，之后新功能的推出，都是一些小细节的优化和完善。