可选链式调用(?.)

读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效

在访问一个多层对象或者我们请求数据的时候，理想中的数据可能为null或者undefined，那么这时候我们将其作为一个对象类型去访问其某一个属性或者函数的时候就会发生语法错误 Uncaught TypeError: Cannot read property 'n' of null , 那么我们一般怎么做？ 进行类型的校验 obj && obj.hometown && obj.hometown.name， 过于繁琐，这时候可选裢操作符就产生了作用，自动帮我们判断对象是否为null或者undefined(obj?.hometown?.name)

语法

// 访问对象中的一个属性
obj?.propName      // obj?.name

// 访问对象中的一个函数
obj.funName?.(args)        // obj.func?.()

// 通过表达式的方式访问对象中的一个属性
obj?.[expr]     // obj?.['n'+'ame']

// 访问数组指定下标
obj?.[index]    // arr?.[30]

栗子

const arr = [1,2,3,4,NaN , null , undefined ]

const obj = {
	name : '张三',
  company:{
    name : '三流小厂'
  }
}

arr?.[2]

// 报错
// arr?.2

// 
obj.hometown?.name

//
obj.func?.(1,2)

// 
obj?.['n'+'ame']

1. 访问对象中的可能存在的属性

obj.hometown?.name

// 转换为js 
(_obj$hometown = obj.hometown) === null || _obj$hometown === void 0 ? void 0 : _obj$hometown.name;

2. 访问一个对象中的函数类型的属性并调用

// 调用 obj对象下的func函数
obj.func?.(1,2)

// 转换为js 
(_obj$func = obj.func) === null || _obj$func === void 0 ? void 0 : _obj$func.call(obj, 1, 2); //

3. 支持属性为表达式

// 调用 obj对象下的name属性
obj?.['n'+'ame']
// 转换为js 
obj === null || obj === void 0 ? void 0 : obj['n' + 'ame'];

4. 调用number类型下标的属性

// 访问可能为null或者undefined的arr的下标为3的值
arr?.[3]
// 转换为js 
arr === null || arr === void 0 ? void 0 : arr[2]; 

// 报错
// arr?.3  // 不能直接使用数字3因为报错

Babel插件

@babel/plugin-proposal-optional-chaining

黑科技

1. 空值合并获取并使用默认值

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”