ES6里let、const、var区别总结

 首先了解下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只有函数作用域,没有块级作用域。

  在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定义的常量只要是引用类型数据,改变这个引用类型数据的结构或属性,都是允许的。引用类型包括哪些呢?数组和对象。

2、用const定义常量必须赋值。不赋值的话,没有任何意思,所以报错。

const CC
// 报错:Missing initializer in const declaration
posted @ 2020-05-07 23:08  菲比月  阅读(1366)  评论(0编辑  收藏  举报