ES6

ES6学习笔记3:变量的解构赋值对象篇

Posted by mieruko on 2016-12-06

前言

变量的解构赋值。
一个使多变量赋值变得更加简单的东西。
它有很多形式，这篇博客是对对象形式做一个记录。

变量的解构赋值之基本用法

以前如果你想要提取出来对象中的一些值，你这样做： 

1
2
3
4
5
6
7
var obj = {
    a: 1,
    b: 2
}

var a = obj.a;
var b = obj.b;

ES6中，我们不这样做。
它变简单了： 

1
2
3
4
5
var obj = {
    a: 1,
    b: 2
}
let {a, b} = obj;

如果你尝试输出a, b,你会发现就是你想要的结果。

对象解构赋值过程中要注意的点

楼上我们的全局变量是a, b,这个全局变量是可以随便起名字吗？？？？
答案是不，因为对象里面的元素的无序的，所以无法像数组里那样去根据顺序一一对应。
因此我们必须把全局变量设置为对象里面属性名一模一样的一个名字，才能把对象中对应的属性名给召唤出来。

如果你不小心这么做了： 

1
2
3
4
5
var obj = {
    a: 1,
    b: 2
}
let {c, b} = obj;

完蛋，你就等着被报错吧。

我想起个新名字

我就是想起个新名字咋办？？？？？
比如你就是想让第一个值叫做c，这样做： 

1
2
3
4
5
var obj = {
    a: 1,
    b: 2
}
let {a:c, b} = obj;

然后你就可以试试输出c了，这下不会报错，会很顺利的。

由此我们也可以想到，我们最原始的那个过程其实是： 

1
2
3
4
5
var obj = {
    a: 1,
    b: 2
}
let {a:a, b:b} = obj;

这段代码的略写。

小贴士：
let不像var，var可以把一个名字的变量重复定义多次，都没问题，let只允许你定义一次，定义第二次的时候会报错。
所以楼上的所有代码中的解构赋值的变量名千万不要定义第二次。

修改解构赋值的值

有时候我们不仅仅需要在赋值的时候用解构赋值，我们还想在修改的时候也可以这么简单。
你会想到要这么写: 

1
2
3
4
5
6
var obj = {
    a: 1,
    b: 2
}
let a=0;
{a, b} = obj;

你要是敢这么写，就只能被报错。
这是为什么？？？？？
smile

这是因为，在js中，大括号你在不加任何其他操作的时候，它就是个代码块，当右边的大括号合上的时候，这个代码块就结束了，等号左边其实是找不到变量的。
因此，我们需要手动告诉解释器这个大括号是语句的一部分： 

1
({a, b} = obj);

输出试试看，你会发现a变成1了。

把对象里面的数组里面的变量抓出来

有时候对象里面嵌套数组，数组里面嵌套的变量值才是我们想要的，这咋整。
这样做： 

1
2
3
4
5
6
7
8
9
10
var obj = {
    arr: [
      'Yo',
      {
        a: 1,
      }
    ]
}

let {arr:[greet, {a}]} = obj;

没问题了。
这已经算是比较复杂的一种情况了。

对象解构赋值中默认值的情况

默认值在对象解构赋值中也是有的： 

1
2
3
let {a=1, b=2} = {a:10}
console.log("a:", a);
console.log("b:", b);

输出a的值是10，b的值因为对象里面的变量不够了，所以输出的是默认值2。

更复杂一点，如果既有默认值，又有新名字，我们应该这样写： 

1
2
3
let {a:A=1, b:B=2} = {a: 10}
console.log("a:", A);
console.log("b:", B);

把默认值跟在新名字后面。

结语

以上我们解构了各式各样的对象里面的属性，事实上，还可以解构方法。
办法是一样的！^_^
解构赋值大法好！

FEATURED TAGS
ES6