很多人可能和我一样，第一次看到这个词的时候摸不着头脑。但是镇静再看一遍彷佛明白了，“把数据构造分解开分别进行赋值”。
我们先看几个小例子
let [a,b,c] = [1,2,3];console.log(a,b,c);//1 2 3let {name,age} = {name:\"大众jack\"大众,age:\"大众18\"大众};console.log(name,age);//jack 18let {toString,length} = \"大众hello\公众;console.log(toString === String.prototype.toString,length);//true 5let [a,b,c,d,e] = \"大众world\"大众;console.log(a,b,c,d,e);//w o r l dlet {shift,length,key} =[1,2,3];console.log(shift,length,key);//[Function: shift] 3 undefinedfunction fo([x,y,z]){ console.log(x,y,z);}fo([3,4,2]);//3,4,2function fobj({x,y,z}){ console.log(x,y,z);}fobj({z:1,y:4,x:2});//2 4 1let [x, y, z] = new Set(['a', 'b', 'c']);console.log(x) // \公众a\公众
相信大家不难从上述的几段代码案例总结出来解构赋值的规律，我总结到如下几点：
1、解构主体为数组或者工具。
2、解构源必须具备Iterator接口或者经由转换之后具备Iterator接口。（什么是Iterator可看我接下来文章）
3、数组解构是按顺序进行解构（有序），工具是通过方法名或者属性名进行构造（无序）。
4、数组解构解构源会被转换为数组，工具解构解构源会被转换成工具。
5、解构工具时关键词解构会从当前实例持续向上访问原型链直到查不到返回undefined。
以上总结包含了大部分根本场景我们会碰着的情形，但还是有更多的细节须要我们把稳下：
我们可以嵌套解构
let [a,[b,{name,age}],d] = [1,[4,{name:1,age:1}],6];console.log(a,b,d,name,age);//1 4 6 1 1
我们也可以改变解构的变量名
var {b:x,a:y} = {a:1,b:2};console.log(x,y);//2 1
解构赋值可以设置默认值
var [x=1,y=2] = [,0];console.log(x,y);//1 0var {x=1,y=2] = {y:0};console.log(x,y);//1 0
数组解构赋值对付不可迭代实例将报错
let [val] = 1;let [val] = false;let [val] = NaN;let [val] = undefined;let [val] = null;let [val] = {};
数组解构可以跳跃赋值
//取出数组第三个var [,,x] = [1,2,4];console.log(x)//4
数组解构可以截取
let [,...x] = [1,2,4];console.log(x)//[ 2, 4 ]
那它有哪些用场呢？
1、交流变量，是一种很酷的玩法
var {x:y,y:x} = {x:1,y:2};console.log(x,y);//2 1let x=1;let y = 2;[y,x] = [x,y];console.log(x,y);//2 1
2、接管函数返回的多个值
function test(){ return [1,2,3];}let [a,b,c] = test();console.log(a,b,c);//1 2 3function test(){ return {x:1,y:2,z:3};}let {y,z,x} = test();console.log(y,z,x);//1 2 3
3、接管不按顺序的函数参数
function get({name,age,sex}){ console.log(name,age,sex);}get({name:\"大众Topqiang\"大众,age:24,sex:1});//Topqiang 24 1get({age:24,name:\公众Topqiang\"大众,sex:1});//Topqiang 24 1get({name:\"大众Topqiang\"大众,sex:1,age:24});//Topqiang 24 1
接口封装调用函数再也不用考虑参数顺序了,往后我们在封装方法供应工具包时就可以让我们的关注点放在业务本身而无需关注参数传入的顺序上。这是多么美好的一件事。 4、设置默认值
function get({name=\公众topqiang\"大众,age,sex}){ console.log(name,age,sex);}get({age:24,sex:1});//Topqiang 24 1
5、为模块化编程供应优雅的模块引入办法
const {read,write} = require(\公众fs\"大众);
6、函数的参数列表可以自动装载成数组
function getarr(...args){ console.log(args);}getarr(1,23,4);//[ 1, 23, 4 ]
。。。还有我没有创造的好处。。。
以上便是我对解构赋值的一些总结，希望能对还没入门的你供应到一些帮助。es6给我们供应了很多幽美的语法糖，让我们编最少来更优雅，更易读（条件懂es6），更规范。但是这些语法糖相对es5实现办法性能怎么样？要不要来我们现场互换互换呢（详情请阅读原文找到我）！
