js中的变量声明（var、let、const的区别和解析）

Js中的变量声明

在es6之前声明变量使用var关键字，无论声明位置在何处，都会把声明提升到当前作用域的顶部。如：

function myVar(flag) {
  	console.log(value); // undefined
  	if (flag) {
  		var value = '22';
    	console.log(value); // 22
  	} else {
    	console.log(value); // 当flag为false时也可以访问变量值为 undefined
  	}
  	console.log(value); // 22
}
myVar(1);

在es6中引入了let和const块级声明 ，块级声明也就是让所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建:

1. 在一个函数内部
2. 在一个代码块(由一对花括号包裹)内部

let声明

let 声明的语法与 var 的语法一致 ,主要的区别就是let声明的变量不会自动的提升到当前作用域的顶部（在声明之前访问会报错），并且会形成块级作用域，在外部作用域无法访问当前变量。如：

function myVar(flag) {
 	console.log(value); // 报错value is not defined
	if (flag) {
	    console.log(value); // 报错value is not defined
	    let value = '22';
	    console.log(value); // 22
	} else {
	    console.log(value); // 当flag为false时报错value is not defined
	}
	console.log(value); // 报错value is not defined
}
myVar(1);

此外除了上述区别外，在同一作用于下let声明的变量还会禁止重复声明，否则将会报错。如：

var num = 1;
let num = 3; // 语法错误
console.log(num);

const声明

const声明和上述let声明的作用相同，除此之外两者的区别之处是使用 const 声明的变量会被认为是常量不能进行改变。如：

const maxItems = 5;
maxItems = 6;  // 报错

并且在声明的时候就必须初始化。如：

const maxItems = 30;  // 有效的常量

const name;  // 语法错误:未进行初始化 

最后需要注意的是const声明对象只会阻止变量与对象的绑定，并不会阻止对象内部属性的修改。如：

 const person = {
     name: "Nicholas"
}; 

person.name = "Greg";  // 工作正常 

person = {  // 抛出错误 
     name: "Greg"
};

循环中的块级绑定

如在for循环中的应用，使用var和let声明的对比。如：

for (var i = 0; i < 10; i++) {
 	setTimeout( () => {
    	console.log(i); // 打印10次10 
  	})
}

for (let i = 0; i < 10; i++) {
 	setTimeout( () => {
    	console.log(i); // 打印从0 到 9
  	})
}