ES6解構(gòu)賦值(數(shù)組,對象,函數(shù))使用詳解
解構(gòu)賦值
JavaScript 中最常用的兩種數(shù)據(jù)結(jié)構(gòu)是 Object 和 Array。
- 對象讓我們能夠創(chuàng)建通過鍵來存儲數(shù)據(jù)項的單個實體。
- 數(shù)組則讓我們能夠?qū)?shù)據(jù)收集到一個有序的集合中。
但是，當我們把它們傳遞給函數(shù)時，函數(shù)可能不需要整個對象/數(shù)組。它可能只需要對象/數(shù)組的一部分。
解構(gòu)賦值 是一種特殊的語法，它使我們可以將數(shù)組或?qū)ο?ldquo;拆包”至一系列變量中，因為有時這樣更方便。
解構(gòu)操作對那些具有很多參數(shù)和默認值等的函數(shù)也很奏效。我們馬上會看到類似的例子。
數(shù)組解構(gòu)
下面是一個將數(shù)組解構(gòu)到變量中的例子：
// 我們有一個存放了名字和姓氏的數(shù)組 let arr = ["John", "Smith"] // 解構(gòu)賦值 // sets firstName = arr[0] // and surname = arr[1] let [firstName, surname] = arr; alert(firstName); // John alert(surname); // Smith
現(xiàn)在我們就可以針對這些變量進行操作，而不是針對原來的數(shù)組元素。
當與 split 函數(shù)（或其他返回值是數(shù)組的函數(shù)）結(jié)合使用時，看起來就更優(yōu)雅了：
let [firstName, surname] = "John Smith".split(' ');
alert(firstName); // John
alert(surname); // Smith正如我們所看到的，語法很簡單。但是有幾個需要注意的細節(jié)。讓我們通過更多的例子來加深理解。
“解構(gòu)”并不意味著“破壞”
這種語法叫做“解構(gòu)賦值”，因為它通過將結(jié)構(gòu)中的各元素復制到變量中來達到“解構(gòu)”的目的。但數(shù)組本身是沒有被修改的。
這只是下面這些代碼的更精簡的寫法而已：
// let [firstName, surname] = arr; let firstName = arr[0]; let surname = arr[1];
忽略使用逗號的元素
數(shù)組中不想要的元素也可以通過添加額外的逗號來把它丟棄：
// 不需要第二個元素 let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; alert( title ); // Consul
在上面的代碼中，數(shù)組的第二個元素被跳過了，第三個元素被賦值給了
title變量，數(shù)組中剩下的元素也都被跳過了（因為在這沒有對應給它們的變量）。
等號右側(cè)可以是任何可迭代對象
……實際上，我們可以將其與任何可迭代對象一起使用，而不僅限于數(shù)組：
let [a, b, c] = "abc"; // ["a", "b", "c"] let [one, two, three] = new Set([1, 2, 3]);
這行得通，因為在內(nèi)部，結(jié)構(gòu)賦值是通過迭代右側(cè)的值來完成工作的。這是一種用于對在
=右側(cè)的值上調(diào)用for..of并進行賦值的操作的語法糖。
賦值給等號左側(cè)的任何內(nèi)容
我們可以在等號左側(cè)使用任何“可以被賦值的”東西。
例如，一個對象的屬性：
let user = {};
[user.name, user.surname] = "John Smith".split(' ');
alert(user.name); // John
alert(user.surname); // Smith與 .entries() 方法進行循環(huán)操作
在前面的章節(jié)中我們已經(jīng)見過了 Object.entries(obj) 方法。
我們可以將 .entries() 方法與解構(gòu)語法一同使用，來遍歷一個對象的“鍵—值”對：
let user = {
name: "John",
age: 30
};
// 循環(huán)遍歷鍵—值對
for (let [key, value] of Object.entries(user)) {
alert(`${key}:${value}`); // name:John, then age:30
}用于
Map的類似的代碼更簡單，因為它是可迭代的：
let user = new Map();
user.set("name", "John");
user.set("age", "30");
// Map 是以 [key, value] 對的形式進行迭代的，非常便于解構(gòu)
for (let [key, value] of user) {
alert(`${key}:${value}`); // name:John, then age:30
}交換變量值的技巧
有一個著名的使用結(jié)構(gòu)賦值來交換兩個變量的值的技巧：
let guest = "Jane";
let admin = "Pete";
// 讓我們來交換變量的值：使得 guest = Pete，admin = Jane
[guest, admin] = [admin, guest];
alert(`${guest} ${admin}`); // Pete Jane（成功交換?。?/pre>這里我們創(chuàng)建了一個由兩個變量組成的臨時數(shù)組，并且立即以交換了的順序?qū)ζ溥M行了解構(gòu)。
我們可以用這種方式交換兩個以上的變量。
其余的 ‘…’
通常，如果數(shù)組比左邊的列表長，那么“其余”的數(shù)組項會被省略。
例如，這里只取了兩項，其余的就被忽略了：
let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; alert(name1); // Julius alert(name2); // Caesar // 其余數(shù)組項未被分配到任何地方
如果我們還想收集其余的數(shù)組項 —— 我們可以使用三個點 "..." 來再加一個參數(shù)以獲取“其余”數(shù)組項：
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; // rest 是包含從第三項開始的其余數(shù)組項的數(shù)組 alert(rest[0]); // Consul alert(rest[1]); // of the Roman Republic alert(rest.length); // 2
rest 的值就是數(shù)組中剩下的元素組成的數(shù)組。
不一定要使用變量名 rest，我們也可以使用任何其他的變量名，只要確保它前面有三個點，并且在解構(gòu)賦值的最后一個參數(shù)位置上就行了。
let [name1, name2, ...titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; // 現(xiàn)在 titles = ["Consul", "of the Roman Republic"]
默認值
如果數(shù)組比左邊的變量列表短，這里也不會出現(xiàn)報錯。缺少的值被認為是 undefined：
let [firstName, surname] = []; alert(firstName); // undefined alert(surname); // undefined
如果我們想要一個“默認”值給未賦值的變量，我們可以使用 = 來提供：
// 默認值 let [name = "Guest", surname = "Anonymous"] = ["Julius"]; alert(name); // Julius（來自數(shù)組的值） alert(surname); // Anonymous（默認值被使用了）
默認值可以是更加復雜的表達式甚至可以是函數(shù)調(diào)用，這些表達式或函數(shù)只會在這個變量未被賦值的時候才會被計算。
舉個例子，我們使用了 prompt 函數(shù)來提供兩個默認值：
// 只會提示輸入姓氏
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];
alert(name); // Julius（來自數(shù)組）
alert(surname); // 你輸入的值請注意：prompt 將僅針對缺失值（surname）運行。
對象解構(gòu)
解構(gòu)賦值同樣適用于對象。
基本語法是：
let {var1, var2} = {var1:…, var2:…}在等號右側(cè)應該有一個已經(jīng)存在的對象，我們想把它拆分到變量中。等號左側(cè)包含了對象相應屬性的一個類對象“模式（pattern）”。在最簡單的情況下，等號左側(cè)的就是 {...} 中的變量名列表。
舉個例子：
let options = {
title: "Menu",
width: 100,
height: 200
};
let {title, width, height} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200屬性 options.title、options.width 和 options.height 值被賦給了對應的變量。
變量的順序并不重要，下面這個代碼也奏效：
// 改變 let {...} 中元素的順序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }等號左側(cè)的模式（pattern）可以更加復雜，并且指定了屬性和變量之間的映射關系。
如果我們想把一個屬性賦值給另一個名字的變量，比如把 options.width 屬性賦值給名為 w 的變量，那么我們可以使用冒號來設置變量名稱：
let options = {
title: "Menu",
width: 100,
height: 200
};
// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;
// width -> w
// height -> h
// title -> title
alert(title); // Menu
alert(w); // 100
alert(h); // 200冒號表示“什么值：賦值給誰”。上面的例子中，屬性 width 被賦值給了 w，屬性 height 被賦值給了 h，屬性 title 被賦值給了同名變量。
對于可能缺失的屬性，我們可以使用 "=" 設置默認值，如下所示：
let options = {
title: "Menu"
};
let {width = 100, height = 200, title} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200就像數(shù)組或函數(shù)參數(shù)一樣，默認值可以是任意表達式甚至可以是函數(shù)調(diào)用。它們只會在未提供對應的值時才會被計算/調(diào)用。
在下面的代碼中，prompt 提示輸入 width 值，但不會提示輸入 title 值：
let options = {
title: "Menu"
};
let {width = prompt("width?"), title = prompt("title?")} = options;
alert(title); // Menu
alert(width); // (prompt 的返回值)我們還可以將冒號和等號結(jié)合起來：
let options = {
title: "Menu"
};
let {width: w = 100, height: h = 200, title} = options;
alert(title); // Menu
alert(w); // 100
alert(h); // 200如果我們有一個具有很多屬性的復雜對象，那么我們可以只提取所需的內(nèi)容：
let options = {
title: "Menu",
width: 100,
height: 200
};
// 僅提取 title 作為變量
let { title } = options;
alert(title); // Menu剩余模式（pattern）"…"
如果對象擁有的屬性數(shù)量比我們提供的變量數(shù)量還多，該怎么辦？我們可以只取其中的某一些屬性，然后把“剩余的”賦值到其他地方嗎？
我們可以使用剩余模式（pattern），就像我們對數(shù)組那樣。一些較舊的瀏覽器不支持此功能（例如，使用 Babel 對其進行填充），但可以在現(xiàn)代瀏覽器中使用。
看起來就像這樣：
let options = {
title: "Menu",
height: 200,
width: 100
};
// title = 名為 title 的屬性
// rest = 存有剩余屬性的對象
let {title, ...rest} = options;
// 現(xiàn)在 title="Menu", rest={height: 200, width: 100}
alert(rest.height); // 200
alert(rest.width); // 100
let options = {
title: "Menu",
height: 200,
width: 100
};
// title = 名為 title 的屬性
// rest = 存有剩余屬性的對象
let {title, ...rest} = options;
// 現(xiàn)在 title="Menu", rest={height: 200, width: 100}
alert(rest.height); // 200
alert(rest.width); // 100不使用
let時的陷阱在上面的示例中，變量都是在賦值中通過正確方式聲明的：
let {…} = {…}。當然，我們也可以使用已有的變量，而不用let，但這里有一個陷阱。以下代碼無法正常運行：
let title, width, height;
// 這一行發(fā)生了錯誤
{title, width, height} = {title: "Menu", width: 200, height: 100};問題在于 JavaScript 把主代碼流（即不在其他表達式中）的
{...}當做一個代碼塊。這樣的代碼塊可以用于對語句分組，如下所示：
{
// 一個代碼塊
let message = "Hello";
// ...
alert( message );
}因此，這里 JavaScript 假定我們有一個代碼塊，這就是報錯的原因。我們需要解構(gòu)它。
為了告訴 JavaScript 這不是一個代碼塊，我們可以把整個賦值表達式用括號
(...)包起來：
let title, width, height;
// 現(xiàn)在就可以了
({title, width, height} = {title: "Menu", width: 200, height: 100});
alert( title ); // Menu嵌套解構(gòu)
如果一個對象或數(shù)組嵌套了其他的對象和數(shù)組，我們可以在等號左側(cè)使用更復雜的模式（pattern）來提取更深層的數(shù)據(jù)。
在下面的代碼中，options 的屬性 size 是另一個對象，屬性 items 是另一個數(shù)組。賦值語句中等號左側(cè)的模式（pattern）具有相同的結(jié)構(gòu)以從中提取值：
let options = {
size: {
width: 100,
height: 200
},
items: ["Cake", "Donut"],
extra: true
};
// 為了清晰起見，解構(gòu)賦值語句被寫成多行的形式
let {
size: { // 把 size 賦值到這里
width,
height
},
items: [item1, item2], // 把 items 賦值到這里
title = "Menu" // 在對象中不存在（使用默認值）
} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200
alert(item1); // Cake
alert(item2); // Donut對象 options 的所有屬性，除了 extra 屬性在等號左側(cè)不存在，都被賦值給了對應的變量：
最終，我們得到了 width、height、item1、item2 和具有默認值的 title 變量。
注意，size 和 items 沒有對應的變量，因為我們?nèi)〉氖撬鼈兊膬?nèi)容。
智能函數(shù)參數(shù)
有時，一個函數(shù)有很多參數(shù)，其中大部分的參數(shù)都是可選的。對用戶界面來說更是如此。想象一個創(chuàng)建菜單的函數(shù)。它可能具有寬度參數(shù)，高度參數(shù)，標題參數(shù)和項目列表等。
下面是實現(xiàn)這種函數(shù)的一個很不好的寫法：
function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
// ...
}在實際開發(fā)中存在一個問題就是你怎么記得住這么多參數(shù)的順序。通常集成開發(fā)環(huán)境工具（IDE）會盡力幫助我們，特別是當代碼有良好的文檔注釋的時候，但是…… 另一個問題就是，當大部分的參數(shù)采用默認值就好的情況下，怎么調(diào)用這個函數(shù)。
難道像這樣？
// 在采用默認值就可以的位置設置 undefined
showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])這太難看了。而且，當我們處理更多參數(shù)的時候可讀性會變得很差。
解構(gòu)賦值語法前來救援！
我們可以把所有參數(shù)當作一個對象來傳遞，然后函數(shù)馬上把這個對象解構(gòu)成多個變量：
// 我們傳遞一個對象給函數(shù)
let options = {
title: "My menu",
items: ["Item1", "Item2"]
};
// ……然后函數(shù)馬上把對象展開成變量
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);我們同樣可以使用帶有嵌套對象和冒號映射的更加復雜的解構(gòu)：
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);完整語法和解構(gòu)賦值是一樣的：
function({
incomingProperty: varName = defaultValue
...
})對于參數(shù)對象，屬性 incomingProperty 對應的變量是 varName，默認值是 defaultValue。
請注意，這種解構(gòu)假定了 showMenu() 函數(shù)確實存在參數(shù)。如果我們想讓所有的參數(shù)都使用默認值，那我們應該傳遞一個空對象：
showMenu({}); // 不錯，所有值都取默認值
showMenu(); // 這樣會導致錯誤我們可以通過指定空對象 {} 為整個參數(shù)對象的默認值來解決這個問題：
function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
alert( `${title} ${width} ${height}` );
}
showMenu(); // Menu 100 200在上面的代碼中，整個參數(shù)對象的默認是 {}，因此總會有內(nèi)容可以用來解構(gòu)。
總結(jié)
- 解構(gòu)賦值可以立即將一個對象或數(shù)組映射到多個變量上。
- 解構(gòu)對象的完整語法：
let {prop : varName = default, ...rest} = object這表示屬性 prop 會被賦值給變量 varName，如果沒有這個屬性的話，就會使用默認值 default。
沒有對應映射的對象屬性會被復制到 rest 對象。
解構(gòu)數(shù)組的完整語法：
let [item1 = default, item2, ...rest] = array
數(shù)組的第一個元素被賦值給 item1，第二個元素被賦值給 item2，剩下的所有元素被復制到另一個數(shù)組 rest。
從嵌套數(shù)組/對象中提取數(shù)據(jù)也是可以的，此時等號左側(cè)必須和等號右側(cè)有相同的結(jié)構(gòu)。
引用地址：解構(gòu)賦值
到此這篇關于ES6解構(gòu)賦值(數(shù)組,對象,函數(shù))使用詳解的文章就介紹到這了,更多相關ES6解構(gòu)賦值使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
javascript之鎖定表格欄位...2007-06-06
這篇文章主要介紹了JavaScript動態(tài)設置div的樣式的方法的相關資料,需要的朋友可以參考下2015-12-12
JS對img進行操作包括:換圖片/切圖/輪換/停止輪換等等，在本文將逐一實現(xiàn)，感興趣的朋友可以參考下哈，希望對你學習js知識有所幫助2013-04-04
這篇文章主要介紹了matlab中 sort 函數(shù)用法 的相關資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了JS實現(xiàn)自動固定頂部的懸浮菜單欄效果,涉及JavaScript針對window.onscroll事件的響應及頁面樣式動態(tài)變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
用Javascript實現(xiàn)發(fā)送短信驗證碼間隔功能
這篇文章主要介紹了用Javascript實現(xiàn)發(fā)送短信驗證碼間隔功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
如何使用ImageDecoder API讓GIF圖片暫停播放
在本文中，我們介紹了如何使用ImageDecoder API來暫停GIF圖像的播放，雖然這需要一些JavaScript編程知識，但它是一個非常強大的技術，可以讓您對GIF圖像進行各種高級操作，感興趣的朋友跟隨小編一起看看吧2023-06-06
這篇文章主要介紹了JS實現(xiàn)數(shù)組去重復值的方法,結(jié)合實例形式分析了JS通過數(shù)組遍歷、運算等方法實現(xiàn)去重復值的操作技巧,需要的朋友可以參考下2017-02-02
搞開發(fā)已經(jīng)很久了，一直搞不懂a(chǎn)++和++a到底有所什么不同，后來通過查閱相關資料總結(jié)出一點規(guī)律，下面小編通過本文給大家介紹2017-08-08
這篇文章主要為大家分享了js實現(xiàn)搜索框關鍵字智能匹配代碼，感興趣的朋友可以參考一下2016-01-01