如题，为什么要用 let 和 const 呢？

在开始这个话题之前，我们先来通过以下的小例子了解一下 JavaScript 中 var 声明及变量提升机制。

image

按照一般逻辑，变量应该在声明语句之后才可以使用，但在上面的代码中，是声明之前输出foo的值，且这个值为undefined，这就说明变量在声明之前就已经存在了。为什么用var会出现这种问题呢？下次我们在讨论。这里就是人们经常说的变量提升，即变量可以在声明之前使用，值为undefined。我们console用let声明的变量bar，报错了，这就表示声明之前，变量bar是不存在的，这里就没有变量提升的现象出现。为了纠正这种现象，让大家更好的理解代码，let命令改变了语法行为，它所使用的变量一定要在声明之后使用，否则就会报错。

1. let 命令

特性：

• 块级声明

• 不存在变量提升

• 不允许重复声明

1.1 块级声明和不存在变量提升

块级声明是指某个变量只在相应的作用域内生效，外部是不可以访问的。let 声明的用法与 var相同，不同的是不存在变量提升，在指定作用域生效。常见的块级作用域:

• 函数内部

  function fn1 () {

    let a = 5

    if (true) {

      let a = 10

    }

    console.log(a)

  }

  // fn1()

  function fn2 () {

    var b = 2

    if (true) {

      var b = 4

    }

    console.log(b)

  }

  // fn2()

• 块中 {}

{

  let a = 10

  var b = 1

}

console.log(a) // ReferenceError: a is not defined

console.log(b) // 1

1.2 不允许重复声明

let 不允许在相同作用域内重复声明同一个变量。

  // 报错：Identifier 'a' has already been declared at Object

  function fn() {

    let a = 10

    var a = 1

  }

  // fn()

  // 报错：Identifier 'a' has already been declared at Object

  function fn1 () {

    let a = 10

    let a = 1

  }

  // fn1()

  // 报错：Identifier 'a' has already been declared at Object

  function fn2 (arg) {

    let arg

  }

  // fn2()

2. const 命令

const 通常声明的是一个只读的常量，一旦声明了，其中的值是不能改变，这就意味着声明的这个常量必须是要赋值的。

// 值不能变

const S = 60

S = 120

// TypeError: Assignment to constant variable.

// 必须赋值

const M

// Missing initializer in const declaration

const 除了值不能变和只读，其他的特性跟 let 是一样的，同样是块级声明、不存在变量提升和不允许重复声明。在这里需要注意一点的是，声明常量的时候要必须确保这个值是固定不变的。

总结

回到问题：为什么要用 let 和 const ？

新语法的出现，不仅使得我们更容易的理解JS，而且减少很多奇奇怪怪的问题出现。块级声明，可以很有效的避免了变量污染这个问题。

想继续学习更多有关前端知识，可以关注我的公众号。大家一起来学习如何快速掉头发

image