可选链?.的使用

Why?

解决数据可能为null带来的错误同时避免重复代码
当访问一个深层树形结构的对象的时候，需要判断中间节点树形是否存在
如果不判断会出现eg: TypeError: Cannot read properties of undefined (reading 'bio')

let obj01 = {name: 'test'}
console.log(obj01.info.bio)

Error: TypeError: Cannot read properties of undefined (reading 'bio')
// 传统解决方案
let bio = obj01.info && obj01.info.bio; // undefined
// 可选链可以避免重复代码
let bio = obj01.info?.bio; // undefined

使用 ?? 来解决对象具体某个值为null时添加默认值

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false