可選鏈 "?."
可選鏈 ?.
是一種訪問嵌套對象屬性的安全的方式。即使中間的屬性不存在,也不會出現錯誤。
“不存在的屬性”的問題
如果你纔剛開始讀此教程並學習 JavaScript,那可能還沒接觸到這個問題,但它卻相當常見。
舉個例子,假設我們有很多個 user
對象,其中存儲了我們的用戶數據。
我們大多數用戶的地址都存儲在 user.address
中,街道地址存儲在 user.address.street
中,但有些用戶沒有提供這些信息。
在這種情況下,當我們嘗試獲取 user.address.street
,而該用戶恰好沒提供地址信息,我們則會收到一個錯誤:
let user = {}; // 一個沒有 "address" 屬性的 user 對象
alert(user.address.street); // Error!
這是預期的結果。JavaScript 的工作原理就是這樣的。因爲 user.address
爲 undefined
,嘗試讀取 user.address.street
會失敗,並收到一個錯誤。
但是在很多實際場景中,我們更希望得到的是 undefined
(表示沒有 street
屬性)而不是一個錯誤。
……還有另一個例子。在 Web 開發中,我們可以使用特殊的方法調用(例如 document.querySelector('.elem')
)以對象的形式獲取一個網頁元素,如果沒有這種對象,則返回 null
。
// 如果 document.querySelector('.elem') 的結果爲 null,則這裏不存在這個元素
let html = document.querySelector('.elem').innerHTML; // 如果 document.querySelector('.elem') 的結果爲 null,則會出現錯誤
同樣,如果該元素不存在,則訪問 null
的 .innerHTML
時會出錯。在某些情況下,當元素的缺失是沒問題的時候,我們希望避免出現這種錯誤,而是接受 html = null
作爲結果。
我們如何實現這一點呢?
可能最先想到的方案是在訪問該值的屬性之前,使用 if
或條件運算符 ?
對該值進行檢查,像這樣:
let user = {};
alert(user.address ? user.address.street : undefined);
這樣可以,這裏就不會出現錯誤了……但是不夠優雅。就像你所看到的,"user.address"
在代碼中出現了兩次。對於嵌套層次更深的屬性就會出現更多次這樣的重複,這就是問題了。
例如,讓我們嘗試獲取 user.address.street.name
。
我們既需要檢查 user.address
,又需要檢查 user.address.street
:
let user = {}; // user 沒有 address 屬性
alert(user.address ? user.address.street ? user.address.street.name : null : null);
這樣就太扯淡了,並且這可能導致寫出來的代碼很難讓別人理解。
甚至我們可以先忽略這個問題,因爲我們有一種更好的實現方式,就是使用 &&
運算符:
let user = {}; // user 沒有 address 屬性
alert( user.address && user.address.street && user.address.street.name ); // undefined(不報錯)
依次對整條路徑上的屬性使用與運算進行判斷,以確保所有節點是存在的(如果不存在,則停止計算),但仍然不夠優雅。
就像你所看到的,在代碼中我們仍然重複寫了好幾遍對象屬性名。例如在上面的代碼中,user.address
被重複寫了三遍。
這就是爲什麼可選鏈 ?.
被加入到了 JavaScript 這門編程語言中。那就是徹底地解決以上所有問題!
可選鏈
如果可選鏈 ?.
前面的部分是 undefined
或者 null
,它會停止運算並返回該部分。
爲了簡明起見,在本文接下來的內容中,我們會說如果一個屬性既不是 null
也不是 undefined
,那麼它就“存在”。
換句話說,例如 value?.prop
:
-
如果 value
存在,則結果與value.prop
相同, -
否則(當 value
爲undefined/null
時)則返回undefined
。
下面這是一種使用 ?.
安全地訪問 user.address.street
的方式:
let user = {}; // user 沒有 address 屬性
alert( user?.address?.street ); // undefined(不報錯)
代碼簡潔明瞭,也不用重複寫好幾遍屬性名。
即使 對象 user
不存在,使用 user?.address
來讀取地址也沒問題:
let user = null;
alert( user?.address ); // undefined
alert( user?.address.street ); // undefined
請注意:?.
語法使其前面的值成爲可選值,但不會對其後面的起作用。
例如,在 user?.address.street.name
中,?.
允許 user
爲 null/undefined
,但僅此而已。更深層次的屬性是通過常規方式訪問的。如果我們希望它們中的一些也是可選的,那麼我們需要使用更多的 ?.
來替換 .
。
不要過度使用可選鏈:
我們應該只將
?.
使用在一些東西可以不存在的地方。例如,如果根據我們的代碼邏輯,
user
對象必須存在,但address
是可選的,那麼我們應該這樣寫user.address?.street
,而不是這樣user?.address?.street
。所以,如果
user
恰巧因爲失誤變爲 undefined,我們會看到一個編程錯誤並修復它。否則,代碼中的錯誤在不恰當的地方被消除了,這會導致調試更加困難。
可選鏈
?.
前的變量必須已聲明如果未聲明變量
user
,那麼user?.anything
會觸發一個錯誤:// ReferenceError: user is not defined
user?.address;
?.
前的變量必須已聲明(例如 let/const/var user
或作爲一個函數參數)。可選鏈僅適用於已聲明的變量。
短路效應
正如前面所說的,如果 ?.
左邊部分不存在,就會立即停止運算(“短路效應”)。
所以,如果後面有任何函數調用或者副作用,它們均不會執行。
例如:
let user = null;
let x = 0;
user?.sayHi(x++); // 沒有 "sayHi",因此代碼執行沒有觸達 x++
alert(x); // 0,值沒有增加
其它變體:?.(),?.[]
可選鏈 ?.
不是一個運算符,而是一個特殊的語法結構。它還可以與函數和方括號一起使用。
例如,將 ?.()
用於調用一個可能不存在的函數。
在下面這段代碼中,有些用戶具有 admin
方法,而有些沒有:
let userAdmin = {
admin() {
alert("I am admin");
}
};
let userGuest = {};
userAdmin.admin?.(); // I am admin
userGuest.admin?.(); // 啥都沒有(沒有這樣的方法)
在這兩行代碼中,我們首先使用點符號(user1.admin
)來獲取 admin
屬性,因爲用戶對象一定存在,因此可以安全地讀取它。
然後 ?.()
會檢查它左邊的部分:如果 admin
函數存在,那麼就調用運行它(對於 user1
)。否則(對於 user2
)運算停止,沒有錯誤。
如果我們想使用方括號 []
而不是點符號 .
來訪問屬性,語法 ?.[]
也可以使用。跟前面的例子類似,它允許從一個可能不存在的對象上安全地讀取屬性。
let user1 = {
firstName: "John"
};
let user2 = null; // 假設,我們不能授權此用戶
let key = "firstName";
alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined
alert( user1?.[key]?.something?.not?.existing); // undefined
此外,我們還可以將 ?.
跟 delete
一起使用:
delete user?.name; // 如果 user 存在,則刪除 user.name
我們可以使用
?.
來安全地讀取或刪除,但不能寫入:可選鏈
?.
不能用在賦值語句的左側。例如:
let user = null;
user?.name = "John"; // Error,不起作用
// 因爲它在計算的是 undefined = "John"這還不是那麼智能。
總結
可選鏈 ?.
語法有三種形式:
-
obj?.prop
—— 如果obj
存在則返回obj.prop
,否則返回undefined
。 -
obj?.[prop]
—— 如果obj
存在則返回obj[prop]
,否則返回undefined
。 -
obj.method?.()
—— 如果obj.method
存在則調用obj.method()
,否則返回undefined
。
正如我們所看到的,這些語法形式用起來都很簡單直接。?.
檢查左邊部分是否爲 null/undefined
,如果不是則繼續運算。
?.
鏈使我們能夠安全地訪問嵌套屬性。
但是,我們應該謹慎地使用 ?.
,僅在當左邊部分不存在也沒問題的情況下使用爲宜。以保證在代碼中有編程上的錯誤出現時,也不會對我們隱藏。
現代 JavaScript 教程:開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦,與 MDN 並列的 JavaScript 學習教程[1]。
在線免費閱讀:https://zh.javascript.info
參考資料
React 官方文檔推薦,與 MDN 並列的 JavaScript 學習教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources
順手點“在看”,每天早下班;轉發加關注,共奔小康路~
加站長好友可進微信羣,跟衆多大佬一起交流技術!
本文分享自微信公衆號 - 1024譯站(trans1024)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。