本文主要是介绍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) // bigintconsole.log(1n == 1) // true
console.log(1n === 1) // false2）使用 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这篇关于ES11 新增方法：Dynamic Import()、BigInt、globalThis、可选链（?.）、空值合并运算符的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
