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

时间:2023-03-08 17:40:27
ES6知识整理(2)--变量的解构赋值

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

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

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

变量提升

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

这里写个栗子:

变量的先使用后定义场景

var声明,这样

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

let声明,这样

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

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

解构赋值

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

不完全解构

这里只去前面的对应

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

b只取了2

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

这样子b取的就是数组了

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

默认值解构

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

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

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

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

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

对象的解构赋值

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

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

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

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

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

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

字符串解构赋值

只取单个字符串

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

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

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

函数参数的解构赋值

1和2对应赋值给x和y

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

解构赋值的用途场景

互相赋值

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

函数中返回多个值

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

变量map:

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

打印是这样

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

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

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

——公众号:海瑞菌

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

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