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)