ES的语法糖-单问号和双问号语法使用

• 可选链（单问号）

1. 使用场景

let body = {
  value: {
    name: 'andy'
  }
}

let result = body?.value
console.log(result); // { name: 'andy' }

// 相当于

let flag = body ? body.value : undefined
console.log(flag) // { name: 'andy' }

2. 如果body其一是null或undefined的话,它就直接返回undefined,不往后执行了，避免了语法报错的风险。它不仅可以针对对象，还可以针对数组：

let arr = { item: [{ name: 'andy' }] }

let getName = ()=>{
  if (arr.item && arr.item.length > 0) {
    return arr.item[0].name
  }
}
console.log(getName()); // andy

// 相当于

let getNameNew = () => {
  return arr.item?.[0]?.name
}
console.log(getNameNew()); // andy

• 双问号

1. 使用场景:

let res = {
  data: {
    content: null, // or false, or 0,
    content1: false,
    content2: 0
  }
}
// 相同点
const tableList1 = res?.data?.content || [4, 5, 6]  //[4,5,6]
const tableList4 = res?.data?.content ?? [4, 5, 6]  //[4,5,6]

// 不同点，对于||，返回false或者0，也会取后者
const tableList2 = res?.data?.content1 || [4, 5, 6]  //[4,5,6]
const tableList3 = res?.data?.content2 || [4, 5, 6]  //[4,5,6]

const tableList5 = res?.data?.content1 ?? [4, 5, 6]  //false
const tableList6 = res?.data?.content2 ?? [4, 5, 6]  //0