ECMAScript-新特性-动态导入、可选链、空值合并运算符

一、ECMAScript-ES11-新特性

1. Dynamic import()

• 动态导入

  const btn = document.querySelector('#btn')
  btn.addEventListener('click', () => {
      import('./ajax').then(mod => {
          mod.default('static/a.json', res => {
            console.log(res)          
          })
      })
  })
  // vue的动态路由
  

2. Optional chaining

• 可选链

  const user = {
      baseInfo: {
          name: 'zhangsan',
          age: 19,
          getAddress() {
              return "北京"
          }
      }
  }
  console.log(user?.baseInfo?.name) // 获取属性 ?.必须连在一起，不可分割
  console.log(user?.baseInfo?.getAddress?.()) // 调用方法
  

3. Nullish coalescing Operator

• 空值合并运算符

  // 以前我们需要判断一个变量，有值就取该值，如果没有值，则取默认值，以前我们的做法是使用||
  console.log(false || 1000) // 1000
  console.log(undefined || 1000) //1000
  console.log(null || 1000) // 1000
  console.log(0 || 1000) // 1000
  
  // 存在一个缺陷，假如我就是要取0或者false呢，这个时候就要使用??
  // ??除了null和undefined取默认值，其他都是取传入的值
  console.log(0 ?? 1000) // 0
  console.log(null ?? 1000) // 1000