ES6基础-为什么要用let和const

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

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

按照一般逻辑，变量应该在声明语句之后才可以使用，但在上面的代码中，是声明之前输出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，而且减少很多奇奇怪怪的问题出现。块级声明，可以很有效的避免了变量污染这个问题。

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