ECMAScript 6 之解构赋值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