es6 中let const var 深入理解

背景

开发后台系统 有幸自己可以自如选择前段框架实现前后端分离，。 综合各方面的因素选择了vue.js, 这这个中也使用到现在比较新的js 标准 es6. 有些地方不一样还是总一下。

变量声明const 和 let

一会会讨论const let var之间区别的

在es6 之前 我们都是使用var 申明变量。这样是有缺陷， 缺陷 在比较 const var let 三者不同的时候会比较出来
先来看个概念
变量提升 ： 无论声明在何处， 都会被视为声明在函数的最顶端（不在函数内即在全局作用域的最顶部）。 这就是函数变量提升

先来看下这里面的例子

<script>
  var bool = false;
  function aa() {
    if(bool) {
      var test = 'hello man'
    } else {
      console.log(test)
      console.log(test) // 没有变量提成就会报错的
    }
  }
  aa()
</script>

运行之后的是 undefied
其实是这样的

<script>
  var bool = false;
  function aa() {
    var test // 变量提升
    if(bool) {
      var test = 'hello man'
    } else {
      console.log(test) 这里没有定义值就会说undefined 但是不会报错

    }
  }
  aa()
</script>

当加入到console.log(test2) 的时候就会报错， 这里没有变量提升

红色框是console.log(test) 的结果 不会报错

蓝色错误的是 没有变量提升，根本就没有这个 会报错 并且还是undefined

不用关心bool 是true 还是false.实际上test都会被创建声明
ES6 来解决这个问题
通常使用let 和const 来声明， let表示变量 const 表示常量。let const 都是块级作用域。怎么理解块级作用域呢？
- 在一个函数内部
- 在一个代码块内部

即 {}大括号内的代码块即为let 和 const的作用域

看一下代码

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

let 作用域在他当前的代码块中， 但是不会提升到当前函数的最顶端。

const
被认为是一个常量，他的值被设置完了之后不能再被修改

const name = 'yang'
    name = 'july' //再次赋值此时会报错

还有，如果const 声明的是一个对象， 对象所包含的值是可以被修改的，但是对象所指向的地址没有变化就可以。

 const student = { name: 'cc' }
    // 没毛病
    student.name = 'yy'
    // 如果这样子就会报错了
    student  = { name: 'yy' }

下面是常见的面试题，得搞清楚里面的原理

 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

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

其中的原理：
要 理解这样 的代码 就要深入的理解 var const let 之间的不同啦。 const let 都是作用域块级的。 别处的修改对这一个没有影响的。 使用var 是有影响的。

现在来看看之间的区别：
上面已经讲到那个test test2 之间的问题。 var 变量提升 而 const let 不会的。现在看代码;

  var a = 1;
  let b = 2;
  if (true) {
    var a = 11;
    let b = 22;
    console.log(a); //11
    console.log(b); //22 出了这个块级就没有作用了
  }
  console.log(a);//11
  console.log(b);//2

下面这个例子比较有意思 让你更加的能够理解let

var arr1 =[], arr2 = []
for(var i=0;i<10. i++){
    arr1 [i] = function(){console.log(i)};
}

for (let j=0;j<10;j++){
    arr2[j] = function(){console.log(j)}
}
arr1[6](); //10
arr2[6]();// 6

可以看出let是一个保守的变量， 这里变量为i 的for循环中中 i 是一个全局变量， i的最终结果是10；而let 作为仅仅在其代码块中有效的变量， 当前的仅在本轮中有效， 就是说在每一次循环中， j其实都是新产生的变量， 所有let 变量适合用于循环体中

深入理解let const

var tmp = 1;  
if(true){  
    tmp = 2;   //ReferenceError  
    let tmp;  
} 

第一次看的时候不会出现什么问题， 现在就是考验对let const 的掌握程度了

这个例子tmp=2 会报错
运行报错

Uncaught ReferenceError: tmp is not defined

因为if 中的let 对tmp 变量的声明， 导致tmp 绑定了这个作用域， 而let不会像var 那样 变量提升， 所以未声明赋值会报错。
ES6中明确规定：如果区块中存在let和const命令，则这个区块对这些命令声明的变量从一开始就形成了封闭做作用域，只要在声明之前做任何使用，都会报错。这在语法上称为“暂时性死区”（temporal dead zone ，简称TDZ）。

还有要注意的点：
var 声明的变量为全局变量， 而let const 声明的变量不为全局变量， 使用windows 访问不到。

var a = 100;  
console.log(window.a); //100  
let b = 200;  
console.log(window.b) //undefined 

综上所述总结
现在我基本放弃了var 的使用， 变量使用let 常量使用const 来进行声明

比较好点一篇文章
https://blog.csdn.net/qq_22855325/article/details/72843456