变量的解构和解析

1、数组的解构赋值

---

基本用法
按照一定的模式，从数组和对象中提取值，对变量进行赋值。

let [a,b,c] = [1,2,2];

如果解构不成功就是 undefine，如下就是解构不成功的；

let [a] =[];
let [a,b] = [2];

如果等号右边不是数组将会报错，如下：

let [a] = 1;
let [a] = null;

2、对象的解构赋值

数组的元素是按次序排列的，变量的取值是由他的位置决定的；而对象的属性是没有次序的，变量名必须与属性同名才能取到正确值。解构也可以用于嵌套解构的对象。

let { foo, bar } = { foo: "aaa", bar: "bbb" };

• 如果解构失败，变量的值等于 undefined。
• 如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错

3、字符串的解构赋值

const [a, b, c, d, e] = 'hello';

4、函数参数的解构赋值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

[[1, 2], [3, 4]].map(([a, b]) => a + b);

5、用途

（1）交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

（2）从函数返回多个值

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

（3）函数参数的定义

方便将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取JSON数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

（5）遍历 Map 结构

任何部署了 Iterator 接口的对象，都可以用 for … of 循环遍历。Map结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值很方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

（6）输入模块的指定方法

加载模块时，往往需要指定输入哪些方法，解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

备注：阮一峰老师《ESMAScript 6 入门》学习笔记，很多详细内容请参考：http://es6.ruanyifeng.com/#docs/destructuring