标签：log console name ES2020 特性 操作符 user response undefined

ES2020新特性，js中的可选链操作符?.

概述

回想一下，我们是如何访问可能含有空值(null或undefined)属性的嵌套对象，比如访问web api 返回结果的user详情，可以使用嵌套的三元运算符像这样：

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;

语法

可选链操作符 ?. 是在 Javascript ES2020 中引入的，其语法如下：

obj.val?.prop       如果val存在返回 obj.val.prop, 否则 undefined.
obj.func?.(args)    如果func存在返回 obj.func(args) , 否则 undefined.
obj.arr?.[index]    如果array存在返回 obj.array[index] , 否则 undefined.

用法

以user对象为例，学习 ?. 的用法

const user = {
  name: "John",
  age: 21,
  homeaddress: {
    country: "USA"
  },
  hobbies: [{name: "Coding"}, {name: "Cooking"}],
  getFirstName: function(){
    return this.name;
  }
}

对象

访问存在的属性返回值：

console.log(user.homeaddress.country); 
// 打印 "USA";

访问不存在的属性会报错：

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

使用可选链操作符 ?. 访问不存在的属性。返回 undefined ：

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

方法

调用存在的方法：

console.log(user.getFirstName()); 
// 打印 "John";

调用不存在的方法会抛出异常

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

使用可选链操作符 ?. 访问不存在的方法，返回 undefined ：

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

数组

访问数组存在的索引返回值：

console.log(user.hobbies[0].name); 
// 打印 "Coding";

访问数组不存在的索引抛出异常：

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

使用可选链操作符 ?. 访问数组不存在的索引，返回 undefined

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

访问不存在的数组，会抛出异常

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

使用可选链操作符 ?. 访问不存在的数组，返回 undefined :

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

与空值合并操作符??一起使用

有的时候，我们希望不返回 undefined 而是返回一个默认值，这个时候，我们可以使用空值合并操作符??完成这一工作。

不使用 ?? ，返回 undefined :

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

与 ?? 合用，返回一个默认值

const country = user.officeaddress?.country ?? "China";
console.log(country);
// 打印 "China"

标签：log,console,name,ES2020,特性,操作符,user,response,undefined
来源： https://www.cnblogs.com/MutualExchange/p/15631285.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。