JavaScript中如何使用可选链操作符(?.)进行安全访问？

本文共计1233个文字，预计阅读时间需要5分钟。

JavaScript 中的可选操作符（Optional chaining）允许你安全地访问嵌套对象属性，即使某些属性可能不存在。以下是如何使用 `null`、`undefined` 和可选操作符来检查和访问对象嵌套属性的方法：

javascript// 假设有一个嵌套的对象const person={ name: Alice, address: { street: 123 Main St, city: Wonderland }};

// 使用可选操作符来安全地访问嵌套属性const street=person.address?.street; // 如果 address 或 street 不存在，street 将是 undefined

// 检查 street 是否为 undefinedif (street===undefined) { console.log(Street property is not defined.);} else { console.log(Street:, street);}

// 使用 null 和 undefined 检查对象属性if (person.address===null || person.address===undefined) { console.log(Address object is either null or undefined.);} else { console.log(Address object is defined.);}

// 检查嵌套属性const city=person.address?.city;if (city===undefined) { console.log(City property is not defined.);} else { console.log(City:, city);}

在这个例子中，我们使用了可选操作符 `?.` 来安全地访问 `person.address.street` 和 `person.address.city`。如果中间的属性不存在，表达式将返回 `undefined` 而不会抛出错误。通过使用 `null` 和 `undefined` 的检查，我们可以确定对象是否完全不存在或者某个属性是否未定义。

本篇文章给大家介绍一下JavaScript中的可选 (?.)操作符。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

如何使用null (null和undefined)检查访问对象的嵌套属性?假设我们必须从后台的接口访问用户详细信息。

可以使用嵌套的三元运算符 :

const userName = response ? (response.data ? (response.data.user ? response.data.user.name : null) : null) : null;

或者使用 if 进行空值检查：

let userName = null; if(response && response.data && response.data.user){ userName = response.data.user.name; }

或者更好的方法是使它成为一个单行链接的&&条件，像这样:

const userName = response && response.data && response.data.user && response.data.user.name;

上述代码的共同之处在于，链接有时会非常冗长，并且变得更难格式化和阅读。这就是 ?.操作符被提出来的原因，我们改下 ?. 重构上面的代码：

const userName = response?.data?.user?.name;

很 nice 呀。

语法

?. 语法在ES2020 中被引入，用法如下：

obj.val?.pro // 如果`val`存在，则返回`obj.val.prop`，否则返回 `undefined`。 obj.func?.(args) // 如果 obj.func 存在，则返回 `obj.func?.(args)`，否则返回 `undefined`。 obj.arr?.[index] // 如果 obj.arr 存在，则返回 `obj.arr?.[index]`，否则返回 `undefined`。

使用?.操作符

假设我们有一个 user 对象：

const user = { name: "前端小智", age: 21, homeaddress: { country: "中国" }, hobbies: [{name: "敲代码"}, {name: "洗碗"}], getFirstName: function(){ return this.name; } }

属性

访问存在的属性：

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

访问不存在的属性：

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

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

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

方法

访问存在的方法：

console.log(user.getFirstName());

访问不存在的方法：

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

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

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

数组

访问存在的数组：

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

访问不存在的方法：

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

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

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); // 中国

英文原文地址：codingncoepts.com/javascript/optional-chaining-opeator-javascript/

作者：Ashish Lahoti

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

以上就是聊聊JavaScript中的可选 (?.)操作符的详细内容，更多请关注自由互联其它相关文章！