盤(pán)點(diǎn)JavaScript中解構(gòu)賦值，數(shù)組解構(gòu)常用的數(shù)組操作

回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料

大家好，我是進(jìn)階學(xué)習(xí)者。

前言

解構(gòu)賦值：是一種特殊的語(yǔ)法，它使可以將數(shù)組或?qū)ο蟆安鸢睘榈揭幌盗凶兞恐校驗(yàn)橛袝r(shí)候使用變量更加方便。解構(gòu)操作對(duì)那些具有很多參數(shù)和默認(rèn)值等的函數(shù)也很奏效。

一、數(shù)組解構(gòu)

下面是一個(gè)將數(shù)組解構(gòu)到變量中的。

例：      

<script>            // 有一個(gè)存放了名字和姓氏的數(shù)組            let arr = ["Ilya", "Kantor"]            // 解構(gòu)賦值            // sets firstName = arr[0]            // and surname = arr[1]            let [firstName, surname] = arr;            alert(firstName); // Ilya            alert(surname); // Kantor</script>

現(xiàn)在就可以針對(duì)這些變量進(jìn)行操作，而不是針對(duì)原來(lái)的數(shù)組元素。

當(dāng)與 split 函數(shù)（或其他返回值是數(shù)組的函數(shù)）結(jié)合使用時(shí)，看起來(lái)就更優(yōu)雅了：

let [firstName, surname] = "Ilya Kantor".split(' ');

1. “解構(gòu)”并不意味著“破壞”

這種語(yǔ)法叫做“解構(gòu)賦值”，因?yàn)樗ㄟ^(guò)將結(jié)構(gòu)中的各元素復(fù)制到變量中來(lái)達(dá)到“解構(gòu)”的目的。但數(shù)組本身是沒(méi)有被修改的。

2. 剩余的 ‘…’

如果不只是要獲得第一個(gè)值，還要將后續(xù)的所有元素都收集起來(lái) — 可以使用三個(gè)點(diǎn) "..." 來(lái)再加一個(gè)參數(shù)來(lái)接收“剩余的”元素：

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];alert(name1); // Juliusalert(name2); // Caesar// 請(qǐng)注意，`rest` 的類型是數(shù)組alert(rest[0]); // Consulalert(rest[1]); // of the Roman Republicalert(rest.length); // 2

rest 的值就是數(shù)組中剩下的元素組成的數(shù)組。不一定要使用變量名 rest，也可以使用其他的變量名，只要確保它前面有三個(gè)點(diǎn)，并且在解構(gòu)賦值的最后一個(gè)參數(shù)位置上就行了。

3. 默認(rèn)值

如果賦值語(yǔ)句中，變量的數(shù)量多于數(shù)組中實(shí)際元素的數(shù)量，賦值不會(huì)報(bào)錯(cuò)。未賦值的變量被認(rèn)為是 undefined。

let [firstName, surname] = [];
alert(firstName); // undefinedalert(surname); // undefined

如果想要一個(gè)“默認(rèn)”值給未賦值的變量，可以使用 = 來(lái)提供：

// 默認(rèn)值let [name = "Guest", surname = "Anonymous"] = ["Julius"];alert(name);    // Julius（來(lái)自數(shù)組的值）alert(surname); // Anonymous（默認(rèn)值被使用了）

默認(rèn)值可以是更加復(fù)雜的表達(dá)式甚至可以是函數(shù)調(diào)用，這些表達(dá)式或函數(shù)只會(huì)在這個(gè)變量未被賦值的時(shí)候才會(huì)被計(jì)算。

使用了 prompt 函數(shù)來(lái)提供兩個(gè)默認(rèn)值，但它只會(huì)在未被賦值的那個(gè)變量上進(jìn)行調(diào)用：

// 只會(huì)提示輸入姓氏let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];alert(name);    // Julius（來(lái)自數(shù)組）alert(surname); // 輸入的值

二、對(duì)象解構(gòu)

解構(gòu)賦值同樣適用于對(duì)象。

基本語(yǔ)法：

let {var1, var2} = {var1:…, var2:…}

在等號(hào)右側(cè)有一個(gè)已經(jīng)存在的對(duì)象，想把它拆開(kāi)到變量中。等號(hào)左側(cè)包含了對(duì)象相應(yīng)屬性的一個(gè)“（pattern）模式”。

在簡(jiǎn)單的情況下，等號(hào)左側(cè)的就是 {...} 中的變量名列表。

例 ：

let options = {    title: "Menu",  width: 100,  height: 200};let {title, width, height} = options;alert(title);  // Menualert(width);  // 100alert(height); // 200

