前言：什么是ES6？ECMAScript 6（简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。其中相比较于ES5新增了诸多的特性，并且ES6可转换为ES5的语法。->在线ES6转换为ES5工具。
本系列学习随笔参考了阮一峰老师的《ES6标准入门》。
一、解构赋值简述
在学习ES6之前，如果我们要从一个数组将值取出来，我们要如何去做？
let arr=[1,2,3];
let a=arr[0];
let b=arr[1];
let c=arr[2];
是不是感觉上面的代码很繁琐，我们仅仅是从简单的数组结构获取数据就需要很多重复的代码，若是更为复杂的数据结构呢，代码量可能更多，需要遍历的次数也更多。
针对于这种情况，ES6推出了解构赋值，所谓的解构赋值就是允许按照一定模式，从数组和对象中提取值，对变量进行赋值。
二、数组的解构赋值
那我们用ES6的解构赋值可以怎么去优化简述中的例子呢？
let [a, b, c] = [1, 2, 3];//表示可以从数组中提取值，按照对应的位置进行一一赋值。
同样的效果，只需要一行代码，是不是更清晰与简洁。 事实上，只要是具有Iterator 接口的都可以解构成功，关于iterable结构请关注我的博客，后续将会介绍，或者也可以去学习阮一峰老师的《ES6标准入门》的 Iterator一章
针对于更复杂的数组结构，也可以进行解析：
let [a, [[b], c]] = [1, [[2], 3]];//a==1,b==2,c==3
let [a,,c]=[1,2,3]//也可以只要其中几个值a==1,c==3
let [a, ...d] = [1, 2, 3, 4];//可以用...表示这个范围内解构成一个数组,a==1,d==[2,3,4]
let [a,b,c]=[1,2];//若是解构不成功，值为undefined,a==1,b==2,c==undefined
let [a] = 1;//若是右边是不可遍历结构，将会报错。输出Uncaught TypeError: 1 is not iterable;
let [a, b, c] = new Set([1, 2, 3]);Set结构也可以解构成功;
解构赋值中允许指定默认值：
let [a,b,c=3]=[1,2];//a==1,b==2,c==3;
//特别注意的是，当一个数组成员严格等于undefined，默认值才会生效。
let [a,b=2,c]=[1,null,3];//a==1,b==2,c==3;
默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [a=1,b=a]=[];//a==1,b==1;
let [a=b, b=1] = []; //Uncaught ReferenceError: b is not defined
三、对象的解构赋值
解构赋值不仅可以在数组中使用，对象中也是可以的，但是对象与数组不同的是，数组是按照顺序排列的，所以在进行对象解构赋值时，属性名与变量一定要一样。
接下来我们看下例子：
let {a,b}={a:1,b:2};//a==1,b==2
//若是想要属性名与变量名不一样，我们也可以写成以下这样
let { a: b } = { a: 1, c: 2 };//b==1,对象的解构赋值是先去寻找相同的属性名再去赋值，但是真正赋值的是后者
在对象中也可以像数组一样进行嵌套赋值
let obj = {
a: [
1,
{ c: 2 }
]
};
let { a: [b, { c }] } = obj;//b==1,c==2
//此时a是不赋值的，若是a想赋值，可以写成这样
let { a, a: [b, { c }] } = obj;//a==[1,{c:2}],b==1,c==2
如果我们要对已经声明的变量进行解构赋值，要小心js引擎将{}解析成代码块：
let a;
{a} = {a: 1};//Uncaught SyntaxError: Unexpected token =
//正确的写法如下：
({a} = {a: 1})
我们也可以有更为复杂的嵌套赋值：
let obj = {};
let arr = [];
({ b: obj.a, c: arr[0] } = { b: 1, c: 2 });//obj=={b:1},arr==[2]
我们可以引申出很多精妙的用法：
//将Math中的log，sin，cos方法逐一赋值出来。用的时候更方便。
let { log, sin, cos } = Math;
//操作数组的结构
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
跟数组一样，我们在对象的解构赋值也可以进行指定默认值
var {a = 1} = {};//a==1
四、字符串的解构赋值
字符串也可以解构赋值：
const [a,b,c,d]=[‘fish‘];//a==‘f‘;b==‘i‘;c==‘s‘;d==‘h‘;
//还可以解构他的属性
const [length:len]=[‘fish‘];//len==5
五、函数参数的解构赋值
函数的参数也能解构赋值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
上面的例子中，一传入参数就会自动解构赋值成x1 y2
函数参数的解构赋值也能指定默认值
function add({x = 0, y = 0} = {}) {
return x+y;
}
add();//0
add(1);//1
六、用途
解构赋值不单单只能用来纯粹的从对象或者数组里面取值，他还有很多精妙的用途：
let a=1;
let b=2;
[a,b]=[b,a];//此时a==2;b==1;
上面就是一个两个变量交换值的例子，看更加起来简洁清晰易于理解。
平时我们函数如果想返回多个变量怎么办？我门可以将他们先转成数组或者对象，然后再解构赋值：
function getArry(){
return [1,2,3];
}
let [a,b,c]=getArry();//a==1;b==2;c==3
利用解构赋值我们也可以将函数的多个参数一一对应起来；
function a([a,b,c]){};
a([1,2,3]);
//还可以设置函数参数的默认值，上文已提过，这里就不重复说明了。
我们也可以利用解构赋值用来提取json里面的值；
let json={
data:[1,2,3]
}
const [data: num]=json;//num==[1,2,3]
总之，变量的解构赋值是ES6新增的一种使代码更加优美简洁的一种模式，有兴趣的同学可以多去使用学习。
原文地址：https://www.cnblogs.com/hongxuquan/p/10161721.html