解构赋值 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