ES6入門之變量的解構賦值

數組的解構賦值

---

基本用法

ES6 容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲結構。

在ES6以前想要爲變量賦值，只能指定其值，以下：

let a = 1;
let b = 2

而在ES6中能夠寫成這樣，以下：

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

值得注意的是，等式兩邊的值要對等，這樣左邊的變量纔會被賦上右邊對應的值，若是不對等左邊的值將會出現undefined，以下寫法：

let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3

注意：只有左右兩邊的 格式必定要對等，數量能夠不對等。

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

let [a,,c] = [1,2,3]
a = 1, c = 3

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

let [a] = []
let [b,a] = [1]
a = undefined

還有一種狀況，等號左邊爲數組，可是等號右邊爲其餘值，將會報錯。以下：

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

以上都會報錯

可是若是左邊爲數組，右邊爲字符串，將會取字符串的第一個下標的值

let [a] = '121321'  a = '1'
let [a] = 'adgasg'  a = 'a'

對於Set結構，一樣可使用數組的解構賦值。

let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3

默認值

解構賦值容許指定默認值

let [a = 3] = []        // a:3
let [a = 3,b] = [,4]    // a:3 b:4
let [a = 3,b] = [5,4]   // a:5 b:4

特殊

let [a = 3] = [undefined]   // a:3
let [a = 3] = [null]        // a:null

Tips: 在es6中使用嚴格相等運算符，在結構賦值中若是須要默認值生效，則應對等的值爲undefined的時候纔會採用默認值，不然仍是使用賦值。上面中null 不嚴格等於undefined++

若是默認值的賦值爲一個表達式，只有當等號右邊的賦值沒有值爲undefined的時候，纔會取表達式中的值，以下：

function demo(){
    console.log('demo')
}

let [a = demo()] = []   // a: demo
let [a = demo()] = [1]  // a : 1

對象的解構賦值

---

與數組的不一樣點是，數組的元素必須和賦值的元素要位置一致才能正確的賦值，而對象的解構賦值則是等號兩邊的變量和屬性同名便可取到正確的值。不然值爲 undefined

let {a,b} = {a:'23',b:'3'}
let {a,b} = {b:'3',a:'23'}

// 上面兩個的值 都是 a: 23 b: 3

let {a,b} = {a:'3',c:'d'}
//a: 3 b: undefined

對象的解構賦值還有將某一個現有對象的方法賦值到一個新的變量，以下：

let {sin,cos} = Math
// Math 中的sin cos 方法將賦值給變量 sin cos

let {log} = console
// log(2)  ===  console.log(2)

若是等號左邊的變量名不能和等號右邊的對象的屬性名一致，則必須寫成以下格式：

let {a:b} = {a:'ss'}     // b：ss
//a是屬性名，b纔是實際賦值的變量名

對象的解構賦值同樣是能夠嵌套解構的，以下：

第一種：

let obj = {
    p:[
        'Hello',
        {y:'world'}
    ]
}

let {p:[x,{y}]} = obj 
// x: Hello, y: world

這邊的p只是屬性不是變量，若是p想賦值能夠寫成：

let {p,:[x,{y}]} = obj

第二種：
const a = {
    loc: {
        t :1,
        b :{
            c:1,
            d:2    
        }
    }
}
let {loc:{t,b:{c,d}}} = a
或者
let {loc,loc:{t,b,b:{c,d}}} = a

嵌套賦值

let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]

若是解構模式 是嵌套的對象，若是子對象所在的父屬性不存在，則會報錯，以下：

let {foo:{bar}} = {baz:'baz'} //報錯

默認值

let {x = 3} = {}
// x: 3

let {x,y = 5} = {x : 1}
// x: 1, y: 5

let {x: y = 5} = {}
// y = 5

let {x: y = 5} = {x : 4}
// y = 4

let {x: y = 'hhhh'} = {}
//y = 'hhhh'

Tips:以上左邊 x爲屬性名，y爲變量


let {x = 5} = {x: undefined}
// x: 5

let {x = 4} = {x: null}
// x: null

同數組同樣遵循 嚴格等於 
只有右邊爲undefined的時候默認值纔會生效

注意點：

1）不能將已聲明的變量用於解構賦值，由於已是一個代碼塊。

字符串的解構賦值

若是賦值的對象是數組，字符串將被分割爲數組的格式，一一對應賦值

let [a,b] = 'ha'
// a = h , b = a

同時能夠得到字符串的長度：

let {length:len} = '12121'
// len = 5

數值和布爾值的解構賦值

若是等號右邊是數字或者布爾值 則轉換成對象或者說，除了是數組和對象，其餘值都將轉換成對象，null 和 undefined 除外。以下：

let {t:s} = 123
let {t: s} = true

函數參數的解構賦值

function add([x,y]){
    return x+y
}
add([3,5]) // 8

[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13

function m({x=3, y=4} = {}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
m({x:32})         // [32,4]
m({})             // [3,4]
m()               // [3,4]

function m({x,y} = {x=0,y=0}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
// 代替右邊的 x:0, y:0 因此是傳值 33  8

m({x:32})         // [32,undefined]
//由於傳值替代右邊的賦值，可是隻有x沒有y
//因此y是取   左邊y的默認值，由於你沒有賦值 爲undefined

m({})             // [undefined,undefined] 
// 取左邊x,y的默認值，由於沒有賦值 爲undefined

m()               // [0,0]
// 沒有傳值，使用自己的賦值 都是0

其餘

不能使用圓括號的狀況

1. 變量聲明語句
2. 函數參數
3. 賦值語句的模式

可使用圓括號的狀況

1. 賦值語句的非模式部分，可使用圓括號

解構賦值的用途

1. 交換變量的值
2. 從函數返回多個值
3. 函數參數的定義
4. 提取JOSN數據
5. 函數參數的默認值
6. 遍歷Map結構
7. 輸入模塊的指定方法

歡迎關注 公衆號【小夭同窗】

ES6入門系列

ES6入門之let、cont