這個(gè)小技巧完全改變了訪問(wèn)JavaScript嵌套對(duì)象的方式！
本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)。
JavaScript以眾多技巧出名，了解JavaScript的所有技巧幾乎不可能。最近在瀏覽JavaScript的相關(guān)文件，閱讀相關(guān)話題時(shí)我又發(fā)現(xiàn)了一個(gè)從沒(méi)見(jiàn)過(guò)的功能點(diǎn)。我大概不是最后一個(gè)學(xué)到這個(gè)技巧的人，所以我想與各位分享。 它完全改變了我訪問(wèn)嵌套對(duì)象的方式!希望它能夠幫助到你們。
技巧
這個(gè)技巧就叫做可選鏈。它實(shí)際上是一個(gè)操作符，寫法是 ?.。根據(jù)Mozilla網(wǎng)站文件，可選鏈操作符的功能是：允許讀取位于連接對(duì)象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。 簡(jiǎn)而言之，可選鏈操作符大大簡(jiǎn)化了對(duì)嵌套對(duì)象的訪問(wèn)。直接看這個(gè)例子，幫助你更好地理解可選鏈操作符的作用。 假如有對(duì)象“房子(house)”如下：
- const house = {
- price: 1000000,
- currency: USD ,
- address: {
- city: New York ,
- street: Main street ,
- postal_code: 1234 AB ,
- state: {
- name: New York ,
- abbreviation: N.Y.
- }
- },
- owner: {
- name: "John Doe"
- }
- }
通常要按照如下方式訪問(wèn)對(duì)象屬性：
- const currency = house.currency
- const price = house.price
- const owner = house.owner.name
這是讀取對(duì)象值的基礎(chǔ)。如果房子沒(méi)有主人呢?我們將無(wú)法讀取不存在的命名屬性，而最后一行代碼會(huì)引起錯(cuò)誤。要想彌補(bǔ)這一點(diǎn)，可以這樣做：
- const owner = house.owner ? house.owner.name : null
高手們可以使用空值合并運(yùn)算符：
- const owner = house.owner.name ?? null
這串代碼的問(wèn)題在于，即使房子這個(gè)對(duì)象沒(méi)有主人，它也不會(huì)停止運(yùn)行。看看下面這個(gè)例子：
- const house = {
- price: 1000000,
- currency: USD ,
- address: {
- city: New York ,
- street: Main street ,
- postal_code: 1234 AB ,
- state: {
- name: New York ,
- abbreviation: N.Y.
- }
- },
- owner: null
- }
使用空值合并運(yùn)算符會(huì)造成錯(cuò)誤，因?yàn)樗荒茏x取屬性中為空的命名(name)。使用三元運(yùn)算符可以運(yùn)行第一個(gè)例子。但如果要探索的屬性是多層嵌套的，還需要挨個(gè)檢查是否存在，那么代碼會(huì)很冗長(zhǎng)，也無(wú)法讀取。 比如，檢查所在州：
- const state = house.address &&house.address.state ? house.address.state.name : null
如你所見(jiàn)，這行代碼變得非常長(zhǎng)，無(wú)法讀取。這時(shí)可選鏈操作符就派上了用場(chǎng)。有了它就不再需要檢查某個(gè)屬性是否存在，從而保持代碼簡(jiǎn)明易懂。如果屬性不存在則會(huì)返回“undefined”。操作符實(shí)際看起來(lái)是這樣的：
- const city = house?.address?.city // "New York"
- const nonExisting = house?.roof?.material // Undefined
- const househouseNumber = house?.address?.number // Undefined
- const state = house?.address?.state?.abbreviation // "N.Y."
是不是一下子就變得很簡(jiǎn)潔明了!
圖源：unsplash
例一嘗試探索“address”屬性下“city”屬性的值。因?yàn)檫@個(gè)屬性存在，“城市”屬性將會(huì)被返回，和使用house.address.city來(lái)獲取值一樣的。 例二嘗試獲得房頂(roof)建材的信息。然而“house”對(duì)象下沒(méi)有“roof”這一屬性，因此返回的是“undefined”，“houseNumber”屬性也是同理。雖然“house”對(duì)象有“address”屬性，這個(gè)屬性卻不包含“number”屬性——也就是這里返回了“undefined”的原因。 你也可以使用可選鏈操作符來(lái)動(dòng)態(tài)查詢屬性，這時(shí)需要使用括號(hào)：
- const someProperty = obj?.[ property- + propertyName]
也可以與空值合并運(yùn)算符一起使用。如果要為一個(gè)變量設(shè)定默認(rèn)值，例證如下：
- const ownerName = house?.owner?.name ?? "Unknownowner"
函數(shù)
目前只是將可選鏈操作符與對(duì)象結(jié)合。但它也可以與函數(shù)結(jié)合使用。可以用來(lái)調(diào)取不存在的方法，就像這樣：
- const result = someObject.customMethod?.();
適配
老瀏覽器支持(如IE瀏覽器)不支持可選鏈操作符，和其他現(xiàn)代的JavaScript功能點(diǎn)一樣。新瀏覽器如谷歌、火狐、Opera以及Safari都是支持可選鏈的，但這不妨礙可選鏈的使用，需要時(shí)可在瀏覽器中添加polyfill。
使用可選鏈操作符可以在不確認(rèn)嵌套對(duì)象中每一個(gè)引用是否有效的情況下訪問(wèn)鏈接深處的對(duì)象。它最大的優(yōu)點(diǎn)是運(yùn)行起來(lái)簡(jiǎn)潔漂亮，不僅適用于對(duì)象，也能調(diào)用可能不存在的方法。
但請(qǐng)謹(jǐn)記，它不能在IE瀏覽器中運(yùn)行——和其他現(xiàn)代JavaScript功能點(diǎn)一樣。這些老式瀏覽器需要添加polyfill才能運(yùn)行可選鏈。
JavaScript常學(xué)常新，總有新彩蛋夾在里面!
