ES6 - let和const以及let和var的区别

---

一、let

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

1. 语法

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

2. let和var的区别

let和var在for循环的时候, 会有以下不同

var liList = document.querySelectorAll('li') // 共5个li
for( var i=0; i<liList.length; i++){
  liList[i].onclick = function(){
    console.log(i)
  }
}

// 以上代码会打印出 5个5

变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

如果把var改成let, 就会分别打印出 0,1,2,3,4

var liList = document.querySelectorAll('li') // 共5个li
for( let i=0; i<liList.length; i++){
  liList[i].onclick = function(){
    console.log(i)
  }
}

但是为什么把var改为let就会打印正常呢 ?

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。

3. let和var的区别2

• var命令会发生 变量提升 现象

<script>
  console.log(number);  // undefined
  var number = 0;
</script>

• let创建的变量不存在变量提升

<script>
  console.log(number);  // Cannot access 'number' before initialization
  let number = 0;
</script>

4. let不允许重复声明

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

5. 暂时性死区

如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

二、const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

<script>
  const a = 0;
  a = 10;  // Assignment to constant variable.
</script>

const一旦声明变量, 就必须初始化, 不能留到以后赋值

<script>
  const a;  // Missing initializer in const declaration
</script>

const的作用域与let命令相同, 只在声明所在的块级作用域内有效.
const命令声明的常量也不提升