ES6学习笔记二

在以前的代码中,每个变量的赋值只能通过var定义,完了之后给赋值,如果要声明多个的话,都需要我们去var,然后赋值,这样就会显得代码非常冗余,因此ES6中提出结构赋值,下面主要记录的就是这块的问题。

先看段代码:

在ES5中,如果需要多个变量,我们通常会

    

或者:


这样的代码看着很冗余,但是在ES6中我们就不需要这样去写了,最简单的例子,我们可以用

数组结构赋值


简单的一行代码就把我们需要写好多的代码给代替了,效果也是相同的。这种写法就是一种匹配模式,就是等号两侧的结构相同,那么左侧的变量就会从右侧取值;


如果解构不成功,就会显示undefined,一般情况左右两侧的数据是相当的,因为我们在用的时候肯定是有需要在写吗,但是难免会出现两侧数据不当的情况,当左侧的值多于右侧的值,那么左侧对应的就会使undefined,比如:


上图的两个b都会是undefined,另一种情况是右侧的值多余左侧的值,这种情况不会对赋值造成影响


上图中的变量都能拿到自己对应的数值

在这需要注意的是,因为我们左侧用的数组,所以右侧也要是数组,不然就会报错,比如:


这都是会报错的切记,结构赋值的时候我们也是可以给设置默认值的,比如:


这样也是可以的,但是默认值只有在右侧对应的位置为undefined的时候才会赋值,其他的情况还是正常赋值


上图中第一个b会是2,第二个就会是null了。

当然我们也可以用

对象结构赋值

比如:


同样我们可以获取到我们想要的结果,即:a=1,b=2,这个和数组的结构赋值类似,但是最大的区别点就在于,数组是按顺序取值的,对象则是按照key名取值的,对象没有顺序之说。


上图中的两个取值是不一样的,因此这个是我们需要记住的一点,对象的结构赋值也是可以复杂点的,比如


注意上面赋值的时候a是代表的一种模式、结构,并不是变量,下图的这样才是一个变量


这是最常用两种结构赋值方式,更多、更详细的可以去阮大大的http://es6.ruanyifeng.com/#docs/destructuring学习学习




猜你喜欢

转载自blog.csdn.net/wo_dxj/article/details/80951128
今日推荐