• <td id="ui4cm"></td>
  • <bdo id="ui4cm"><legend id="ui4cm"></legend></bdo>
  • 當前位置:首頁 > 安卓源碼 > 技術博客 >

    面向初學者的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.robbiejoe.com/appboke/46141.html

    技術博客閱讀排行

    最新文章

    亚洲AV无码一区东京热
  • <td id="ui4cm"></td>
  • <bdo id="ui4cm"><legend id="ui4cm"></legend></bdo>