ES11 新增方法：Dynamic Import()、BigInt、globalThis、可选链（?.）、空值合并运算符

目录

Dynamic Import() 动态导入

BigInt 表示任意精度的整数

globalThis 全局作用域中的 this

可选链 Optional chaining ?.

空值合并运算符 ??

---

Dynamic Import() 动态导入

• 在使用 webpack 打包的时候，按需加载的文件会打包成一个一个小模块
• 当异步加载组件较多会生成多个单文件，对于前端性能而言，虽然每个文件更小了，但可能意味着更多的网络连接建立和关闭开销，在前端优化实践中，通常需要在文件数量和单个文件大小之间取得平衡
• webpackChunkName 指定打包模块的名字，相同模板会打包进一个 JS 文件

const routes = [
  {
    path: '/about',
    name: 'About',
    // 懒加载方式一
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  }
]

// 懒加载方式二
const About = () => import(/* webpackChunkName: "about" */'@/views/About.vue')

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About // 引入变量
  }
]

// 正常加载
import HelloWorld from '@/components/HelloWorld.vue'

• 预加载：提前加载；懒加载：延迟加载

BigInt 表示任意精度的整数

• ES10 新增的原始数据类型，可以表示超长数据，可以超出 2 的 53 次方

BigInt 有两种方式

1）数字后面增加 n

const bigInt = 9007199254740993n
console.log(bigInt)
console.log(typeof bigInt) // bigint

console.log(1n == 1) // true
console.log(1n === 1) // false

2）使用 BigInt 函数

const bigIntNum = BigInt(9007199254740993n)
console.log(bigIntNum)

globalThis 全局作用域中的 this

• 全局作用域中的 this 就是 globalThis，可以安心使用 globalThis，不必担心它的运行环境
• self：打开任何一个网页，浏览器会首先创建一个窗口，这个窗口就是一个 window 对象，也是 js 运行所依附的全局环境对象和全局作用域对象
• self 指窗口本身，它返回的对象跟 window 对象是一模一样的；window 对象常用方法和函数都可以用 self 代替 window

self.setTimeout(() => {
    console.log(123, self)
}, 1000)

// 严格比较
globalThis === self // true
globalThis === this // true
self === this // true

可选链 Optional chaining ?.

• 查询多层级对象时，不再需要进行冗余的各种前置校验
• 可选链中的 ? 表示如果问号左边表达式有值，就会继续查询问号后面的字段

const user = {
    address: {
        street: 'xx街道',
        getNum() {
            return '80号'
        }
    }
}

const street2 = user?.address?.street
const num2 = user?.address?.getNum?.()
console.log(street2, num2)

空值合并运算符 ??

• 空值合并运算符（??）是一个逻辑运算符
• 当左侧操作数为 null 或 undefined 时，其返回右侧操作数。否则返回左侧操作数
• 当我们查询某个属性时，经常会遇到，如果没有该属性就会设置一个默认值
• 空值合并运算符 ??， 仅在第一项为 null 或 undefined 时，设置默认值有效

// false 0  无效
let b
let a = b ?? 123
console.log(a) // 123

• const 声明的变量必须赋初始值，下面代码在控制台中会报错 Missing initializer in const declaration（常量声明中缺少初始值设定项）

// false 0  无效
const b // 控制台会报错 Uncaught SyntaxError: Missing initializer in const declaration
const a = b ?? 123
console.log(a) // 不会输出被阻断了，因为上面代码报错

• 请使用以下写法

// false 0  无效
const b = null
const a = b ?? 123
console.log(a) // 123