ES6中的變量的解構賦值， 解放咱們的雙手，實現變量的批量賦值

ES6——變量的解構賦值

• 引言
• 正文
• 1、數組的解構賦值
• 解構失敗
• 不徹底解構
• 默認值
• 2、對象的解構賦值
• 3、字符串的解構賦值
• 結束語

引言

變量的解構賦值， 聽起來很複雜， 簡單點說能夠理解成批量操做變量賦值，先有個印象， 下面慢慢來看

正文

變量的解構賦值一共分爲如下幾種：數組的解構賦值 、對象的解構賦值 、字符串的解構賦值 、

1、數組的解構賦值

先來看一下咱們平時對不少個變量賦值是如何操做的：

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

這就是一個簡單的數組的變量解構賦值，即等號左邊的變量與等號右邊的相同位置的值一一對應進行賦值。

解構失敗

有幾種狀況會解構失敗：

• 等號左邊的變量與等號右邊沒有對應上，則會被解析成undefined

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

上述代碼中的 c ， 與之匹配的是undefined，因此最後爲undefined

• 等號右邊是一個不可遍歷的結構

let [a, b] = 1

這很明顯就會直接報錯， 解構失敗， 由於等號兩邊都沒法進行匹配

不徹底解構

這個簡單，直接看代碼：

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

簡單點說就是等號右邊有不少值，但等號左邊只有兩個變量須要賦值， 這種叫作不徹底解構， 不會報錯。

默認值

在解構時，是容許給予一個默認值的， 若是該變量沒有解構成功， 則會將默認值賦值給它， 例如：

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

若是b沒有賦值一個默認值 2 ， 則 b 應爲 undefined ， 如今給了b 一個默認值 2 ， 則在b 解構失敗時，將默認值2賦值了給它。

補充一下： 在給予變量默認值時， 只有當沒有對應的值與之匹配時或者與之匹配的是 undefined 時， 纔會將默認值賦值給本身， 可是若是與之匹配的是 null ， 則默認值不起做用， 最後會將 null 賦值給它， 看例子：

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

2、對象的解構賦值

對象的解構賦值能夠很方便的取出對象裏面的值， 先來看一下咱們平時取出對象中的值，並賦值給一個變量是如何操做的吧：

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

有沒有以爲很麻煩？由於要命名一個個變量，並對齊進行賦值，咱們來看一下對象的解構賦值是如何幫咱們簡化操做的：

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

就只須要一行代碼就能夠將對象中的三個值都取出來並賦值給三個變量。可是，咱們在使用對象的解構賦值的時候必需要注意，等號左邊的順序是隨意的， 系統會根據你的變量名， 優先去對象中尋找與你對象名相同的鍵， 將它的值賦值給這個變量。

這麼一說， 咱們的變量名就必需要跟對象中的健名同樣了嗎？不是的， 其實咱們能夠本身再起一個名字，例如：

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

這樣就能夠作到本身給變量起名字了， 而且這樣作有一個好處， 就是能夠避免與前面的代碼中的變量名重合了。

固然，對象的解構賦值也是能夠給一個默認值的， 用法跟數組的解構賦值同樣，這裏就很少作解釋了， 感興趣的能夠嘗試一下。

3、字符串的解構賦值

這個也很是簡單，直接看例子吧：

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

其實字符串的解構，就至關於遍歷這個字符串，而後放到一個數組中， 賦值給等號左邊的變量

結束語

好了， 關於變量解構賦值的知識就將這麼多，其實還有一些相關知識，例如數值和布爾值的解構賦值、函數參數的解構賦值等， 但我以爲都不經常使用，因此就沒給你們細講，若是感興趣能夠去查閱ES6的書。