【ES6系列】数组、对象的解构赋值

782 阅读1分钟

一、数组的解构赋值

1648042540(1).png

这种写法大家都不陌生,分别对a、b、c三个变量进行赋值。下面我们可以使用es6中,数组的解构赋值来进行操作,代码会变得更加简洁:

1648042685(1).png

左侧,数组中是需要赋值的变量,右侧一一对应左侧的变量。是不是代码量更少了?

因为左右两边是一一对应的关系,所以如果左侧的变量在右侧没有与之对应的值,那么打印出来就是undefined;

1648042794(1).png

当然,我们也可以直接在左侧给变量赋默认值,这样就不会出现undefined的情况;

1648042964(1).png

如果默认值和右侧实际的赋值冲突,那么以右侧的赋值为准,忽略左侧默认值:

1648043050(1).jpg

二、对象的解构赋值

对象的解构赋值和数组基本相同,只是格式需要写成对象形式。在项目中,接口返回数据之后,我们常常会使用对象的解构赋值对数据进行处理;

1648043253(1).png

同样的,如果左侧声明了,但是右侧没有对应的变量,则还是为undefined,左侧的变量名和右侧需要一一对应,保持一致;

1648043401(1).png

三、字符串的解构赋值

字符串的解构赋值用得比较少,这里就简单写一下demo;

左侧用数组的写法,右侧放上字符串;左侧的变量会一一对应右侧字符串中的每一个元素;比如左侧有三个变量,右侧字符串中有5个子元素,那么就只会匹配前面三个子元素

1648043758(1).png