传统赋值多个变量

  • 传统的做法，如何把一个数组的元素分别赋值给几个变量： 

    1. var array = ['hello', 'JavaScript', 'ES6'];
    2. var x = array[0];
    3. var y = array[1];
    4. var z = array[2];

    ES6

  • 在ES6中，可以使用解构赋值，直接对多个变量同时赋值：

  • 注意，对数组元素进行解构赋值时，多个变量要用[…]括起来 

    1. var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
    2. console.log('x = ' + x + ', y = ' + y + ', z = ' + z);
    3. //output:  x = hello, y = JavaScript, z = ES6

    嵌套数组

  • 如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致： 

    1. let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
    2. x; // 'hello'
    3. y; // 'JavaScript'
    4. z; // 'ES6'

  • 解构赋值还可以忽略某些元素： 

    1. let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
    2. z; // 'ES6'

  • 如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性 

    1. var person = {
    2.  name: '小明',
    3.  age: 20,
    4.  gender: 'male',
    5.  passport: 'G-12345678',
    6.  school: 'No.4 middle school'
    7. };
    8. var {name, age, passport} = person;
    9. console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);
    10. //output :  name = 小明, age = 20, passport = G-12345678

    嵌套对象

  • 对一个对象进行解构赋值时，同样可以直接对嵌套的对象属性进行赋值，只要保证对应的层次是一致的： 

    1. var person = {
    2.  name: '小明',
    3.  age: 20,
    4.  gender: 'male',
    5.  passport: 'G-12345678',
    6.  school: 'No.4 middle school',
    7.  address: {
    8.      city: 'Beijing',
    9.      street: 'No.1 Road',
    10.      zipcode: '100001'
    11.  }
    12. };
    13. var {name, address: {city, zip}} = person;
    14. name; // '小明'
    15. city; // 'Beijing'
    16. zip; // undefined, 因为属性名是zipcode而不是zip
    17. // 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
    18. address; // Uncaught ReferenceError: address is not defined

    使用的变量名和属性名不一致

    ```javascript var person = { name: ‘小明’, age: 20, gender: ‘male’, passport: ‘G-12345678’, school: ‘No.4 middle school’ };

// 把passport属性赋值给变量id: let {name, passport:id} = person; name; // ‘小明’ id; // ‘G-12345678’ // 注意: passport不是变量，而是为了让变量id获得passport属性: passport; // Uncaught ReferenceError: passport is not defined

  1. <a name="rR5r6"></a>
  2. ####  解构赋值还可以使用默认值  
  4. -  这样就避免了不存在的属性返回undefined的问题：  
  5. ```javascript
  6. var person = {
  7.     name: '小明',
  8.     age: 20,
  9.     gender: 'male',
  10.     passport: 'G-12345678'
  11. };
  13. // 如果person对象没有single属性，默认赋值为true:
  14. var {name, single=true} = person;
  15. name; // '小明'
  16. single; // true

已经被声明，再次赋值

  • 有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误： 

    1. // 声明变量:
    2. var x, y;
    3. // 解构赋值:
    4. {x, y} = { name: '小明', x: 100, y: 200};
    5. // 语法错误: Uncaught SyntaxError: Unexpected token =

  • 这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：

    ({x, y} = { name: '小明', x: 100, y: 200});