屬性 options.title、options.width 和 options.height 值被賦給了對(duì)應(yīng)的變量。變量的順序并不重要，下面這個(gè)代碼也奏效：

// 改變 let {...} 中元素的順序let {height, width, title} = { title: "Menu", height: 200, width: 100 }

就像數(shù)組或函數(shù)參數(shù)一樣，默認(rèn)值可以是任意表達(dá)式甚至可以是函數(shù)調(diào)用。它們只會(huì)在未提供對(duì)應(yīng)的值時(shí)才會(huì)被計(jì)算/調(diào)用。

1. 剩余模式（pattern）

如果對(duì)象擁有的屬性數(shù)量比提供的變量數(shù)量還多，該怎么辦？

可以只取其中的某一些屬性，然后把“剩余的”賦值到其他地方嗎？

可以使用剩余模式（pattern），就像對(duì)數(shù)組那樣。一些較舊的瀏覽器不支持此功能（例如，使用 Babel 對(duì)其進(jìn)行填充），但可以在現(xiàn)代瀏覽器中使用。

例：

let options = {  title: "Menu",  height: 200,  width: 100};// title = 名為 title 的屬性// rest = 存有剩余屬性的對(duì)象let {title, ...rest} = options;// 現(xiàn)在 title="Menu", rest={height: 200, width: 100}alert(rest.height);  // 200alert(rest.width);   // 100

注：

變量都是在賦值中通過(guò)正確方式聲明的：let {…} = {…}。當(dāng)然，也可以使用已有的變量，而不用 let，但這里有一個(gè)陷阱。

三、智能函數(shù)參數(shù)

案例

解構(gòu)賦值語(yǔ)法：可以把所有參數(shù)當(dāng)作一個(gè)對(duì)象來(lái)傳遞，然后函數(shù)馬上把這個(gè)對(duì)象解構(gòu)成多個(gè)變量：

// 傳遞一個(gè)對(duì)象給函數(shù)let options = {  title: "My menu",  items: ["Item1", "Item2"]};// ……然后函數(shù)馬上把對(duì)象展開(kāi)成變量function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {  // title, items – 提取于 options，  // width, height – 使用默認(rèn)值  alert( `${title} ${width} ${height}` ); // My Menu 200 100  alert( items ); // Item1, Item2}showMenu(options);

同樣可以使用帶有嵌套對(duì)象和冒號(hào)映射的更加復(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);

完整語(yǔ)法和解構(gòu)賦值是一樣的：

function({  incomingProperty: varName = defaultValue
})

注：

對(duì)于參數(shù)對(duì)象，屬性 incomingProperty 對(duì)應(yīng)的變量是 varName，默認(rèn)值是 defaultValue。

這種解構(gòu)假定了 showMenu() 函數(shù)確實(shí)存在參數(shù)。如果想讓所有的參數(shù)都使用默認(rèn)值，那應(yīng)該傳遞一個(gè)空對(duì)象：

showMenu({}); // 不錯(cuò)，所有值都取默認(rèn)值showMenu(); // 這樣會(huì)導(dǎo)致錯(cuò)誤

可以通過(guò)指定空對(duì)象 {} 為整個(gè)參數(shù)對(duì)象的默認(rèn)值來(lái)解決這個(gè)問(wèn)題：

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {  alert( `${title} ${width} ${height}` );}showMenu(); // Menu 100 200

運(yùn)行結(jié)果：

整個(gè)參數(shù)對(duì)象的默認(rèn)是 {}，因此總會(huì)有內(nèi)容可以用來(lái)解構(gòu)。

四、總結(jié)

本文基于JavaScript基礎(chǔ)，介紹了解構(gòu)賦值，數(shù)組解構(gòu)，介紹了常見(jiàn)的數(shù)組操作，對(duì)象結(jié)構(gòu)。在實(shí)際應(yīng)用中需要注意的點(diǎn)，遇到的難點(diǎn)，提供了詳細(xì)的解決方法。

使用JavaScript語(yǔ)言，能夠讓讀者更好的理解。代碼很簡(jiǎn)單，希望能夠幫助讀者更好的學(xué)習(xí)。

------------------- End -------------------

往期精彩文章推薦：

• 淺析JavaScript的用戶登錄表單——焦點(diǎn)事件
  

• 手把手教你使用JavaScript實(shí)現(xiàn)表單驗(yàn)證
  

• 一篇文章帶你了解JavaScript for循環(huán)
  

• 一篇文章教會(huì)你使用SVG 填充圖案

歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持

想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】

萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行