引言

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

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

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

先來看一下我們平時(shí)對很多個(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è)簡單的數(shù)組的變量解構(gòu)賦值，即等號左邊的變量與等號右邊的相同位置的值一一對應(yīng)進(jìn)行賦值。

解構(gòu)失敗

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

等號左邊的變量與等號右邊沒有對應(yīng)上，則會被解析成undefined

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

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

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

let [a, b] = 1

這很明顯就會直接報(bào)錯(cuò)， 解構(gòu)失敗， 因?yàn)榈忍杻蛇叾紵o法進(jìn)行匹配

不完全解構(gòu)

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

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

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

默認(rèn)值

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

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

如果b沒有賦值一個(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)沒有對應(yīng)的值與之匹配時(shí)或者與之匹配的是 undefined 時(shí)， 才會將默認(rèn)值賦值給自己， 但是如果與之匹配的是 null ， 則默認(rèn)值不起作用， 最后會將 null 賦值給它， 看例子：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)束語

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

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

最新評論