首先了解下let与var的区别,主要有以下3点:
1、var在js中是支持预解析的,而let不支持预解析,也就是变量提升的区别
console.log(a)
var a = 22;
// 打印undefined
console.log(b)
let b = 22
// 报错:b is not defined
2、var可以重复定义同一个变量,但是let不可以
var a = 100;
var a = 200;
console.log(a)
// 200
let a = 100;
let a = 200;
console.log(a)
// 报错:Identifier 'a' has already been declared
3、let可以形成块级作用域,在es6之前js只有var函数作用域,没有块级作用域。
在es6之前我们是怎么实现块级作用域的呢?有朋友已经猜到了,立即执行函数表达式,简称IIFF。
(function () {
var aa = 200
})()
console.log(aa)
// 报错:aa is not defined
可以看到通过一个立即执行函数表达式,我们实现了一个局部作用域或者块级作用域,但是有了let之后就不需要写这样的代码了,只需要一个大括号内即实现块级作用域。
{
let bb = 200
}
console.log(bb)
// 报错:bb is not defined
4、var定义的全局变量会挂载到window对象上,使用window可以访问,let定义的全局变量则不会挂载到window对象上
var f = 200;
window.f
// 200
let g = 200;
window.g
// undefined
下面谈一下const的区别,以上四点完全适用const,但是const与let或是var还有两点不同
1、const是用来定义常量的,常量定义之后是不允许改变的。
const AA = 200;
AA = 100;
// 报错:Assignment to constant variable.
错误提示为:Uncaught TypeError: Assignment to constant variable.意思是常量已经赋值了。
这里有一个小坑,看如下代码:
const BB = {}
BB.a = 200
console.log(BB)
结果打印:{a:200},没有报错,并且赋值成功。
为什么 ?因为BB的值并没有改变,依然指向刚开始赋值的那个对象,并没有重新赋值,如果将BB重新赋值,就会报错了,大家可以试试。其实就是引用变量与普通变量的区别。
所以用const定义的常量只要是引用类型数据,改变这个引用类型数据的结构或属性,都是允许的。引用类型包括哪些呢?数组和对象。
如果你想让我们的变量真正的不可变的话,可以使用 Object.freeze()
, 它可以让你的对象保持不可变。不幸的是,他仅仅是浅不可变,如果你对象里嵌套着对象的话,它依然是可变的。
关于这个可以查看我之前的博文:JavaScript 中的不可变对象(Immutable Objects)
const A = {
b: {
c: 1
}
}
Object.freeze(A)
A.b = 10 // 不会变,
console.log(A); // {b:{c:1}}
console.log(A.b); // {c: 1}
A.b.c = 10; // ok
console.log(A.b.c); // 10
2、用const定义常量必须赋值。不赋值的话,没有任何意思,所以报错。
const CC
// 报错:Missing initializer in const declaration
意思是缺少初识值。
以上便是let、const 和var各自的区别。