引言

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

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

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

先來看一下我們平時對很多個變量賦值是如何操作的：

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

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

解構(gòu)失敗

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

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

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

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

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

let [a, b] = 1

這很明顯就會直接報錯， 解構(gòu)失敗， 因為等號兩邊都無法進行匹配

不完全解構(gòu)

這個簡單，直接看代碼：

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

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

默認值

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

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

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

補充一下： 在給予變量默認值時， 只有當沒有對應(yīng)的值與之匹配時或者與之匹配的是 undefined 時， 才會將默認值賦值給自己， 但是如果與之匹配的是 null ， 則默認值不起作用， 最后會將 null 賦值給它， 看例子：

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

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

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

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

有沒有覺得很麻煩？因為要命名一個個變量，并對齊進行賦值，我們來看一下對象的解構(gòu)賦值是如何幫我們簡化操作的：

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

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

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

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

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

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

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

這個也非常簡單，直接看例子吧：

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

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

結(jié)束語

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

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

最新評論