「譯」關於JavaScript中的解構賦值方法

原文來自 Destructuring Assignment in JavaScript -(https://dev.to/gksander/destructuring-assignment-in-javascript-1ace)

JavaScript是一種很有趣的語言,我個人很喜歡它,雖然仍還有些人不大喜歡它。在ECMAScript6(ES6)中,有許多有用的特性來使JavaScript開發更有趣。在本文中,我將來探討一些關於解構賦值的內容,並提供一些可能有用的實際例子。

MDN是這樣描述解構賦值的:

解構賦值語法是一種JavaScript表達式用來將數組中的值或對象中的屬性取出來區分為不同變量。

對象的解構賦值

假設你有一個對象用來表示3維空間中的一個點:

「譯」關於JavaScript中的解構賦值方法

假設你需要用這些座標點進行一些計算,你會將這些座標取出並賦值給一個變量以便於後面的使用:

「譯」關於JavaScript中的解構賦值方法

這樣確實是有效的。但是如果你做了足夠多次,你可能已經很厭煩這樣的複製粘貼了。使用解構賦值,你能更簡單的採集到這些座標:

「譯」關於JavaScript中的解構賦值方法

這裡的大括號指明瞭解構賦值。上面代碼中的第一行查看了myPointInSpace變量,並從中查找大括號內指明的任何屬性,最後返回他們並賦值為獨立的變量。

如果你只需要x和y座標,你也可以這樣做:

「譯」關於JavaScript中的解構賦值方法

數組的解構賦值

解構賦值能很好的運用在對象中,但它同樣也能很好的作用於數組中。現在讓我們將座標點放進一個數組中:

「譯」關於JavaScript中的解構賦值方法

老派的拿取座標點的方法可能是這樣的:

「譯」關於JavaScript中的解構賦值方法

藉助解構賦值,能變得這樣簡潔:

「譯」關於JavaScript中的解構賦值方法

一些實際例子

我在上面展示了一個簡單的示例,其中涉及簡單地提取值,但我想展示一些更有用的示例。

設置函數默認值

在編寫函數時,我經常喜歡使用單個對象作為輸入,然後從該對象中提取值(這樣我就不必擔心輸入的順序了)。解構賦值在這點上很有幫助,並允許我們使用ES6中引入的“默認參數”。

假設你要編寫一個需要獲取小時,分鐘和秒的函數,並將該時間轉換為毫秒數。 我們可以通過以下方式做到這一點:

「譯」關於JavaScript中的解構賦值方法

這可能看起來像一個奇怪的函數聲明,但它使我們可以傳入一個對象作為toMilliseconds()的輸入,並且該函數將查找鍵:小時,分鐘和秒來使用。 如果它在傳入的對象中沒有找到這一個鍵,則默認值為0。如下所示這樣使用它:

「譯」關於JavaScript中的解構賦值方法

在上述代碼中的第二行,我們不需要給時和秒傳一個確切的數字,時和秒取了默認值0。

我已經逐漸喜歡這種編寫函數的方式,因為有些函數有很多參數都需要默認值,而這種形式的函數聲明對我來說是非常具有可讀性的。

交換值

交換變量的值是一種常見的操作,通常涉及創建臨時變量。 這是一個典型的例子:

「譯」關於JavaScript中的解構賦值方法

然而,解構賦值能更簡潔直觀的進行此操作:

「譯」關於JavaScript中的解構賦值方法

如果你發現自己經常在做交換值的操作,解構會成為一個很棒的工具。

取值並賦予一個新名稱

使用對象解構,你實際上可以將變量命名為要解構的對象的鍵之外的其他內容。假設你正在使用一個API,並且API會返回一個響應,其中的對象具有你不喜歡使用的奇怪名稱。 類似於以下內容:

「譯」關於JavaScript中的解構賦值方法

我們能從響應提取這兩個值並且給它們賦予一個我們喜歡的任何名稱,比如x和y:

「譯」關於JavaScript中的解構賦值方法

解構中的someWeirdKeyForX:x部分聲明你將從apiResponse中提取someWeirdKeyForX,並且你會將它賦值給一個新的變量x。這非常有用,實際上我也喜歡在這些賦值場景中使用這個方法,比如將apiResponse.latitude賦值給lat還有apiResponse.longitude賦值給lng。

注意

我偶然發現了一個小小的“陷阱”,比如,如果你的解構語句不是以變量聲明關鍵字(如var,let或const)開頭,則需要將語句包裹在括號中。 我設想這樣編譯器才能知道如何區分解構語句中的{...}和代碼塊中的{...}。

這就是我的意思。請考慮以下代碼:

「譯」關於JavaScript中的解構賦值方法

編譯器不知道如何去解析最後一行代碼,你需要這樣改變:

「譯」關於JavaScript中的解構賦值方法

當你在使用解構的時候,確保你知道這個小小的“陷阱”。

更多

MDN中有更多關於解構賦值的例子,如果你想了解更多,可以到(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)查看。


分享到:


相關文章: