引言

變量的解構(gòu)賦值， 聽(tīng)起來(lái)很復(fù)雜， 簡(jiǎn)單點(diǎn)說(shuō)可以理解成批量操作變量賦值，先有個(gè)印象， 下面慢慢來(lái)看

變量的解構(gòu)賦值一共分為以下幾種：數(shù)組的解構(gòu)賦值 、對(duì)象的解構(gòu)賦值 、字符串的解構(gòu)賦值 、

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

先來(lái)看一下我們平時(shí)對(duì)很多個(gè)變量賦值是如何操作的：

let a = 1
let b = 2
let c = 3
let d = 4

那么我們看一下如何批量命名這些變量：

let [a, b, c, d] = [1, 2, 3, 4]
a  // 1
b  // 2
c  // 3
d  // 4

這就是一個(gè)簡(jiǎn)單的數(shù)組的變量解構(gòu)賦值，即等號(hào)左邊的變量與等號(hào)右邊的相同位置的值一一對(duì)應(yīng)進(jìn)行賦值。

解構(gòu)失敗

有幾種情況會(huì)解構(gòu)失?。?/p>

等號(hào)左邊的變量與等號(hào)右邊沒(méi)有對(duì)應(yīng)上，則會(huì)被解析成undefined

let [a, b, c] = [1, 2]
a  // 1
b  // 2
c  // undefined

上述代碼中的 c ， 與之匹配的是undefined，所以最后為undefined

等號(hào)右邊是一個(gè)不可遍歷的結(jié)構(gòu)

let [a, b] = 1

這很明顯就會(huì)直接報(bào)錯(cuò)， 解構(gòu)失敗， 因?yàn)榈忍?hào)兩邊都無(wú)法進(jìn)行匹配

不完全解構(gòu)

這個(gè)簡(jiǎn)單，直接看代碼：

let [a, b] = [1, 2, 3]
a  // 1
b  // 2

簡(jiǎn)單點(diǎn)說(shuō)就是等號(hào)右邊有很多值，但等號(hào)左邊只有兩個(gè)變量需要賦值， 這種叫做不完全解構(gòu)， 不會(huì)報(bào)錯(cuò)。

默認(rèn)值

在解構(gòu)時(shí)，是允許給予一個(gè)默認(rèn)值的， 如果該變量沒(méi)有解構(gòu)成功， 則會(huì)將默認(rèn)值賦值給它， 例如：

let [a, b=2] = [1]
a  // 1
b  // 2

如果b沒(méi)有賦值一個(gè)默認(rèn)值 2 ， 則 b 應(yīng)為 undefined ， 現(xiàn)在給了b 一個(gè)默認(rèn)值 2 ， 則在b 解構(gòu)失敗時(shí)，將默認(rèn)值2賦值了給它。

補(bǔ)充一下： 在給予變量默認(rèn)值時(shí)， 只有當(dāng)沒(méi)有對(duì)應(yīng)的值與之匹配時(shí)或者與之匹配的是 undefined 時(shí)， 才會(huì)將默認(rèn)值賦值給自己， 但是如果與之匹配的是 null ， 則默認(rèn)值不起作用， 最后會(huì)將 null 賦值給它， 看例子：

let [a=1, b=2, c=3] = [undefined, null]
a  // 1
b  // null
c  // 3

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

對(duì)象的解構(gòu)賦值可以很方便的取出對(duì)象里面的值， 先來(lái)看一下我們平時(shí)取出對(duì)象中的值，并賦值給一個(gè)變量是如何操作的吧：

let obj = {name: 'jack', age: 18, gender: '男'}
let name = obj.name
let age = obj.age
let gender = obj.gender

有沒(méi)有覺(jué)得很麻煩？因?yàn)橐粋€(gè)個(gè)變量，并對(duì)齊進(jìn)行賦值，我們來(lái)看一下對(duì)象的解構(gòu)賦值是如何幫我們簡(jiǎn)化操作的：

let {name, gender, age} = {name: 'jack', age: 18, gender: '男'}

就只需要一行代碼就可以將對(duì)象中的三個(gè)值都取出來(lái)并賦值給三個(gè)變量。但是，我們?cè)谑褂脤?duì)象的解構(gòu)賦值的時(shí)候必須要注意，等號(hào)左邊的順序是隨意的， 系統(tǒng)會(huì)根據(jù)你的變量名， 優(yōu)先去對(duì)象中尋找與你對(duì)象名相同的鍵， 將它的值賦值給這個(gè)變量。

這么一說(shuō)， 我們的變量名就必須要跟對(duì)象中的健名一樣了嗎？不是的， 其實(shí)我們可以自己再起一個(gè)名字，例如：

let {n: name, g: gender, a: age} = {name: 'jack', age: 18, gender: '男'}

這樣就可以做到自己給變量起名字了， 并且這樣做有一個(gè)好處， 就是可以避免與前面的代碼中的變量名重合了。

當(dāng)然，對(duì)象的解構(gòu)賦值也是可以給一個(gè)默認(rèn)值的， 用法跟數(shù)組的解構(gòu)賦值一樣，這里就不多做解釋了， 感興趣的可以嘗試一下。

三、字符串的解構(gòu)賦值

這個(gè)也非常簡(jiǎn)單，直接看例子吧：

let [a, b, c, d] = 'word'
a // "w"
b // "o"
c // "r"
d // "d"

其實(shí)字符串的解構(gòu)，就相當(dāng)于遍歷這個(gè)字符串，然后放到一個(gè)數(shù)組中， 賦值給等號(hào)左邊的變量

結(jié)束語(yǔ)

好了， 關(guān)于變量解構(gòu)賦值的知識(shí)就將這么多，其實(shí)還有一些相關(guān)知識(shí)，例如數(shù)值和布爾值的解構(gòu)賦值、函數(shù)參數(shù)的解構(gòu)賦值等， 但我覺(jué)得都不常用，所以就沒(méi)給大家細(xì)講，如果感興趣可以去查閱ES6的書(shū)。

以上就是ES6中解構(gòu)賦值實(shí)現(xiàn)變量批量賦值解放雙手的詳細(xì)內(nèi)容，更多關(guān)于ES6變量解構(gòu)批量賦值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論