哪些小技巧能改變?cè)L問(wèn)JavaScript嵌套對(duì)象的方式

哪些小技巧能改變?cè)L問(wèn)JavaScript嵌套對(duì)象的方式，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

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)行可選鏈。

關(guān)于哪些小技巧能改變?cè)L問(wèn)JavaScript嵌套對(duì)象的方式問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。