es5中通常我们声明变量都是以下的方式：
var a = 10;
var b = 20;
var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr = [1,2,3,4,5];
var a = arr[0];
var b = arr[1];
var c = arr[3]; //或者 var obj = {
name: 'gary',
age: 20
} var a = obj.name;
var b = obj.age; //或者 //等等
有时变量多写起来真的很麻烦，很多繁琐的差不多的重复工作，es6为我们提供了多种更加便利的声明变量的形式——变量的解构赋值
es6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值。本质是模式匹配。
变量的声明和赋值是一体的，使用let或者const不可以重复定义
数组的解构赋值
数组的解构赋值需要左边的变量结构需要等于右边的值的结构，即给对应位置的变量声明对应位置的值，变量的取值由位置决定
只要某种数据类型具有迭代器(iterator)接口，就可以使用数组的解构赋值，不一定非是数组
es6中具有iterator接口的数据类型有：数组，类数组对象，字符串，Set，Map，Generator函数
注：对象不具有iterator接口，需要自己配置
var [a,b,c] = ['a','b'];
console.log(a); //a
console.log(b); //b var [a,[[b],c]] = [1,[[2],3]];
console.log(a); //
console.log(b); //
console.log(c); // //不完全解构，左边只是右边的一部分，但是模式是正确的
var [a,,c] = ['a1','b1','c1','d1'];
console.log(a); //a1
console.log(c); //c1 var [a,...b] = ['a2','b2','c2','d2'];
//rest参数：...b 获取多余的数组元素，组成一个新数组，常用于函数参数中，作用与arguments类似，arguments是类数组
console.log(a); //a2
console.log(b); //['b2','c2','d2'] var [a,b,...c] = ['a3'];
//rest参数必须是最后一个元素
console.log(a); //a3
console.log(b); //undefined 解构不成功就是undefined
console.log(c); //[] rest参数解构不成功是空数组[] //字符串具有iterator接口
var [a,b,c] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l var [a,b,c] = new Set(['aa','bb','cc']);
console.log(a); //aa
console.log(b); //bb
console.log(c); //cc
对象的解构赋值
对象的属性没有次序，变量必须与属性同名，才能取到正确的值，即变量名与属性名一一对应，次序不重要
var {foo,bar} = {bar: 'aaa', foo: 'bbb'}
console.log(foo); //bbb
console.log(bar); //aaa
var {foo} = {baz: 'ccc'}
console.log(foo); //undefined 因为变量与属性名不一致
//解决办法
//在变量前指定对应的属性名使用：隔开
var {baz:foo} = {baz: 'ddd'}
console.log(foo); //ddd foo指向baz属性对应的值
//还可以用于嵌套结构对象, 不过应该很少会这么做吧。。。
var obj = {
p: [
'Gary',
{
y: 'Guo'
}
]
}
var {
p: [
x,
{
y
}
]
} = obj;
console.log(x); //Gary
console.log(y); //Guo
如果是先声明了变量再进行对象解构赋值则需要加上括号，否则js回你认为{}是一个代码块，而不是解构赋值
var bar;
{bar} = {bar:1} //SyntaxError: expected expression, got '='
console.log(bar); var bar;
({bar} = {bar:111})
console.log(bar); //111 实际开发中不推荐这么做
对象解构赋值的小应用：求最大值
//正常方法
var arr = [2,5,1,8,4,2];
console.log(Math.max.apply(this, arr)); // //简化 var {max} = Math;
console.log(max.apply(this, arr)); // 即是将现有方法赋值到变量上使用
函数参数的解构赋值
结合数组和对象的解构赋值，进行函数参数的解构赋值
function f([x,y]){
return x+y;
}
f([1,2]); //
function d({name = 'g',age = '2'} = {}){ //undefined会触发默认值
return `${name} ${age}`; //此处相当于name+' '+age
}
d({name: 'Gary',age: '20'}); //Gary 20
默认值
当变量的值严格等于(===)undefined时默认值会生效
数组解构默认值设置：
var [a=1, b=2] = [,4];
console.log(a); //1 默认值
console.log(b); // var [a = 1, b = 2] = [4, undefined];
var [i = 10, s = 20] = [5,null];
console.log(a); //
console.log(b); //2 默认值
console.log(i); //
console.log(s); //null null !== undefined //如果默认值是表达式，那么会进行惰性求值，即用到才会进行计算，用不到就不理它
function f(){
return 'Gary';
}
var [a = f()] = [2];
console.log(a) //2 f()不会执行
对象解构默认值设置：
在变量后面使用＝进行默认值的赋值 var {foo = 默认值} ＝ {}
var {foo = 3} = {}
console.log(foo); //
var {baz:foo = 3} = {baz: null}
console.log(foo); //null
var {baz:foo = 5} = {baz: undefined}
console.log(foo); //
用途：
1. 交换变量的值
//正常
var a = 10;
var b = 20;
var c;
c = a;
a = b;
b = c; console.log(a); //
console.log(b); // //使用解构赋值 var x = 10;
var y = 20; [x,y] = [y,x];
console.log(x); //
console.log(y); //
2. 从函数返回多个值
3. 函数参数的定义
函数的参数如果是对象的成员，优先使用解构赋值
4. 提取JSON数据
5. 函数参数的默认值
在参数中指定默认值
避免 var a = obj || {}的语句
6. 遍历Map解构
7. 输入模块的指定方法