簡介👩‍🏫

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中使用的解構已使您頗為了解。如果本文對您有所幫助或您有反饋，請在下面評論。我希望收到您的來信。😊