ES6---解构赋值number、bool、string、array、function、object

ES5中，各种变量、对象的赋值，只能一对一的赋值，es6已经改革，新标准允许我们分组赋值，变量与值位置对应，一一赋值，这便是解构赋值。

---

●string字符串解构赋值:

let [w,b,i]='wbi';console.log(w,b,i);//w b ilet [w,b]='wbiokr';console.log(w,b);//w,blet [w,b,i,o]='wb';console.log(w,b,i,o);//w,b,undefined,undefinedlet [(w)]='wbiokr';//括号，此时报错！[(w)]='wbiokr';console.log(w);//w 当前情况下括号不会报错

string解构赋值的时候,键值对永远是一一对应，多出的value不会赋值给最后一个键，多出的键，则为undefined

---

●array数组解构赋值

let [a,b,c]=[1,2,3];console.log(a,b,c);//1,2,3let [a,b]=[1,2,3,4];console.log(a,b);//1,2let [,a,b]=[1,2,3,4];console.log(a,b);//2,3let [a,b,c]=[1];console.log(a,b,c);//1,undefined,undefinedlet [a,b,c]=[1,2,[3]];console.log(a,b,c);//1,2,[3]let [a,[b]]=[1,2];//报错！！！！！！！！！let [a,[b]]=[1,[2]];console.log(a,b);//1,2let [a,b]={a:1,b:2}//报错！！！！！！！！！！let [(a)]=[1];//报错，括号问题！！！[(a)]=[1];console.log(a);//1，当前情况下，括号不会报错

位置对应，类型对应！

---

●对象object解构赋值:

let {a}={a:1};console.log(a);//1let {b}={a:1};console.log(b);//undefinedlet {a:c}={a:1};console.log(c);//1let a;let {a}={a:1};//报错，此时联想到let的特性，不能重复定义let a;{a}={a:1};console.log(a);//没有报错，结果：1let c;let {a:c}={a:1};//报错，同理let c;{a:c}={a:1};console.log(c);//1let {a,b:{c}}={a:1,b:{c:3}};console.log(a,b,c);//1,undefined,3let {(aaaaq)}={aaaaq:1};//报错，括号问题let {a:(a)}={a:1};//报错，括号问题{a:(a)}={a:1};console.log(a);//1当前情况下，括号不会报错

如同数组解构赋值，只要位置对应，不管嵌套与否，嵌套几层，都能成功赋值，但是解构赋值的时候，一定要注意格式。开发过程中的不细心，一个括号问题有可能搞死人。

---

●函数function解构赋值:

(function([a,b,c]){console.log(a,b,c)})([1,2,3]);//1,2,3[[1,2],[3,4]].reduce(function([a,b]){console.log(a*b)});//2 , 12

解构赋值同样可以作用域函数的参数，同样函数参数也可以赋值默认值

---

●解构赋值中的默认值:

let [a=1]=[];console.log(a);//1let {a,b=true}={a:2};console.log(a,b);//2,truelet {a=true}={a:NaN};console.log(a);//NaNlet {a=true}={a:null};console.log(a);//null;let {a=true}={a:undefined};console.log(a);//truefunction fun(x=1,y=2){    console.log(x,y)};fun('s');//'s 2fun(2,5);//2,5fun();//1,2默认值为1,2function fun2({x,y}={x:1,y:2}){    console.log(x,y);}//fun2函数的参数默认值是挣个参数对象fun2();//1,2同样输出默认值fun2({x:2});//2 undefined

默认值有绝对会是很好的东西，比如，在我们调用封装ajax函数的时候，页面初始化，会自动调用一次，此时可以不用传递值。

———-

●解构赋值交换x、y值:

曾经我被问到过一个题目，不定义第三个变量，如何交换变量x、y的值。最后也做出来了，但是真的杀死了我N多个脑细胞。

//定义X=2，Y=5不借助第三个值，交换X，Y，结果应该为x=5,y=2var x=2,y=5;x=y-x;//此时x=3,y=5y=y-x;//此时x=3,y=2x=y+x;//此时x=5,y=2///////如果硬es6的结构赋值呢.......let x=2,y=5;[x,y]=[y,x];console.log(x,y)//5,2 完美！！！！！！！