es6中的解構賦值

先說下解構賦值的優點
1.賦值語句乾淨，簡短，直觀。
2.交換變量的值的最佳方法
3.對數組和對象快速取值，
4.支持默認值可以直接在賦值語句裏定義，函數參數裏。就不用像以往那樣專門寫一行語句來設定默認值

   var json_from_server = [
    {
      name: '張三',
      age: 18
    },
    {
      name: '王二',
      age: 19
    },
  ];

未用解構方法

  var a = json_from_server[0]['name'];
  var b = json_from_server[0]['age'];
  var c = json_from_server[1]['name'];
  var d = json_from_server[1]['age'];
  console.log(a,b,c,d);

解構方法

  var [{name: a, age:b}, {name:c, age: d}] = json_from_server;
  console.log(a,b,c,d);

解構賦值的語法: 解構字符串，數組，對象

  const {對象的屬性名: 要賦值的變量名, 對象的屬性名: 要賦值的變量名} = 要解構的對象
  const person = {
    name:'張三',
    age:18,
    gender:'男',  
  }
  const {name:name,age:age,gender:gender} = person
  console.log(name,age,gender);   //  張三 18 男

當要解構的對象的屬性名和要賦值的變量名相同時, 變量名可以和屬性名簡寫爲一個
當對象屬性名不是太友好，過長等，可以對其進行重命名

  const {name, age, gender:sex} = person 
  console.log(name,age,sex);     // 張三 18 男

  可以設置解構默認值
   const {name, age, gender,hobby="敲代碼"} = person
   console.log(name,age,gender,hobby);  //  張三 18 男 敲代碼

對象的解構賦值

  1.含有數組、對象的
  
    const person = {
    name:'張三',
    age:18,
    gender:'男',  
    friend:["李四","王五"] ,
    pet:{name:'總裁',age:2}  
   }
   const {name,age,gender,friend,pet} = person
   console.log(name);   // 張三  
   console.log(friend); //  ["李四","王五"]
   console.log(pet);    //  {name:'總裁',age:2}
   

  2. 解構函數中的參數
  const person = {
    name: '張三',
    age: 19,
    gender: '男'
  }
  
結構中的的屬性是無序的
  
  function fn({ name, gender, age }) {
    console.log(name,age,gender)
  }
  fn(person)
    
  2.2 
  let f = () => {
    return {a: 0, b: 1, c: 2}
  }
  let {a, b} = f()
  console.log(a, b) // 0 1

數組中的解構

     數組解構。按照模式匹配對應地賦值給其它變量可以說是下標
     const arr = [1,3,5,7]

     let [a,b,c,d] = arr
     console.log(a);
     console.log(c);

     1.給部分數組賦值
     let [a,,,d] = arr
     console.log(a,d);

     2.不管簡單還是複雜的數組解構賦值，只要前後解構關係一樣就都可以賦值成功
     const num =  [1, [2, 3, [4, 5]]];
     const [arr1, [arr2, arr3, [arr4, arr5]]] = num
     console.log(arr1,arr2,arr3,arr4,arr5)   //  1, 2, 3, 4, 5
    
     3.與函數結合 
     let f = () => [1, 2, 3]
     let [a, b] = f()
     console.log(a, b)

    展開運算符...  展開運算符解構時 會把剩餘參數放一個數組中，只能放在最後面
    const arr = [1,3,4,5,6,7]

    const [a,...b,d] = arr  //  報錯

    const [a,b,c,...d] = arr
    console.log(d);
    
    const person = {name: '張三', age: 18, family:['father','mother','張三','sister']}
    let {name,  family:[,,d] } = person
    console.log(name,d)         

解構賦值沒有找到時會返回undefined

  const arr = []
  let [a] = arr;
  console.log(a)         // undefined 

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

  如果剩餘變量輪不到賦值，默認值不是undefined，而是空數組：
  let [a,b,...c] = [1,2];
  console.log(c); // []

模式差別會導致報錯

  const arr = [1,2,3]

嵌套關係差別

  const [a, [b,c]] = arr

  **

類型差別

  const {a,b,c} = arr
  console.log(a,b,c);