ES2020新特性鏈操作符 '?.'和'??' - ⎝⎛CodingNote.cc ⎞⎠

ES2020新特性鏈操作符 ‘?.’和’??’

2021 年 12 月 1 日
筆記
ES6+, javascript

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"

Tags: ES6+ javascript