JS 有趣的东西

Optional chaining（可选链操作符）-- ?.

可以直接读取连接对象链深处的属性值，而不用去检查链中的每个属性是否存在

如果引用为null或undefined，则表达式将短路，返回值为undefined，而不是报错
当与函数调用一起使用时，如果给定的函数不存在，则返回undefined

不能用于未声明的根对象，但可以与未定义的根对象一起使用

const pets = {
	cat: {
		name: 'Alice',
		age: 2
	},
	dog: {
		age: 4
	}
};

const dogName = pets?.dog?.name;
const dogName_ = pets.dog.name;

console.log(dogName)
//output: undefined
console.log(dogName_)
//output: Cannot read property 'name' of null

语法

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

描述

一个具有嵌套结构的对象obj，如果没有可选链操作，查找深度嵌套的子属性需要验证中间的引用：

let deepNested = obj.first && obj.first.second && obj.first.second.third

使用可选链操作符后，不用基于前面的引用去显式测试，会隐式确保前面的引用存在才会继续访问：

let deepNested = obj.first?.second?.third

函数方法
利用可选链操作去尝试调用不存在的方法，表达式自动返回undefined，而不是在未找到方法时抛出异常:

let result = someInterface.customMethod?.()
//如果customMethod 是一个属性名而不是一个方法，这里就会抛TypeError错误
//如果someInterface 本身为null或者undefined，也会抛出TypeError错误
//如果接受someInterface 为null或undefined，则需要改写为：someInterface?.customMethod?.()

在可选回调或事件处理时使用，可能有一些不存在的值：

function doSomething(onContent, onError) {
	try {
	// ... do something with the data
	}
	catch(err) {
		onError?.(err.message);
		//if(onError) {
		//	onError(err.message);
		//}
	}
}

表达式

let nestedValue = obj?.['prop' + 'name']

可选链操作不能在赋值左侧出现

let object = {};
object?.prop = 1;
//Uncaught SyntaxError: Invalid left-hand side in assignment

使用可选链操作访问数组项

let arrItem = arr?.[7];

JavaScript/Optional_chaining

Nullish coalescing operator（空值合并操作符）-- ??

空值合并操作符是一个逻辑运算符
当左边操作数为null或者undefined，返回右边操作数；否则返回左边操作数