ES6中變數的解構與賦值

今天來總結一下es6 為我們提供的變數的結構賦值。這個能在我們大量的去聲明變數和遍曆數組是很實用。es6提供的這種方法也很簡單，很容易理解。 一、數組的賦值與解析

1.我們以前賦值變數這樣賦值

var b = 1;var c = 2;var d = 3;var e = 4;

而現在我們可以這樣賦值：

 let [a,b,c,d] = [1,2,3,4]; console.log(a,b,c,d) // 1,2,3,4

2.數組賦值我們還可以這樣

 let [a,b=2] = [1];console.log(a,b) // 1,2 

如果我們這樣：

 let [a,b=2] = [1，4];console.log(a,b) // 1,4  b的值就會變成4，原來的2會被覆蓋 

重點內容 這種匹配的方式在es6中屬於模式比對，即作用兩邊結構相同就可以進行賦值。 二、對象的賦值與解析

1.對象的賦值與解析和數組有一個重要的不同點，數組賦值是根據位置去判斷並賦值的，而對象是根據變數和屬性對比去賦值的，例如：

 let obj = {    name:"Jhone",    age:"23",    sex:"man"  }  let obja = {name,age,sex} = obj;  console.log(obja.name)

對象中的變數 name,age,sex 和對象obj中的屬性 name,age,sex 去對比賦值。可能這樣說你有些迷惑，那咱們看下面的這個例子：

let a= {name:"jhon"} = {name: 1}; console.log(a) // 報錯 Invalid destructuring assignment target

上面報錯是 無效的解構的任務目標, 這是因為 {name:"jhon"} 中的 jhon不是變數，而是個字串，也就是name 本身是有固定值得，我們不能再去賦值了。

2.另外我們還可以這樣賦值

 let a= {name:jhon,age:ba} = {name:1,jhon:3,};  console.log(a) // {name:1,jhon:3}

這說明前面對象在賦值時，某些屬性在後面的對象中沒有，那麼結果會刪除該屬性，如果後面的對象中含有某些前面對象不包含的屬性，那麼結果會將該屬性添加進去。

3.如果我們事先用let聲明了某些變數，像下面一樣

let jhon;let {name:jhon} = {name:"King"}// 會報錯 'jhon' has already been declared 

這是因為解析器將大括弧理解成了一個代碼塊，而不是一個指派陳述式。 let聲明的變數是不可以更改的（只能改變變數的值）

我們可以這樣這做：

    let jhon;    let ({name:jhon} = {name:"King"}); // 加一個大括弧

如果聲明的變數有衝突，加一個大括弧是必須的。 三.數組和對象混合賦值

1.數組裡面嵌套對象

  let obj = [    name,      {age:"30"}  ]  var ary = [a,{b}] = obj;  console.log(ary)

2.對象裡面嵌套數組

 let obj = {      ar:[        "name",         "age"       ] } var ary = {ar:[a,b]} = obj; console.log(ary)

3.對象裡面嵌套對象

let obj = {  name:"jhon",  age:{one:1,two:2}}var ary = {name,age:{one,two}} = obj;console.log(ary)

四.解構並賦值

1.字串解構

let [a,b,c]="123"// a = 1// b = 2// c = 3

let {length : len} = 'come';  //length = 5

2.數組解構

var ary = [1, 2, 3];  var {0 : one, 1 : two} = ary;  one // 1  two // 2  

3.函數參數的解構賦值

  function add([x, y]){     alert(x + y);    }    add([5, 5]); // 彈出10