ES6知识整理(2)--变量的解构赋值

最近准备在业余空闲时间里一边学习ES6,一边整理相关知识。只有整理过的学习才是有效的学习。也就是学习之后要使用和整理成文,才是真正的学到了。。。

上一篇是一个试水,现在接上。

变量提升


看了下朋友回复,上篇还少讲了个变量提升,其实也是搜索之后才看到的,于是现在这里说下,所谓变量提升是es5中才有的,es6中已经去除了。

这里写个栗子:

变量的先使用后定义场景

var声明,这样

8.png

let声明,这样

9.png

查了一下,基本可以理解为:es5容忍这种写法,即使是先使用,后面才声明,也不会报错。但es6就无法容忍了,你前面没声明,你就不能使用,即使后面声明了。得有个先后顺序。


解构赋值


现在我们来说说,es6的解构赋值,比起es5有什么不同呢?都是一种赋值方式。(解构赋值的场景很多)


这是es5的多个变量赋值方式:

image.png

这是es6的多个变量赋值方式(当然es6中也能用es5的语法):

分别赋值了,一一对应的。

image.png

你甚至可以这样,只要左右两边的解构一样就可以。

image.png

es6允许这样:(,左右可以是空的)声明的变量对应后面的值

image.png

还有这种操作:(...变量,把后面的值以数组形式都赋值给后面的变量)

image.png

当然,这样就报错了:(...变量必须是解构赋值的最后一个变量)

image.png

这种情况,只有一个值,第二个值就没有了,就是undefined,...变量就是个空数组

image.png

不完全解构


这里只去前面的对应

image.png

b只取了2

image.png

这样子b取的就是数组了

image.png

默认值解构


表示赋的值为不写或undefined,那就会取默认值

image.png

image.png

严格相等运算符(===)


image.png

对象的解构赋值


可以这样子,赋值时:后面给出变量的值

image.png

位置是可以调换的,值一样

image.png

没赋值到的变量会是undefined,不报错

image.png

字符串解构赋值


只取单个字符串

image.png

这表示es6的取字符串长度,{}中,:前面就是es5的.操作,:后面是变量(但这种方式很少用,也不是所有的方法和属性都支持)

image.png

函数参数的解构赋值


1和2对应赋值给x和y

image.png


解构赋值的用途场景


互相赋值

image.png

函数中返回多个值

image.png


变量map:

image.png

打印是这样

image.png


即使工作中,也要平均每天(晚上)花2个小时进行学习与总结,无论学的是什么。


——公众号:海瑞菌

qrcode_for_gh_94b347630286_258.jpg


猜你喜欢

转载自www.cnblogs.com/wuhairui/p/9080361.html