ES6中var、let、const的区别

ES6新增了let和const来声明变量。var、let、const在一起搞得人头昏昏的…今天来细数这三个声明变量方法的“恩怨情仇”

标题

在ES6之前，我们都是用 var 关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升 例如：

  function aa() {
    if(flag) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代码实际上是：

  function aa() {
    var test // 变量提升，函数最顶部
    if(flag) {
        test = 'hello man'
    } else {
        //此处访问 test 值为 undefined
        console.log(test)
    }
    //此处访问 test 值为 undefined
  }

所以不用关心 flag 是否为 true or false。实际上，无论如何 test 都会被创建声明。

接下来ES6主角登场：
我们通常用 let 和 const 来声明，let 表示变量、const 表示常量。let 和 const 都是块级作用域。怎么理解这个块级作用域？

在一个函数内部
在一个代码块内部

说白了，只要在 {}花括号内 的代码块即可以认为 let 和 const 的作用域。

看以下代码：

  function aa() {
    if(flag) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

let 的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说 const

const 声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。

    const name = 'cc'
    name = 'yy' // 再次赋值此时会报错

还有，如果 const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。

看以下例子就非常清楚：

    const student = { name: 'cc' }
    
    student.name = 'yy' // 修改变量成员，一点儿毛病没有
    
    student  = { name: 'yy' } // 修改变量绑定，这样子就会报错了

说说TDZ(暂时性死区)，想必你早有耳闻。

    {
        console.log(value) // 报错
        let value = 'lala'
    }

我们都知道，JS引擎扫描代码时，如果发现变量声明，使用的是 var 声明变量时会将声明的变量提升到函数或全局作用域的顶部。但是 let 或者 const，会将声明的变量关进一个小黑屋也是TDZ（暂时性死区），只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。

哦了，咱们说一道面试题！

  var funcs = []
  for (var i = 0; i < 10; i++) {
    funcs.push(
      function () {
        console.log(i)
      }
    )
  }
  funcs.forEach(function(func) {
    func()
  })

这样的面试题是大家很常见，很多同学一看就知道输出十次10
但是如果我们想依次输出0到9呢？
有两种解决方法，直接看一下代码：

    // ES5知识，我们可以利用“立即调用函数”解决这个问题
    var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(
          (function(value) {
            return function() {
                console.log(value)
            }
        })(i)
      )
    }
    funcs.forEach(function(func) {
        func()
    })

  // 再来看看es6怎么处理的
    const funcs = []
    for (let i = 0; i < 10; i++) {
        funcs.push(() => console.log(i))
    }
    funcs.forEach(func => func())