let、const 和 var的概念与区别

1.概念

• let：ES6 新增的命令，用于声明变量
• const：ES6 新增的命令，一般用于声明常量
• var：ES5 的命令，用于声明变量

2.区别

1. 块级作用域
2. 不存在变量提升
3. 暂时性死区
4. 不允许重复声明
5. let、const 声明的全局变量不会挂在顶层对象上面
6. const 命令有两个注意点：
   1. const 声明变量后必须马上赋值，否则会报错
   2. const 声明变量后，基本数据类型不能再更改，引用数据类型（数组，对象等）指针指向的地址不能更改，内部数据可以更改

2.1 块级作用域

在 ES5 中，只有全局作用域和函数作用域，没有块级作用域，会造成如下问题

1. 内部变量可能覆盖外部变量

var temp = 'Hello';
function fn() {
    console.log(temp);
    var temp = 'World';
}
fn(); // undefined

2. 用来计数的循环变量泄漏为全局变量

for(var i = 0; i < 5; i++){
    console.log(i);
}
console.log(i); // 5

2.2 不存在变量提升

在ES5中使用 var 声明变量会出现变量提升的现象；而在ES6中使用 let 声明变量，不存在变量提升

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

2.3 暂时性死区

只要块级作用域中存在 let 命令，它所声明的变量就绑定这个区域，不再受外部的影响，ES6规定，使用 let 或 const 声明的变量，不能在声明之前使用

var tmp = 123; // 声明
if (true) {
    tmp = 'abc'; // 报错 因为本区域有tmp声明变量
    let tmp; // 绑定if这个块级的作用域 不能出现tmp变量
    console.log(tmp);
}

暂时性死区和不能变量提升存在的意义在于：

为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为

2.4 不允许重复声明

let、const 不允许在同一个作用域内，重复声明同一个变量

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

2.5 let、const 声明的全局变量不会挂在顶层对象上面

1. 浏览器环境顶层对象是: window
2. node环境顶层对象是: global
3. var声明的全局变量会挂在顶层对象上面，而 let、const 不会挂在顶层对象上面

var a = 1;
// 如果在 Node环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined

2.6 const 命令

1. const 一旦声明变量，必须立即赋值

let p; var p1; // 不报错
const p2 = '666'
const p3; // 报错 没有赋值

2. const 一旦声明值就不能改变

   1. 基本数据类型，不能修改值

   const p = '不能改变';
   p = '报错'
   

   2. 引用数据类型，变量指针指向的地址不能改变

   const arr = [1,2,3,4,5];
   arr.push(6); // 不报错
   arr = {value: 1}; // 报错