让你的代码像诗一样

可选链运算符号

先看一段代码

const obj = { a: { b: [{ name: 'obj' }]}}

// 原本的写法
console.log(obj && obj.a && obj.a.b.length && obj.a.b[0].name

// 可选链写法
console.log(obj?a?.b?.[0]?.name); // obj
console.log(obj?.b?.c?.d) // undefined

基本使用

• 读取对象属性

const obj = { a: { name: 'obj' }}
obj?.a?.name // obj

• 读取对象属性, 动态key

const obj = { a: { name: 'obj'} }
obj?.a?.['name'] // obj

• 数组下标访问 const skills = ['css', 'html', 'javaScript', 'vue'] skills?.[3]
• 函数调用

const obj = {
    fun() {
      console.log('hello world')
    }
}
obj?.fun?.() // hello world

语法

   obj.val?.prop
   obj.val?[expr]
   obj.func.(args)