<span id="ld197"><th id="ld197"><progress id="ld197"></progress></th></span>
<menuitem id="ld197"></menuitem>

    <dl id="ld197"></dl>

    <track id="ld197"><big id="ld197"><big id="ld197"></big></big></track><noframes id="ld197"><dfn id="ld197"><address id="ld197"></address></dfn>

    <output id="ld197"></output>
    <var id="ld197"><noframes id="ld197">
      <dfn id="ld197"><nobr id="ld197"><sub id="ld197"></sub></nobr></dfn>
          <b id="ld197"><form id="ld197"><delect id="ld197"></delect></form></b>

                當前位置:首頁 > 安卓源碼 > 技術博客 >

                面向初學者的JavaScript中的對象分解

                時間:2020-08-02 18:31 來源:互聯網 作者:源碼搜藏 瀏覽: 收藏 挑錯 推薦 打印

                簡介 ES6引入了對象分解的概念以及let,const,arrow函數之類的其他東西。 對象解構是JavaScript中非常有用的功能。 它廣泛用于React之類的前端框架以及Node.js之類的后端服務中。 本文旨在為您提供有關對象分解的一些知識。 什么是解構? 解構意味著從數組

                簡介👩‍🏫

                ES6引入了對象分解的概念以及let,const,arrow函數之類的其他東西。對象解構是JavaScript中非常有用的功能。它廣泛用于React之類的前端框架以及Node.js之類的后端服務中。本文旨在為您提供有關對象分解的一些知識。

                什么是解構?🏏

                解構意味著從數組或對象中提取數據。通過解構,我們可以將復雜的對象或數組分解為較小的部分。解構還使我們能夠一次從一個對象或數組中提取多個數據。它還提供了設置屬性默認值(如果尚未設置)的功能。

                用示例🎳解構

                要了解對象解構的概念,我們需要以計數為例。

                假設我們有一個具有以下鍵值屬性的對象,

                let person = {
                 firstName: "Captain",
                 lastName: "Nemo"
                }
                

                在ES6之前,要使用這些值,我們需要編寫如下代碼,

                const firstName = person.firstName;
                const lastName = person.lastName;
                console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);
                

                這是一個很小的對象,但是想象一下我們有一個很大的對象,它具有許多鍵值對,然后要訪問屬性,我們的代碼將非常重復,并且我們不想違反DRY的上帝!😅

                為了解決此問題,ES6為我們提供了解構的能力。使用解構,我們可以使用以下代碼輕松提取屬性,

                const { firstName, lastName } = person;
                console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);
                

                如果您是第一次看到此內容,可能會感到困惑。當我第一次看到語法時,我想到的第一個問題是,為什么花括號在左邊?是塊嗎?還是對象?

                實際上,兩者都不是。這就是解構語法的樣子。

                基本上,這只是說

                從名為person的對象中給我一個名為firstName的變量和一個名為lastName的變量。

                銷毀嵌套對象

                當我們使用嵌套對象時,對象分解會變得更加方便。

                想象一下下面的物體,

                const person = {
                 firstName: "Captain",
                 lastName: "Nemo",
                 address: {
                  street: "1234 Ave",
                  city: "Antilaw State",
                  zip: 1234
                 }
                }
                

                要使用舊方法訪問元素,代碼將過于重復并且看上去很臟。

                console.log(person.firstName);
                console.log(person.lastName);
                console.log(person.address.street);
                console.log(person.address.city);
                console.log(person.address.zip);
                

                輸出量

                面向初學者的JavaScript中的對象分解

                現在,讓我們來看一下ES6對象的分解,

                const { firstName, lastName, address: { street, zip, city } } =  person;
                console.log(firstName);
                console.log(lastName);
                console.log(street);
                console.log(city);
                console.log(zip);
                

                顯然,這是訪問元素的更好方法。而且,我們必須寫更少的行。

                面向初學者的JavaScript中的對象分解

                我在Eloquent JavaScript書中讀到一句優美的名言,寫更少的代碼。在這里,

                Tzu-li和Tzu-ssu夸耀其最新計劃的規模。慈利說:“二十萬行,不算評論!” 慈肅回答說:“ Pssh,我的已經差不多一百萬行了。” 元媽大師說:“我最好的節目有五百行。” 聽到此消息后,慈濟和慈秀得到了啟發。

                元媽大師,《編程之書》

                將對象值存儲到自定義變量

                現在,我們需要將提取的屬性存儲到自定義變量。我們還可以通過對象分解來做到這一點。假設我們要將對象firstName元素存儲person到名為的變量中,first并將其存儲lastName到的變量中last。這可以使用以下代碼來實現,

                const { firstName: first, lastName: last } =  person;
                console.log(first);
                console.log(last);
                

                是的,我們還可以僅提取所需的元素。在上面的代碼中,我們僅從對象中提取firstNamelastName。

                解構數組

                在本文開頭,我告訴您我們也可以對數組使用解構。怎么樣?

                這是一個例子

                假設一個數組包含3個科目的學生分數。

                const scores = [85, 90, 74];
                

                我們可以使用以下代碼輕松地破壞分數,

                const [maths, geography, biology] = scores;
                console.log(maths);
                console.log(geography);
                console.log(biology);
                

                因此,使用array literal左側的簡單代碼,我們可以對數組進行解構。數組元素將存儲在我們定義的局部變量中。每個局部變量都將與相應的數組元素映射。

                輸出:

                面向初學者的JavaScript中的對象分解

                結論👨‍🌾

                我認為本文使用ES6中使用的解構已使您頗為了解。如果本文對您有所幫助或您有反饋,請在下面評論。我希望收到您的來信。😊

                面向初學者的JavaScript中的對象分解 轉載http://www.hxslwl.com/appboke/46141.html

                技術博客閱讀排行

                最新文章

                久久人人97超碰人人澡,久久人人97超碰人人澡苹果,久久人人97超碰,国产福利第一视频在线播放,大陆国产国语对白视频,亚洲香蕉网久久综合影院