一文彻底理解var、let、const声明变量的区别

1. 作用域不同

• let、const 是块级作用域，声明的变量只在块级中生效，而var是全局作用域或函数作用域；
• let、const 有更快的执行速度和较小的占用内存空间

  注意： js中代码执行到变量作用域之外后，就会销毁变量，释放变量占用的内存，let、const作用域相较于var要小，这就意味着let、const有更快的执行速度和较小的占用内存空间

2. 能否重复声明变量

• var 可以重复声明一个变量，且不会报错
• let、const 不可重复声明变量 ，编译时就会提示错误。

  注意： var重复可重复声明变量，开发过程中可能会无意覆盖之前的变量，且不好定位到错误原因，这使得在后期代码调试和纠错上，大大的增加了工作难度。let、const 的变量声明机制可避免因变量重复声明而导致的错误。

3. 是否变量提升

• var声明的变量会变量提升，提升到当前作用域的最上层
• let、const 声明的变量无变量提升

  注意： let、const 必须先声明，在使用。var 可先使用后声明，只不过先使用其值是 undefined。

4. 是否挂载全局/顶层对象上

• 使用var声明的变量，默认是挂在顶层的全局对象上，即浏览器的window上
• 而let、const声明的变量挂载到当前的执行作用域下，不会挂载在window上

  注意： window上挂载过多的对象，会过于臃肿，降低浏览器的性能。

5. 声明的变量赋值后是否可以修改

• var、let声明的变量赋值后可任意更改
• const声明的变量是常量，一旦被赋值后，就不能再修改，且声明时必须赋值。

  简单理解：const与let相似，与let的唯一区别是const声明变量时必须赋值，且不可修改为其他值。

兼容性

• let、const 是ES6新增的声明变量的关键字，部分低版本的浏览器可能不支持
• var的兼容性较好，无兼容性问题

  实际项目开发中一般会使用let，const声明变量，为兼容低版本浏览器，可使用babel降级处理为低版本浏览器可执行的代码。