ES6中變量的解構與賦值

原創

2020-06-16 05:28

今天來總結一下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

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.