站長資訊網
        最全最豐富的資訊網站

        JavaScript對象解構用法解析(實例詳解)

        本篇文章給大家帶來了JavaScript中對象解構用法解析的相關知識,希望對大家有幫助。

        JavaScript對象解構用法解析(實例詳解)

        ES6(ES2015)的發布,給JavaScript 提供了一種更方便快捷的方式來處理對象的屬性。該機制稱為Destructuring(也稱為解構賦值)。但是你真的會用嗎?你真的了解各種場景下,解構賦值的用法嗎?

        使用解構從對象中獲取值

        對象解構最基本的用法是從對象中檢索屬性鍵的值。

        例如,我們定義了一個對象,他有兩個屬性:name和age

        const User = {   name: '搞前端的半夏',   age: 18 }

        傳統上,我們將使用點 (.) 表示法或下標 ([]) 表示法從對象中檢索值。下面的代碼片段顯示了使用點符號檢索對象的值id和name從對象中檢索值的示例。employee

        在之前我們想要獲取對象中某個屬性的值,通產是使用.或者[]。

        const name = User['name']; const age = User.age;

        當然這兩種方式在當前情況下是沒有問題的,但是當User的屬性多了,我們就要不停的復制粘貼,產生很多重復的代碼。

        有了結構賦值,我們就可以快速的來獲取值。例如我們使用對象的鍵名來創建變量,并將對象的值分配給相同的鍵。這樣無論有多少屬性,我們只要賦值屬性名即可,同樣的也減少了很多重復代碼。

        const { name, age } = User;

        使用解構從嵌套對象中獲取值

        在上面的例子中,User只是一個簡單的單層對象,我們在日常的開發中也會遇到嵌套的對象,,那么使用結構賦值,我們該如何檢索嵌套對象中的值。下面我們重新定義User對象,給這個對象新增一個contact屬性,它包含著User的phone。。

        const User = {   name: '搞前端的半夏',   age: '18',   contact:{     phone:'110',   } }

        如果我們用.的當時來回去phone的值,則需要兩次.

        const phone = User.contact.phone;

        如果使用解構賦值的話:則寫法如下:

        const  {contact:{phone}}=User consosle.log(phone)  // 輸出10.

        無論是多少層的嵌套,只要按照這個寫法,一定會拿到具體的值。

        使用對象解構定義一個新變量以及默認值

        默認值

        當然我們在日常開發的過程中,可能會遇到很多極端的情況,

        例如后端傳過來的對象,可能會缺失某些字段

        const User = {   name: '搞前端的半夏', }

        或者屬性沒有具體的值:

        const User = {   name: '搞前端的半夏',   age: '' }

        當我們使用解構賦值的話:無論是否存在age屬性的話,都會創建age變量。

        const { name, age } = employee;

        當User.age沒有具體值得話,我們則可以使用

        const { name, age=18 } = employee;

        給age一個默認值。

        新變量

        堅持,稍等。解構部分有

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产精品成人久久久久久久| 久久精品国产福利国产秒| 久久99热只有频精品8| 国产成人精品久久一区二区三区av| 曰韩精品无码一区二区三区| 2021年精品国产福利在线| 青草国产精品久久久久久| 久久久精品日本一区二区三区| 国产欧美国产精品第一区| 日韩精品无码AV成人观看| 久久e热在这里只有国产中文精品99 | 国产精品香蕉在线观看| 国产精品分类视频分类一区| 久久精品亚洲日本波多野结衣| 亚洲欧美日韩久久精品| 久久久久久久久久久免费精品| 99爱在线视频这里只有精品| 久久91综合国产91久久精品| 国产精品一级片| 国产精品欧美一区二区三区不卡| 国产精品国产三级国产AV主播 | 国产精品成人va| 97久久久久人妻精品专区| 无码人妻精品中文字幕| 亚洲性日韩精品一区二区三区| 欧美精品福利在线视频| 久久亚洲中文字幕精品一区| 黑人无码精品又粗又大又长| 国产成人精品一区二三区在线观看 | 亚洲AV成人无码久久精品老人| 自拍偷在线精品自拍偷无码专区 | 精品久久人妻av中文字幕| 亚洲国产一成人久久精品| 伊人久久精品无码av一区| 无码精品人妻一区二区三区AV| 久久www免费人成精品香蕉| 久久国产精品国语对白| 青草国产精品视频。| 四虎精品影库4HUTV四虎| 最新国产成人精品2024| 亚洲AV永久无码精品|