JS运算符实操妙用 — &&、??、?.

与运算符（&&）

&&”连接两个表达式，当两侧表达式都为真时，返回TRUE。有一个为假则返回FALSE。

a && b：

如果a是false，那么b不管是true还是false，都返回false，因此不用判断b了，这个时候刚好判断到a，因此返回a。

如果a是true，不管b是true是false，都返回b。

<button @click=btnClick('zxBtn1')>执行方法1</button>

btnClick(type) {
      const btn1 = () => {
        alert('执行btn1方法')
      }
      const btn2 = () => {
        alert('执行btn2方法')
      }
      const funClick = {
        'zxBtn1': btn1,
        'zxBtn2': btn2,
      }
      funClick[type] && funClick[type]()
}


//点击 执行方法1 时 ，弹窗显示 '执行btn1方法' 


注意：若btnClick方法传入的值为其他值并未在方法内定义，则方法不执行任何操作，形成短路。

可选链操作符( ?. )

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

let data={name:'张三',info:{age:'18'}}
let dataSex = data.info?.sex
let dataAge = data.info?.age
console.log(dataSex) //undefined
console.log(dataAge ) //18

空值合并操作符（??）

只有当左侧为null和undefined时，才会返回右侧的数。否则返回左侧的操作数。

let data = null
let newData = data??'def'
console.log(newData) //'def'

巧用运算符，大家快去试试吧！