ECMAScript 6 之解构赋值
学习解构赋值的时候,我想到了以前的一道题: >a,b 两个变量,不用第三个变量来切换两个变量的值
var a = 10,
b = 20;
a = {
a: a,
b: b
};
b = a.a;
a = a.b;
console.log(a) //20
console.log(b) //10
var a = 10,
b = 20;
a = [a,b]
b = a[0];
a = a[1];
console.log(a) //20
console.log(b) //10
也有奇淫技巧
var a = 10,
b = 20;
a=[b,b=a][0];
console.log(a) //20
console.log(b) //10
今天学到了解构赋值,那方法就更简单清晰了
var a=10;
var b=20;
[a,b]=[b,a];
console.log(a) //20
console.log(b) //10
怎么样,是不是很神奇?
数组的解构赋值
什么是解构赋值?
以前我们赋值变量是这样子的:
var foo1 =1;
var foo2 =2;
var foo3 =3;
console.log(foo1); //1
console.log(foo2); //2
console.log(foo3); //3
在es6中我们可以这样:
var [foo1,foo2,foo3]=[1,2,3]
console.log(foo1); //1
console.log(foo2); //2
console.log(foo3); //3
注意:左右两边格式一定要一样
那如果我只想赋值一部分变量呢?
var [,,foo3]=[1,2,3]
console.log(foo3); //3
var [,foo2,]=[1,2,3]
console.log(foo2); //2
如果相对应的位置没有值,比如说这样:
var [foo1,foo2,foo3]=[1,2]
console.log(foo1); //1
console.log(foo2); //2
console.log(foo3); //undefined
var [foo1,foo2]=[1,2,3]
console.log(foo1); //1
console.log(foo2); //2
支持 rest参数,也就是剩余参数. 符号为 …:
var [foo1,...foo2]=[1,2,3,4,5]
console.log(foo1); //1
console.log(foo2); //[2,3,4,5]
注意: 如果在rest参数的后面再写一个参数是会报错的:
var [foo1,...foo2,foo3]=[1,2,3,4,5] //报错
对象的解构赋值
对象的解构赋值与数组结构赋值非常相似
以前我们取对象属性下的值是这样子的:
var obj={
foo1:1,
foo2:2,
foo3:3,
}
var foo1=obj.foo1; //1
var foo2=obj.foo2; //2
var foo3=obj.foo3; //3
解构赋值:
var obj={
foo1:1,
foo2:2,
foo3:3,
}
var {foo1,foo2,foo3}=obj;
console.log(foo1); //1
console.log(foo2); //2
console.log(foo3); //3
只要在左边写上相对应的属性名称,就可以赋值给一个与属性名相同的变量;
如果变量名不想取一个跟属性名一样的,该怎么办?
var obj={
foo1:1,
foo2:2,
foo3:3,
}
var {foo1:bar1,foo2:bar2,foo3:bar3}=obj;
console.log(bar1); //1
console.log(bar2); //2
console.log(bar3); //3
如果没有相对应的属性名,也会是undefined
var obj={
foo1:1,
}
var {foo1,foo2}=obj;
console.log(foo1); //1
console.log(foo2); //undefined
微信公众号
