JavaScript

JavaScript 中的 链判断运算符【?.】

Posted by cl9000 on January 28, 2021

人生不是一种享乐，而是一桩十分沉重的工作。 —-<列夫·托尔斯泰>

作者：Ashish Lahoti
译者：cl9000
来源：https://codingnconcepts.com/javascript/optional-chaining-operator-javascript/

链判断运算符?. 用于通过隐式空检查访问嵌套的对象属性。

概述

如何使用无效（null和undefined）检查访问对象的嵌套属性？假设我们必须通过网络api的响应访问用户详细信息？

您可以? ... :像这样使用嵌套的三元运算符：

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

或者您可以在if这种情况下进行空值检查：-

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

甚至更好的方法可以使其&&像这样的单衬板链条状态：-

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

上面的代码的共同点是，链接有时可能真的很长，并且变得更加难以格式化和读取。这是可选的链接?.运算符提供帮助的地方，该运算符提供了隐式的无效检查，并使我们的代码更小，更好。

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

句法

链判断运算符?. 在Javascript ES2020中引入，其语法如下：-

1
2
3
obj.val?.prop       returns obj.val.prop if val exists, otherwise undefined.
obj.func?.(args)    returns obj.func(args) if func exists, otherwise undefined.
obj.arr?.[index]    returns obj.array[index] if array exists, otherwise undefined.

使用链判断运算符?. 运算符

让我们看看?.操作符与user对象的用法：

1
2
3
4
5
6
7
8
9
10
11
const user = {
  name: "John",
  age: 21,
  homeaddress: {
    country: "USA"
  },
  hobbies: [{name: "Coding"}, {name: "Cooking"}],
  getFirstName: function(){
    return this.name;
  }
}

具有属性

访问存在的属性返回值：

1
2
console.log(user.homeaddress.country); 
// prints "USA";

访问不存在的属性会引发错误：-

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

使用链判断运算符?.不存在的链判断运算符运算符访问属性将返回undefined：-

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

具有功能

调用存在的函数返回值：

1
2
console.log(user.getFirstName()); 
// prints "John";

调用不存在的函数会引发错误：-

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

用链判断运算符?.不存在的Optional chaining operator调用一个函数将返回undefined：-

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

与数组

访问数组的现有索引返回值：

1
2
console.log(user.hobbies[0].name); 
// prints "Coding";

访问数组的不存在的索引会引发错误：-

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

使用链判断运算符?.访问数组的不存在的索引，将返回undefined：-

1
2
console.log(user.hobbies[3]?.name); 
// prints "undefined"

访问不存在的数组会引发错误：-

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

使用链判断运算符?.不存在的访问数组将返回undefined：-

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

与空值合并运算符 ??

现在，您知道如果对象不存在，则链判断运算符?.将返回undefined。有时您想返回一个值，而不是undefined，通过使用空值合并运算符?? 和链判断运算符?.来返回一个值。

如果没有空值合并运算符??，则返回undefined：-

1
2
3
const country = user.officeaddress?.country;
console.log(country);
// prints "undefined"

使用空值合并运算符??，返回默认值：-

1
2
3
const country = user.officeaddress?.country ?? "USA";
console.log(country);
// prints "USA"

参考

关注【公众号】，了解更多。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript
FRIENDS