聊聊JavaScript中的可选 (?.)操作符(2)-木庄网络博客

1 2	`console.log(user.homeaddress.country);` `// 中国`

访问不存在的属性：

1 2	`console.log(user.officeaddress.country);` `// throws error "Uncaught TypeError: Cannot read property 'country' of undefined"`

改用 ?. 访问不存在的属性：

1 2	`console.log(user.officeaddress?.country);` `// undefined`

访问存在的方法：

1	`console.log(user.getFirstName());`

访问不存在的方法：

1 2	`console.log(user.getLastName());` `// throws error "Uncaught TypeError: user.getLastName is not a function";`

改用 ?. 访问不存在的方法：

1 2	`console.log(user.getLastName?.());` `// "undefined"`

访问存在的数组：

1 2	`console.log(user.hobbies[0].name);` `// "敲代码"`

访问不存在的方法：

1 2	`console.log(user.hobbies[3].name);` `// throws error "Uncaught TypeError: Cannot read property 'name' of undefined"`

改用 ?. 访问不存在的数组：

1 2	`console.log(user.dislikes?.[0]?.name);` `// "undefined"`

我们知道 ?. 操作符号如果对象不存在，刚返回 undefined，开发中可能不返回 undefined 而是返回一个默认值，这时我们可以使用双问题 ?? 操作符。

有点抽象，直接来一个例子：

const country = user.officeaddress?.country;
console.log(country);
// undefined

需要返回默认值：

const country = user.officeaddress?.country ?? "中国";
console.log(country);
// 中国

英文原文地址：https://codingncoepts.com/javascript/optional-chaining-opeator-javascript/
作者：Ashish Lahoti

更多编程相关知识，请访问：编程入门！！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者