解構賦值 Destructuring Assignment

解構賦值 Destructuring Assignment

ES6中可以通過一定的模式將數組或對象中的值直接賦值給外部變數，稱為解構

1. 對象的解構賦值

    // 在ES5中，當需要獲取一個對象中的變數值的時候，不得不進行過如下操作
    const person = {
        name: 'zhang',
        age: 18,
        hobby: 'coding'
    }
    let name = person.name;
    let age = person.age;
    let hobby = perosn.hobby;
    // do something
    ​
    // 在ES6中能夠對對象進行解構賦值
    const {name, age, hobby} = person;
    console.log(name, age, hobby); // zhang 18 coding
    // 以上情況必須保證外部變數名與解構的對象中的變數名一致

   • 對象解構過程中，外部變數名也可以與對象內部變數名不同,但此時不可以使用對象的縮寫形式

   const person = {
        name: 'zhang',
        age: 18,
        hobby: 'coding'
    }
    ​
    const {name, age, hobby} = person;
    // 上面的解構表達式實際上是一種縮寫形式
    // 其完整的形式如下：
    const {name: name, age: age, hobby: hobby} = person;
    // 只是在ES6中對象內部的屬性名省略了，因此必須保證外部的變數名與對象內部變數名一致
    ​

   • 當外部變數名與對象內部變數名不同時，必須要寫完整的形式

    const person = {
        name: 'zhang',
        age: 18,
        hobby: 'coding'
    }
    ​
    const {name: newName, age: newAge, hobby: newHobby} = person;
    console.log(newName, newAge, newHobby); // log 'zhang 18 coding'
    // 對象解構賦值是將對象中而定變數賦值給newName，而不是賦值給name

   • 對象解構的嵌套

    const family = {
        father: {
            name: 'fname',
            age: 50
        },
        mother: {
            name: 'mname',
            age: 48
        },
        me: {
            name: 'zhang',
            age: 18
        }
    }
    ​
    const {name: myName, age: myAge} = family.me;
    console.log(myName, myAge); // log 'zhang 18'
    const {b} = a;
    const {b: {c}} = a;
    const {b: {c: {d}}} = a;
    const {b: {c: {d: {e}}}} = a;
    console.log(b); // {c:{d:{e:{str: 'this is a string'}}}}
    console.log(c); // {d:{e:{str: 'this is a string'}}}
    console.log(d); // {e:{str: 'this is a stirng'}}
    console.log(e); // {str: 'this is a stinrg'}
    // 當結構複雜的時候可能需要慢慢分析

   • 當出現結構失敗的情況是，會給變數賦值undefined

     const person = {
          name: 'zhang',
          age: 18,
          hobby: 'coding'
      }
      ​
      const {hate} = person;
      console.log(hate); // undefined
      // 當結構的變數不存在時，會給變數賦上undefined

   • ES6中允許為變數添加預設值，當變數的解構賦值失敗 --> 為變數賦值為undefined時，可以給變數添加預設值

     需要註意的是：只有當變數值嚴格等於(===)undefined時才會賦預設值，當變數值為空串，false或者null時，是不會為變數賦預設值的

      const car = {
          price: 500000,
          brand: 'BMW'
      }
      ​
      const {price='30000', brand='Mini', color='red'} = car;
      console.log(price, brand, color); // log '500000 BMW red'
      // 當進行解構賦值時，color賦值失敗，其值為undefined，但在結構過程中為color指定預設值，因此，color被賦值'red'
      ​
      ​
      // 比較
      let obj = {
          prop1: undefined,
          prop2: '',
          prop3: null,
          prop4: false
      }
      ​
      const {prop1 = '1', prop2 = '2', prop3 = '3', prop4 = '4', prop5 = '5'} = obj;
      console.log(prop1, prop2, prop3, prop4, prop5);
      // log '1 null false 5'
      // 當然空串輸出是看不見的，此時只有prop1和prop5被賦上預設值，可以說明，只有當變數的值嚴格等於undefined時，才會觸發預設賦值的操作

2. 數組的解構賦值 ES5中想要獲取數組元素的值，就要通過數組的索引值

    const numList = [100, 200];
    const first = numList[0];
    const last = numList[numList.length - 1];
    console.log(first, last); // log "100 200"

   ES6中同樣為數組提供瞭解構賦值

    const numList = [100, 200];
    const [first, second] = numList;
    console.log(first, second); // log "100 200"

   數組解構賦值的語法與對象的解構賦值類似，對應位置上的值可以賦值給變數。 考慮到數組的本質上也是一個對象，於是做了個測試，使用對象的對象解構賦值的方式獲取數組的元素

   const numList = [1, 2, 3, 4];
    const {"0": num1, "1": num2} = numList;
    console.log(num1, num2); // log "1 2"
    // 使用數組解構偽數組的時候發現函數報錯了
    const obj = {
        "0": 1,
        "1": 2,
        "2": 3,
        legnth: 3
    }
    let [num1, num2, num3] = obj;
    console.log(num1, num2, num3); // obj is not iterable

    

   

   可以看出，數組解構的對象必須是可迭代的對象

   當想要獲取的數組元元素不連續時，則需要將中間元素的值空出來

   const arr = [1, 2, 3, 4, 5];
    const [num1, , num3, , num5];
    console.log(num1, num3, num5); // 1 3 5