ES5中,各种变量、对象的赋值,只能一对一的赋值,es6已经改革,新标准允许我们分组赋值,变量与值位置对应,一一赋值,这便是解构赋值。
let [w,b,i]='wbi';
console.log(w,b,i);
let [w,b]='wbiokr';
console.log(w,b);
let [w,b,i,o]='wb';
console.log(w,b,i,o);
let [(w)]='wbiokr';
[(w)]='wbiokr';
console.log(w);
string解构赋值的时候,键值对永远是一一对应,多出的value不会赋值给最后一个键,多出的键,则为undefined |
let [a,b,c]=[1,2,3];
console.log(a,b,c);
let [a,b]=[1,2,3,4];
console.log(a,b);
let [,a,b]=[1,2,3,4];
console.log(a,b);
let [a,b,c]=[1];
console.log(a,b,c);
let [a,b,c]=[1,2,[3]];
console.log(a,b,c);
let [a,[b]]=[1,2];
let [a,[b]]=[1,[2]];
console.log(a,b);
let [a,b]={a:1,b:2}
let [(a)]=[1];
[(a)]=[1];
console.log(a);
let {a}={a:1};
console.log(a);
let {b}={a:1};
console.log(b);
let {a:c}={a:1};
console.log(c);
let a;
let {a}={a:1};
let a;
{a}={a:1};
console.log(a);
let c;
let {a:c}={a:1};
let c;
{a:c}={a:1};
console.log(c);
let {a,b:{c}}={a:1,b:{c:3}};
console.log(a,b,c);
let {(aaaaq)}={aaaaq:1};
let {a:(a)}={a:1};
{a:(a)}={a:1};
console.log(a);
如同数组解构赋值,只要位置对应,不管嵌套与否,嵌套几层,都能成功赋值,但是解构赋值的时候,一定要注意格式。开发过程中的不细心,一个括号问题有可能搞死人。 |
(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);
let {a,b=true}={a:2};
console.log(a,b);
let {a=true}={a:NaN};
console.log(a);
let {a=true}={a:null};
console.log(a);
let {a=true}={a:undefined};
console.log(a);
function fun(x=1,y=2){
console.log(x,y)
};
fun('s');
fun(2,5);
fun();
function fun2({x,y}={x:1,y:2}){
console.log(x,y);
}
fun2();
fun2({x:2});
默认值有绝对会是很好的东西,比如,在我们调用封装ajax函数的时候,页面初始化,会自动调用一次,此时可以不用传递值。 |
———-
曾经我被问到过一个题目,不定义第三个变量,如何交换变量x、y的值。最后也做出来了,但是真的杀死了我N多个脑细胞。 |
var x=2,y=5;
x=y-x;
y=y-x;
x=y+x;
let x=2,y=5;
[x,y]=[y,x];
console.log(x,y)