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)中的各元素復(fù)制到變量中來達到“解構(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ù)組中剩下的元素也都被跳過了(因為在這沒有對應(yīng)給它們的變量)。
等號右側(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(默認值被使用了)
默認值可以是更加復(fù)雜的表達式甚至可以是函數(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è)應(yīng)該有一個已經(jīng)存在的對象,我們想把它拆分到變量中。等號左側(cè)包含了對象相應(yīng)屬性的一個類對象“模式(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
值被賦給了對應(yīng)的變量。
變量的順序并不重要,下面這個代碼也奏效:
// 改變 let {...} 中元素的順序 let {height, width, title} = { title: "Menu", height: 200, width: 100 }
等號左側(cè)的模式(pattern)可以更加復(fù)雜,并且指定了屬性和變量之間的映射關(guān)系。
如果我們想把一個屬性賦值給另一個名字的變量,比如把 options.width
屬性賦值給名為 w
的變量,那么我們可以使用冒號來設(shè)置變量名稱:
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
被賦值給了同名變量。
對于可能缺失的屬性,我們可以使用 "="
設(shè)置默認值,如下所示:
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)用。它們只會在未提供對應(yīng)的值時才會被計算/調(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
如果我們有一個具有很多屬性的復(fù)雜對象,那么我們可以只提取所需的內(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è)使用更復(fù)雜的模式(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è)不存在,都被賦值給了對應(yīng)的變量:
最終,我們得到了 width
、height
、item1
、item2
和具有默認值的 title
變量。
注意,size
和 items
沒有對應(yīng)的變量,因為我們?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ù)。
難道像這樣?
// 在采用默認值就可以的位置設(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);
我們同樣可以使用帶有嵌套對象和冒號映射的更加復(fù)雜的解構(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
對應(yīng)的變量是 varName
,默認值是 defaultValue
。
請注意,這種解構(gòu)假定了 showMenu()
函數(shù)確實存在參數(shù)。如果我們想讓所有的參數(shù)都使用默認值,那我們應(yīng)該傳遞一個空對象:
showMenu({}); // 不錯,所有值都取默認值 showMenu(); // 這樣會導(dǎo)致錯誤
我們可以通過指定空對象 {}
為整個參數(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
。
沒有對應(yīng)映射的對象屬性會被復(fù)制到 rest
對象。
解構(gòu)數(shù)組的完整語法:
let [item1 = default, item2, ...rest] = array
數(shù)組的第一個元素被賦值給 item1
,第二個元素被賦值給 item2
,剩下的所有元素被復(fù)制到另一個數(shù)組 rest
。
從嵌套數(shù)組/對象中提取數(shù)據(jù)也是可以的,此時等號左側(cè)必須和等號右側(cè)有相同的結(jié)構(gòu)。
引用地址:解構(gòu)賦值
到此這篇關(guān)于ES6解構(gòu)賦值(數(shù)組,對象,函數(shù))使用詳解的文章就介紹到這了,更多相關(guān)ES6解構(gòu)賦值使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
BootStrap select2 動態(tài)改變值的方法
這篇文章主要介紹了BootStrap select2 動態(tài)改變值的方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02IE8下關(guān)于querySelectorAll()的問題
在IE8的新特性里,提到了會支持querySelector()和querySelectorAll()方法,如何使用這里就不說了,只是記錄下我在使用時遇到一個問題。2010-05-05javascript進行數(shù)組追加方法小結(jié)
javascript中給數(shù)組加元素是一個非常簡單的問題,javascript本身就提供了大量這類函數(shù),我們可以使用js自帶函數(shù)快速給數(shù)組增加元素了,本文就javascript進行數(shù)組追加的方法做出如下小結(jié)。2014-06-06vite添加環(huán)境變量import.meta.env的方法
在不同的文件里面配置不同的環(huán)境變量,可以讓我們的配置更加容易維護和使用,這里我們說下vite配置環(huán)境變量和模式是怎么配置的,對vite環(huán)境變量相關(guān)知識感興趣的朋友跟隨小編一起看看吧2023-10-10如何將網(wǎng)頁表格內(nèi)容導(dǎo)入excel
這篇文章主要介紹了如何將網(wǎng)頁表格內(nèi)容導(dǎo)入excel,需要的朋友可以參考下2014-02-02