JavaScript 条件式属性访问操作符

JavaScript 条件式属性访问操作符 ?.

• ?. 操作符是 ES2020 引入的新特性，是一个 条件式属性访问操作符。
• 用于在当你访问一个对象的值为 undefined 变量的某个属性值时，如果使用 . 操作符会直接报错。但是如果使用 条件式属性访问操作符 来访问会返回 undefined

案例如下：

let books = {
	bookName:"JavaScript权威指南",
	sellingPrice:139,
	publishingHouse:"机械工业出版社",
	booksInfo:{
		color:"write",
		version:"7",
		author:"David Flanagan"
	}
}

可以看到，上方定义了一个描述书的对象，那么如果我们在 无法确定这个对象的某个值是 undefined 还是对象 的时候 ，我们除了可以使用 if 去判断之外，还可以直接用 条件式访问操作符 来访问某个属性， 就算被访问的对象是undefined，也不会报错 。而是 返回 undefined

console.log(books);  // => {bookName: 'JavaScript权威指南',sellingPrice: 139,publishingHouse: '机械工业出版社',booksInfo: { color: 'write', version: '7', author: 'David Flanagan' }}
console.log(books.booksInfo.version); // => 7

// 下方故意写错
console.log(books.booksInfos.colors);
TypeError: Cannot read property 'colors' of undefined
    at Object.<anonymous> (C:\Users\Users\Desktop\test.js:22:30)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
    at Module.load (internal/modules/cjs/loader.js:1040:32)
    at Function.Module._load (internal/modules/cjs/loader.js:929:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
// => 可以看到，上方没有使用条件式访问操作符，直接访问了 undefined 下面的 属性，所以导致程序直接报错，不会继续往下执行啦

// 下方故意写错，使用 ` 条件式访问操作符 ` 来验证是否报错
console.log(books.booksInfos?.colors); // => undefined (程序没有中断执行，同时返回的是 undefined)