本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于ES6中新的变量声明方式介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。在ES5中,变量声明只有var和function以及隐式声明三种,在ES6中则增加了let、const、import和class四种。
1. let
1.1 块级作用域
let声明的变量的作用域是块级作用域(这个特性有点类似于后台语言),ES5 并没有块级作用域,只有函数作用域和全局作用域。
1 2 3 4 5 6 7 |
|
那么let的块级作用域有什么好处呢?
let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。看一个常见的面试题目:
1 2 3 4 5 6 7 8 |
|
把 var改成 let声明:
1 2 3 4 5 6 7 |
|
1.2 暂时性死区(Temporal Dead Zone)
在一个块级作用域中,变量唯一存在,一旦在块级作用域中用let声明了一个变量,那么这个变量就唯一属于这个块级作用域,不受外部变量的影响,如下面所示。
1 2 3 4 5 |
|
这个例子中tmp = 'dream or bread'的赋值会报错,因为在if块中的let对tmp变量进行了声明,导致该tmp绑定了这个作用域,而let临时死区导致了并不能在声明前使用,所以在声明前对变量赋值会报错。
暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
暂时性死区的意义也是让我们标准化代码,将所有变量的声明放在作用域的最开始。
1.3 不允许重复声明
(1) 在相同的作用域内,用let声明变量时,只允许声明一遍,但 var是可以多次声明的。大家都知道ES5 多次声明会造成变量覆盖而且不会报错,这就给调试增加了难度,而let能够直接扼杀这个问题在摇篮之中,因为会直接报错。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
(2) 不能在函数内部重新声明参数:
1 2 3 4 5 6 7 8 9 10 |
|
2. const
2.1 用于声明常量
const声明的常量是不允许改变的,只读属性,这意味常量声明时必须同时赋值, 只声明不赋值,就会报错,通常常量以大写字母命名。
1 2 3 4 5 |
|
这样做的两个好处:一是阅读代码的人立刻会意识到不应该修改这个值,二是防止了无意间修改变量值所导致的错误。比如我们使用nodejs的一些模块的时候,我们只是使用对应的模块(如http模块),但是并不需要修改nodejs的模块,这个时候就可以声明成const,增加了代码的可读性和避免错误。
2.2 支持块级作用域
const和let类似,也是支持块级作用域.
1 2 3 4 5 |
|
2.3 不支持变量提升,有暂时性死区
const声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
1 2 3 4 |
|
2.4 特殊情况
如果声明的常量是一个对象,那么对于对象本身是不允许重新赋值的,但是对于对象的属性是可以赋值的。
1 2 3 |
|
实际上const能保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针。
至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
如果要彻底将对象冻结(不可修改其属性),应该使用Object.freeze(obj)方法。同理,数组也是一样的。
3. import
ES6采用import来代替node等的require来导入模块。
1 |
|
$对象就是jquery中export暴露的对象。
如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。
1 |
|
注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。
4. class
ES6引入了类的概念,有了class这个关键字。类的实质还是函数对象。
先定义一个类:
1 2 3 4 5 6 7 8 9 10 |
|
constructor方法,就是构造方法,也就是ES5时代函数对象的主体,而this关键字则代表实例对象。
上面的类也可以改成ES5的写法:
1 2 3 4 5 6 7 8 |
|
其实,大多数类的特性都可以通过之前的函数对象与原型来推导。
生成类的实例对象的写法,与ES5通过构造函数生成对象完全一样,也是使用new命令。
1 2 |
|
在类的实例上面调用方法,其实就是调用原型上的方法,因为类上的方法其实都是添加在原型上。
Class其实就是一个function,但是有一点不同,Class不存在变量提升,也就是说Class声明定义必须在使用之前。
5.总结
在ES6之前,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域,let和const都添加了块级作用域,使得JS更严谨和规范。
let 与 const 相同点:
块级作用域
有暂时性死区
约束了变量提升
禁止重复声明变量
let 与 const不同点:
const声明的变量不能重新赋值,也是由于这个规则,const变量声明时必须初始化,不能留到以后赋值。
合理的使用ES6新的声明方式,不管是面试还是工作中都有实际的应用,尤其是工作中,大家一定要尽量的多使用新的声明方式,不但可以让代码更规范,更可以避免不必要的bug,浪费调试时间,进而提高工作效率。
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!
以上就是ES6中新的变量声明方式介绍(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者