var和const和let的区别

主题大纲：ES6 系列之 let 和 const

简述：

1.前端的变量申明,可以用到var,ES6的const(衡量)/let(变量) 

2.在ES5用的都是var,到ES6之后,也就是2015年开始出现const/let.

var 不会报错，有声明提升，会显示undefined（一个变量未初始化）；

     function show(falg){
 //     var a;//**声明提升，初始化为undefined,函数体（作用域）的最前排
        console.log(a);//undefined
        if(falg){
            var a ="111";
            console.log(a); //111
        }else{
            console.log(a);//undefined
        }
        
    }
    show(true);
    show(false);
    var a = "123";
    var a = "456";//覆盖，同名，let不会，要报错Identifier 'a' has already been declared(已被声明)。
    console.log(a);

const/let访问范围

    function show(falg){                          // JavaScript引擎在扫描代码发现变量               TDZ暂时性死区(有let申明)
    console.log(a);//报错: a is not defined              //a                              放入（未申明引用报错）       
        if(falg){//在第134行和第137行的大括号之间，
            let a="111";
            console.log(a); // 111                      //a                               移除（已申明引用移除）
        }else{
            console.log(a);//报错: a is not defined     //a                               放入（未申明引用报错）
        }
        
    }
    show(true);
    show(false);

const/let不同作用于可同名，同一作用于不可同名；

    function show(falg){
            let a="222";
//          let a="333";//Identifier 'a' has already been declared
    console.log(a);// 222
        if(falg){
            let a="111";
            console.log(a); // 111
        }else{
            console.log(a);// a is not defined
        }
        
    }
    show(true);
//    show(false);

二.var 和 const/let 的区别

1.const/letlet：声明变量，声明的是局部变量

用途及区别：ES6新增了let命令，用来声明变量，类似于var ，但是声明的变量只在let所在的代码块的内部有效

let不存在变量提升，这个要注意哟

暂时性的死区(Temporal Dead Zone)，简写为 TDZ：

只要块级作用域里存在let命令，它所声明的变量就绑定这个区域，不在受外部的影响

let 和 const 声明的变量不会被提升到作用域顶部，如果在声明之前访问这些变量，会导致报错：

console.log(typeof value); // Uncaught ReferenceError: value is not defined
let value = 1;

复制代码这是因为 JavaScript 引擎在扫描代码发现变量声明时，要么将它们提升到作用域顶部(遇到 var 声明)，要么将声明放在 TDZ 中(遇到 let 和 const 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后，变量才会从 TDZ 中移出，然后方可访问。

不允许重复声明

内部的数据有了let声明过之后不允许重复声明

for循环的处理

var funcs = [];
for (var i = 0; i < 3; i++) {
//for (let i = 0; i < 3; i++) {
    console.log(i);
  funcs[i] = (function(i){
      return function() {
          console.log(i);
      }
  }(i))
}
funcs[0](); // let输出的结果是0；var输出的结果是3

for (var i = 0; i < 3; i++) {
     var c = "123";//一次123
//   let c = "123";//三次123

     console.log(c);
}

使用let

var funcs = [];
for (let i = 0; i < 3; i++) {
  funcs[i] = function () {
      console.log(i);
  };
}
funcs[0](); // 0
funcs[1](); // 1
funcs[2](); // 2

分解：

(let i = 0) {
  funcs[0] = function() {
      console.log(i)
  };
}

(let i = 1) {
  funcs[1] = function() {
      console.log(i)
  };
}

(let i = 2) {
  funcs[2] = function() {
      console.log(i)
  };
};

let value = 1;
console.log(window.value); //undefined

ES6的const和let的区别:

1.const定义衡量:
不可以重新赋值,但是可以给对象的属相重新赋值.

const data = {
  value: 1
}
// 没有问题
data.value = 2;
data.num = 3;
 报错
data = {}; // X   Uncaught TypeError: Assignment to constant variable.（分配恒定的变量）

优点:const 意味着该标识符不能被重新赋值。
让它在代码中的使用尽可能的清晰。使用一个变量对应代表一个东西.

2.let 在定义后可能还会修改,可变,越来越多的被使用在循环和算法上面。

ES6兼容性问题?bable转义成ES5,用例:

需要安装 ES5的bable: npm install babel-core@5

C:\Users\Administrator\node_modules\babel-core

目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)
我们把browser.min.js引入（文件位置的路径要确保正确）。并且设置第二个script标签的type为”text/babel”。

babel转义具体实现：

if (false) {
  let a = 1;
//  var a=1;//如果直接将let改成var，直接编译成 var，打印的结果肯定是 undefined
  var _a = 1;//然而 Babel 很聪明，它编译成了内层变量名不一致
}
console.log(a); // Uncaught ReferenceError: a is not defined

// const 的修改值时报错，以及重复声明报错怎么实现的呢？
// 其实就是在编译的时候直接给你报错