重新介紹解構賦值

如果您編寫 JavaScript，您可能熟悉 ES2015 和所有引入的新語言標準。 一種非常受歡迎的標準是解構分配。 “深入”數組或對象並更直接地引用其中的某些內容的能力。 它通常是這樣的。

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

然而，解構賦值是如此強大的語法，以至於許多開發人員，即使是那些從它首次發布就一直在使用它的人，忘記了它可以做的一些事情。 在這篇文章中，我們將介紹對象和數組解構的五個真實示例，有時兩者都有！ 只是為了好玩，我將包括一個我前幾天遇到的奇怪的例子。

1.嵌套解構

能夠訪問對象內部的頂級鍵或數組的第一個元素是強​​大的，但它也有一定的限制。 它只消除了一個級別的複雜性，我們最終仍然會得到一系列點或[0]引用來訪問我們真正想要的內容。

事實證明，解構可以超越頂層。 這樣做可能有正當理由。 以來自 HTTP 請求的對象響應為例。 我們想超越數據對象，只訪問用戶。 只要我們知道我們正在尋找的密鑰，這不是問題。

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

嵌套數組也可以這樣做。 在這種情況下，您不需要知道密鑰，因為沒有密鑰。 你需要知道的是你正在尋找的東西的位置。 您需要為每個元素提供一個參考變量（或逗號佔位符），直到您要查找的那個（我們稍後會談到）。 該變量可以命名為任何名稱，因為它不嘗試匹配數組中的值。

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

請記住，與任何工具一樣，應謹慎使用這些功能。 識別您的用例和代碼庫的受眾。 考慮可讀性和易於更改的道路。 例如，如果您只想訪問一個子數組，也許地圖會更合適。

2.對象和數組解構

對象和數組是常見的數據結構。 事實上，如此普遍，以至於一個經常出現在另一個里面。 除了嵌套解構之外，我們可以訪問嵌套屬性，即使它們與我們正在訪問的外部數據結構類型不同。

以對象內的數組為例。

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

相反的用例也是有效的。 對像數組。

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

事實證明，在這個例子中我們有一點問題。 我們只能訪問第一個用戶的名字； 否則，我們將嘗試使用 'name' 來引用兩個不同的字符串，這是無效的。 我們的下一個解構場景應該解決這個問題。

3.別名

正如我們在上面的例子中看到的（當我們在想要拉出的不同對像中有重複的鍵時），我們不能以“典型”的方式這樣做。 變量名不能在同一個作用域內重複（這是最簡單的解釋方式，顯然比這更複雜）。

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

別名僅適用於對象。 這是因為數組可以使用開發人員選擇的任何變量名，而不必匹配現有的對象鍵。

4. 默認值

解構通常假設它所引用的值是存在的，但如果它不存在怎麼辦？ 亂扔未定義值的代碼永遠不會令人愉快。 這時候默認值就派上用場了。

讓我們看看它們是如何作用於對象的。

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

如果引用的鍵已經有值，則忽略默認值。 如果對像中不存在該鍵，則使用默認值。

我們可以對數組做類似的事情。

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

與對象示例一樣，如果該值存在，則忽略默認值。 查看上面的示例，您可能會注意到我們正在解構的元素比數組中存在的元素多。 解構更少的元素呢？

5. 忽略價值觀

解構的最佳部分之一是它允許您訪問作為更大數據結構一部分的值。 這包括隔離這些值並忽略其餘內容，如果您願意的話。

實際上，我們之前已經看到了一個例子，但是讓我們隔離我們正在談論的概念。

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

在這個例子中，我們從不解構organization ，這完全沒問題。 它仍然可以在user對象內部進行引用，就像這樣。

 user.organization

對於數組，實際上有兩種“忽略”元素的方法。 在對象示例中，我們通過使用關聯的鍵名專門引用內部值。 當數組被解構時，變量名是按位置分配的。 讓我們從忽略數組末尾的元素開始。

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

我們解構了數組中的第一個和第二個元素，其餘的無關緊要。 但是後來的元素呢？ 如果它是基於位置的，我們是否必須解構每個元素直到我們找到我們想要的元素？

事實證明，我們沒有。 相反，我們使用逗號來暗示這些元素的存在，但如果沒有引用變量，它們將被忽略。

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

我們可以同時做這兩件事。 使用逗號佔位符在任何我們想要的地方跳過元素。 同樣，與對象示例一樣，“忽略”的元素仍然可以在roleCounts數組中進行引用。

古怪的例子

解構的力量和多功能性也意味著你可以做一些真正奇怪的事情。 他們是否會派上用場很難說，但值得知道這是一個選擇！

一個這樣的例子是您可以使用解構來製作淺拷貝。

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

解構可用於的另一件事是取消引用。

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

與往常一樣，可讀性是最重要的，所有這些例子都應該在司法上使用。 但是了解所有選項可以幫助您選擇最好的選項。

結論

JavaScript 充滿了複雜的對象和數組。 無論是來自 HTTP 請求的響應，還是靜態數據集，能夠有效地訪問嵌入的內容都很重要。 使用解構賦值是一個很好的方法。 它不僅處理多層次的嵌套，而且允許集中訪問並在未定義引用的情況下提供默認值。

即使您多年來一直使用解構，規範中也隱藏著很多細節。 我希望這篇文章能夠提醒您該語言為您提供的工具。 下次您編寫代碼時，也許其中一個會派上用場！