字面理解ES6的三种声明方式:
- var:它是variable的简写,可以理解成变量的意思。
- let:它在英文中是“让”的意思,也可以理解为一种声明的意思。
- const:它在英文中也是常量的意思,在ES6也是用来声明常量的,常量你可以简单理解为不变的量。
var声明:
var在ES6里是用来升级全局变量的,我们可以先作一个最简单的实例,用var声明一个变量a,然后用console.log进行输出。
1
2
|
var
a
=
'judy'
;
console
.
log
(
a
)
; //judy
|
我们可以看到JSPang在控制台已经被打印出来了。那如何理解它的作用是声明全局变量那?我们用匿名函数给他进行一个包裹,然后在匿名函数中调用这个a变量,看看能不能调用到。
1
2
3
4
|
var
a
=
"judy"
;
window
.
onload
=
function
(
)
{
console
.
log
(
a
)
; //judy
}
|
可以看到控制台输出了judy,这证明var确实是全局的。如果你觉的这个不够直观说明var是全局声明,还可以用区块的方式进行调用测试,先看下面的代码。
这时打印出来的值是多少那?对,应该是3,因为var是全局声明的。
let局部声明
通过两个简单的例子,我们对var的全局声明有了一定了解。那跟var向对应的是let,它是局部变量声明。还是上面的例子,我们试着在区块里用let声明。
1
2
3
4
5
|
var
a
=
2
;
{
let
a
=
3
;
}
console
.
log
(
a
)
;
|
这时候控制台打印出来的值就是2了。如果我们只在区块里声明,不再外部声明,我们打印a时就会报错,显示找不到变量。
1
2
3
4
|
{
let
a
=
3
;
}
console
.
log
(
a
)
;
|
上面两个例子说明了let是局部变量声明,let声明只在区块内起作用,外部是不可以调用的。
有些刚接触JavaScript的小伙伴会疑惑了,我感觉let还没有var好用,其实let是防止你的数据污染的,在大型项目中是非常有用处的。现在看一个循环的例子,我们来看一下let的好处。
用var声明的循环
1
2
3
4
|
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
console
.
log
(
'循环体中:'
+
i
)
;
}
console
.
log
(
'循环体外:'
+
i
)
;
|
你会发现循环体外的i变量被污染了,如果在外部再使用i时就会出现问题,这是开发者不想看到的。我们再利用let声明,就可以解决这个问题。
用let声明的循环
1
2
3
4
|
for
(
let
i
=
0
;
i
<
10
;
i
++
)
{
console
.
log
(
'循环体中:'
+
i
)
;
}
console
.
log
(
'循环体外:'
+
i
)
;
|
你执行时会发现控制台报错了,找不到循环体外的i变量。通过两种声明的比较,可以明白let在防止程序数据污染上还是很有用处的。我们要努力去习惯用let声明,减少var声明去污染全局空间,在vue的使用中也要注意这点。
const声明常量
在程序开发中,有些变量是希望声明后在业务层就不再发生变化了,简单来说就是从声明开始,这个变量始终不变,就需要用const进行声明。
我们来一段用const声明错误的代码,在错误中学习const的特性也是非常好的。
1
2
3
|
const
a
=
"judy"
;
var
a
=
'JUDY'
;
console
.
log
(
a
)
;
|
在编译这段代码的过程中,你就会发现已经报错,无法编译了,原因就是我们const声明的变量是不可以改变的。const是很好理解的,我就不作过多的解释说明了。
这节课我们学了ES6的3种声明方式,var、let、const,这三种方式各有所长,既然已经学习了新技术,我们就要拥抱它,试着在你的项目中根据情况用let和const进行声明吧,不要再只使用var了。