盤點JavaScript中解構賦值，數組解構常用的數組操作
大家好，我是進階學習者。
前言
解構賦值：是一種特殊的語法，它使可以將數組或對象“拆包”為到一系列變量中，因為有時候使用變量更加方便。解構操作對那些具有很多參數和默認值等的函數也很奏效。
一、數組解構
下面是一個將數組解構到變量中的。
例：
- <script>
- // 有一個存放了名字和姓氏的數組
- let arr = ["Ilya", "Kantor"]
- // 解構賦值
- // sets firstName = arr[0]
- // and surname = arr[1]
- let [firstName, surname] = arr;
- alert(firstName); // Ilya
- alert(surname); // Kantor
- </script>
現在就可以針對這些變量進行操作，而不是針對原來的數組元素。
當與 split 函數(或其他返回值是數組的函數)結合使用時，看起來就更優雅了：
- let [firstName, surname] = "Ilya Kantor".split(' ');
1. “解構”并不意味著“破壞”
這種語法叫做“解構賦值”，因為它通過將結構中的各元素復制到變量中來達到“解構”的目的。但數組本身是沒有被修改的。
2. 剩余的 ‘…’
如果不只是要獲得第一個值，還要將后續的所有元素都收集起來 — 可以使用三個點 "..." 來再加一個參數來接收“剩余的”元素：
- let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
- alert(name1); // Julius
- alert(name2); // Caesar
- // 請注意，`rest` 的類型是數組
- alert(rest[0]); // Consul
- alert(rest[1]); // of the Roman Republic
- alert(rest.length); // 2
rest 的值就是數組中剩下的元素組成的數組。不一定要使用變量名 rest，也可以使用其他的變量名，只要確保它前面有三個點，并且在解構賦值的最后一個參數位置上就行了。
3. 默認值
如果賦值語句中，變量的數量多于數組中實際元素的數量，賦值不會報錯。未賦值的變量被認為是 undefined。
- let [firstName, surname] = [];
- alert(firstName); // undefined
- alert(surname); // undefined
如果想要一個“默認”值給未賦值的變量，可以使用 = 來提供：
- // 默認值
- let [name = "Guest", surname = "Anonymous"] = ["Julius"];
- alert(name); // Julius（來自數組的值）
- alert(surname); // Anonymous（默認值被使用了）
默認值可以是更加復雜的表達式甚至可以是函數調用，這些表達式或函數只會在這個變量未被賦值的時候才會被計算。
使用了 prompt 函數來提供兩個默認值，但它只會在未被賦值的那個變量上進行調用：
- // 只會提示輸入姓氏
- let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];
- alert(name); // Julius（來自數組）
- alert(surname); // 輸入的值
二、對象解構
解構賦值同樣適用于對象。
基本語法：
- let {var1, var2} = {var1:…, var2:…}
在等號右側有一個已經存在的對象，想把它拆開到變量中。等號左側包含了對象相應屬性的一個“(pattern)模式”。
在簡單的情況下，等號左側的就是 {...} 中的變量名列表。
例 ：
- let options = {
- title: "Menu", width: 100, height: 200
- };
- let {title, width, height} = options;
- alert(title); // Menualert(width); // 100
- alert(height); // 200
屬性 options.title、options.width 和 options.height 值被賦給了對應的變量。變量的順序并不重要，下面這個代碼也奏效：
- // 改變 let {...} 中元素的順序
- let {height, width, title} = { title: "Menu", height: 200, width: 100 }
就像數組或函數參數一樣，默認值可以是任意表達式甚至可以是函數調用。它們只會在未提供對應的值時才會被計算/調用。
1. 剩余模式(pattern)
如果對象擁有的屬性數量比提供的變量數量還多，該怎么辦?
可以只取其中的某一些屬性，然后把“剩余的”賦值到其他地方嗎?
可以使用剩余模式(pattern)，就像對數組那樣。一些較舊的瀏覽器不支持此功能(例如，使用 Babel 對其進行填充)，但可以在現代瀏覽器中使用。
例：
- let options = {
- title: "Menu",
- height: 200,
- width: 100
- };
- // title = 名為 title 的屬性
- // rest = 存有剩余屬性的對象
- let {title, ...rest} = options;
- // 現在 title="Menu", rest={height: 200, width: 100}
- alert(rest.height); // 200
- alert(rest.width); // 100
注：
變量都是在賦值中通過正確方式聲明的：let {…} = {…}。當然，也可以使用已有的變量，而不用 let，但這里有一個陷阱。
三、智能函數參數
案例
解構賦值語法：可以把所有參數當作一個對象來傳遞，然后函數馬上把這個對象解構成多個變量：
- // 傳遞一個對象給函數
- let options = {
- title: "My menu",
- items: ["Item1", "Item2"]
- };
- // ……然后函數馬上把對象展開成變量
- function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
- // title, items – 提取于 options，
- // width, height – 使用默認值
- alert( `${title} ${width} ${height}` ); // My Menu 200 100
- alert( items ); // Item1, Item2
- }
- showMenu(options);
同樣可以使用帶有嵌套對象和冒號映射的更加復雜的解構：
- let options = {
- title: "My menu",
- items: ["Item1", "Item2"]
- };
- function showMenu({
- title = "Untitled",
- width: w = 100, // width goes to w
- height: h = 200, // height goes to h
- items: [item1, item2] // items first element goes to item1, second to item2
- }) {
- alert( `${title} ${w} ${h}` ); // My Menu 100 200
- alert( item1 ); // Item1
- alert( item2 ); // Item2
- }
- showMenu(options);
完整語法和解構賦值是一樣的：
- function({
- incomingProperty: varName = defaultValue
- })
注：
對于參數對象，屬性 incomingProperty 對應的變量是 varName，默認值是 defaultValue。
這種解構假定了 showMenu() 函數確實存在參數。如果想讓所有的參數都使用默認值，那應該傳遞一個空對象：
- showMenu({}); // 不錯，所有值都取默認值showMenu(); // 這樣會導致錯誤
可以通過指定空對象 {} 為整個參數對象的默認值來解決這個問題：
- function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
- alert( `${title} ${width} ${height}` );
- }
- showMenu(); // Menu 100 200
運行結果：
整個參數對象的默認是 {}，因此總會有內容可以用來解構。
四、總結
本文基于JavaScript基礎，介紹了解構賦值，數組解構，介紹了常見的數組操作，對象結構。在實際應用中需要注意的點，遇到的難點，提供了詳細的解決方法。
使用JavaScript語言，能夠讓讀者更好的理解。代碼很簡單，希望能夠幫助讀者更好的學習。
