1.概念

允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

2.数组模型的解构（Array）

2.1基本

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

2.2可嵌套

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

2.2可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

2.3字符串

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

2.4默认值

解构赋值允许指定默认值
只有当一个数组成员严格等于undefined，默认值才会生效。

let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

2.5不完全解构

等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功

let [a = 1, b] = []; // a = 1, b = undefined
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

2.6剩余运算符

ES6的扩展运算符和剩余操作符的对比和应用

• 扩展运算符的核心就是2个字：打散。
• 剩余操作符的核心就是2个字：打包

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

3.对象模型的解构（Object）

3.1基本

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

let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

3.2不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

3.3剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

3.4默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

4.用途

4.1交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

4.2从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

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

// 返回一个对象

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

4.3函数参数的定义

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

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

4.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]

4.5遍历 Map 结构

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

4.6输入模块的指定方法

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

//module.js文件
exports.sayName=function(){
    console.log("zhoubenben");
}
exports.sayAge=function(){
    console.log(13);
}
//.js引用
let {sayName,sayAge}=require("./module");
sayAge();  //13
sayName();  //zhoubenben