ECMAScript 6 的解构赋值是怎么回事

查看更多文章: https://alili.tech

学习解构赋值的时候,我想到了以前的一道题:

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

---

公众号“ Alili丶前端大爆炸”，关注后提供海量学习资料