var和const和let的区别

简述：

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/let：声明变量，声明的是局部变量

用途及区别：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

再比较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:UsersAdministratornode_modulesbabel-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 的修改值时报错，以及重复声明报错怎么实现的呢？
// 其实就是在编译的时候直接给你报错