簡介👩🏫
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);
輸出量
現在，讓我們來看一下ES6對象的分解，
const { firstName, lastName, address: { street, zip, city } } = person;
console.log(firstName);
console.log(lastName);
console.log(street);
console.log(city);
console.log(zip);
顯然，這是訪問元素的更好方法。而且，我們必須寫更少的行。
我在Eloquent JavaScript書中讀到一句優美的名言，寫更少的代碼。在這里，
Tzu-li和Tzu-ssu夸耀其最新計劃的規模。慈利說：“二十萬行，不算評論！” 慈肅回答說：“ Pssh，我的已經差不多一百萬行了。” 元媽大師說：“我最好的節目有五百行。” 聽到此消息后，慈濟和慈秀得到了啟發。
元媽大師，《編程之書》
將對象值存儲到自定義變量
現在，我們需要將提取的屬性存儲到自定義變量。我們還可以通過對象分解來做到這一點。假設我們要將對象的firstName元素存儲person到名為的變量中，first并將其存儲lastName到的變量中last。這可以使用以下代碼來實現，
const { firstName: first, lastName: last } = person;
console.log(first);
console.log(last);
是的，我們還可以僅提取所需的元素。在上面的代碼中，我們僅從對象中提取firstName和lastName。
解構數組
在本文開頭，我告訴您我們也可以對數組使用解構。怎么樣？
這是一個例子
假設一個數組包含3個科目的學生分數。
const scores = [85, 90, 74];
我們可以使用以下代碼輕松地破壞分數，
const [maths, geography, biology] = scores;
console.log(maths);
console.log(geography);
console.log(biology);
因此，使用array literal左側的簡單代碼，我們可以對數組進行解構。數組元素將存儲在我們定義的局部變量中。每個局部變量都將與相應的數組元素映射。
輸出：
結論👨🌾
我認為本文使用ES6中使用的解構已使您頗為了解。如果本文對您有所幫助或您有反饋，請在下面評論。我希望收到您的來信。😊
面向初學者的JavaScript中的對象分解 轉載http://www.hxslwl.com/appboke/46141.html技術博客閱讀排行
-
2016-09-10
-
快速集成MQTT協議到Android客戶端,只需要簡單的幾個步驟,無需關
2016-09-22
-
2017-01-05
-
2017-01-05
-
-
2017-02-22
-
安卓開發筆記——TabHost組件(一)（實現底部菜單導航）
2016-09-26
-
最新文章
-
React Native 啟動速度優化——JS 篇【全網最全，值得收藏】
2021-04-19
-
2021-01-24
-
2020-12-20
-
2020-12-19
-
2020-09-14
-
使用C ++ 11線程支持庫創建帶有事件循環，消息隊列和計時器的輔助線程
2020-09-14
-
2020-08-29
-
2020-08-09
熱門源碼
