(let var)+for const区别

大家好，我是热狗小舔狗！

今天写一篇关于const let var的博客。大家肯定想这不是蛮简单的嘛，但是我发现了它似乎没那么“肤浅”，但是它把却我搞懵逼了！！！

先来看一下面试题：

for循环var定义

for (var i = 0; i <6; i++) {  
  setTimeout(function() {  
    console.log(i);       
  }, 0);
}
// 6 6 6 6 6 6

for循环let定义

for(let i=0; i<5; i++) {
	setTimeout(function() {  
    console.log(i);       
  }, 0);
}

// 0 1 2 3 4 

这两个的输出结果是完全不一样的，原因下面会细说！

var声明定义

var声明的变量是没有作用域概念的，这就带来很大困扰，以及不合理。

{
	var a = 1;
}
a  // 1

var还存在变量提升

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(a);		
var a = 1;
// 不会报错
// 输出：undefined

// 实际运行过程
var a;
console.log(a);
a = 1;

let声明定义

ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。

{
	let a = 10;
	let b;
}
a // 报错 ReferenceError: a is not defined.
b // unfined.

与上面val声明定义相比，let声明的变量只在它所在的代码块有效。

let声明的变量不存在变量提升

console.log(a);
let a = 1;

// a is not defined

let的暂时性死区

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。

解析面试题

for(let i=0; i<5; i++) {
	setTimeout(function() {  
    console.log(i);       
  }, 0);
}

// 0 1 2 3 4 

相信大家现在一定特迷，我就是呀~害。

JS中的for循环体比较特殊
for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
子继承父，所以当子作用域没有声明的时候，使用的是父作用域的值

for (let i = 0, b = 0; i < 3; i++, b++) {
  let i = 'abc';
  console.log(i);   console.log(b); 
}
// abc  0
// abc	1
// abc	2

let非常适合用于 for循环内部的块级作用域。每次执行都是一个全新的独立的块作用域，用let声明的变量传入到 for循环体的作用域后，不会发生改变，不受外界的影响。

for (var i = 0; i <6; i++) {  
  setTimeout(function() {  	// 同步注册回调函数到 异步的 宏任务队列。
    console.log(i);       // 执行此代码时，同步代码for循环已经执行完成
  }, 0);
}
// 6 6 6 6 6 6

这里，for循环存在一个异步， 异步，异步Time操作。你看，当循环执行到setTimeout时，js会将里面的回调函数放入到异步的宏任务中，在规定的时间去执行。最最最重要的是异步异步！！！虽然，定时任务的执行时间为0秒，但是由于for循环里除了一个定时任务，没有别的代码。则for循环执行完的速度会比第一次执行回调函数打印信息的速度要快的！
当for循环执行最后一次时，(i=5; i<6; i++) i=6。由于，var声明的变量没有作用域的概念，所以都在共享 i 变量。结果显而易见了！

for(let i=0; i<5; i++) {
	setTimeout(function() {  
    console.log(i);       
  }, 0);
}

// 0 1 2 3 4 

如果你理解了上面，let声明的就好解决了。主要原因就是因为作用域了。

const定义变量

最后在将一下下const用法

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.


const a;
// 报错, 必须初始化

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

总结

ES6的let const让js真正拥有了块级作用域，也是向这更安全更规范的路走，虽然加了很多约束，但是都是为了让我们更安全的使用和写代码。

说实话，自己写不是很细。以后我会慢慢修正，如果有错误的话，希望小伙伴多多指出。

推荐一下 阮一峰老师的ES6 比我好多了 哈哈哈哈哈https://es6.ruanyifeng.com/#docs/let