Js中var,let,const的区别

一：区别：

1、var声明的变量属于函数作用域，而let和const声明的变量属于块级作用域；（js作用域在上篇文章）

2、var声明的变量存在变量提升，而let和const没有

3、var声明的变量可以重复声明，而在同一块级作用域，let变量不能重新声明，const常量不能修改（对象的属性和方法，数组的内容可以修改）

二：var声明的作用域

1. 使用var声明的变量，这个变量属于当前的函数作用域，如果变量的声明在任何函数外，那么这个变量就属于全局作用域

var a = 1; //此处声明的变量a为全局变量function foo(){var a = 2;//此处声明的变量a为函数foo的局部变量console.log(a);//2}foo();console.log(a);//1

2.如果在声明变量时，省略 var 的话，该变量就会变成全局变量，如全局作用域中存在该变量，就会更新其值

var a = 1; //此处声明的变量a为全局变量function foo(){a = 2;//此处的变量a也是全局变量console.log(a);//2}foo();console.log(a);//2

三：var声明的变量提升

1.var的声明会在js预解析时把var的声明提升到当前作用域的最前面，意思是是指无论 var 出现在一个作用域的哪个位置，这个声明都属于当前的整个作用域，在其中到处都可以访问到。只有变量声明才会提升，对变量赋值并不会提升

console.log(a);//undefinedvar a = 1;

相当于执行以下代码

var a;console.log(a);//undefineda = 1;

四、let声明

1.let 声明的变量具有块作用域的特征。

2.在同一个块级作用域，不能重复声明变量。

function foo(){let a = 1;let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared}

3.let 声明的变量不存在变量提升，换一种说法，就是 let 声明存在暂时性死区（TDZ）。

let a = 1;console.log(a);//1console.log(b);//Uncaught ReferenceError: b is not definedlet b = 2;

（此时变量b的声明不会提升到当前作用域的前面）

五：彻底区分var和let声明变量（作用域区别）

1.var声明

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

（1.此时的var声明的变量i属于函数作用域，声明又不在函数里，所以i属于全局变量

2.此时的定时器函数属于异步函数，隔100毫秒才会执行，而这100毫秒的时间内，for循环已经循环结束，全局变量i已经为10
3.相当于代码执行

    {var i = 0;// 第一次循环{setTimeout(() => {//延时器属于异步函数，不会立即执行，//经过1s后，循环已经结束，全局变量i已经变成10console.log(i);}, 1000)i++}// 第二次循环{setTimeout(() => {//var声明的变量i没有块级作用域，所以可以访问第一次循环体内的变量i，//同样，1s后，循环已经结束，全局变量i已经变成10console.log(i);}, 1000)i++}.....}

最后代码的执行后，会在控制台打印出10个10）

ps:主要的原因是var声明的变量的没有块级作用域

2.let 声明

使用闭包原理解决上例中var声明变量的不具有块级作用域的问题：

    for (var i = 1; i <= 5; i++) {//i=0  第一轮循环(function (i) {// 立即执行函数执行，形成一个私有的函数上下文//形参i是属于立即执行函数的局部变量，第一轮循环时相当于let i=0//由于立即执行函数的参数i被下一级的延时器回调函数上下文所引用，所以会产生闭包，//  从而形成块级作用域，保护了每一次循环的i，也就是闭包的特点：变量私有化setTimeout(() => {// 延时器回调函数执行，也会形成一个私有的函数上下文console.log(i);//由于当前延时器回调函数上下文引用了// 上一级立即执行函数的参数i（立即执行函数的局部变量）,//所以此时会产生闭包，立即执行函数的参数i会一直保存在内存中供延时器回调函数使用}, 5000)})(i)//把每一轮循环全局的i的值作为实参传递给立即执行函数的私有上下文，第一轮传递的是0}

使用let声明的变量具有块级作用域

for (let i = 0; i < 10; i++) {// 每一轮都会形成一个私有的块级作用域，并且有一个私有的变量i，分别存储每一轮循环的索引setTimeout(function(){console.log(i);},100)};

PS:这是因为闭包的机制，但是因为let的块作用域是浏览器底层机制实现的，比我们自己创建的闭包性能要好一些

代码执行后，则该代码运行后，就会在控制台打印出0-9. ）

六：const 声明

1.const 声明方式，除了具有 let 的上述特点外，其还具备一个特点，即 const 定义的变量，一旦定义后，就不能修改，即 const 声明的为常量。

const a = 1;console.log(a);//1a = 2;console.log(a);//Uncaught TypeError: Assignment to constant variable.

2.但是，并不是说 const 声明的变量其内部内容不可变，如：

const obj = {a:1,b:2};console.log(obj.a);//1obj.a = 3;console.log(obj.a);//3

所以准确的说，是 const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。

(我的理解是如果是简单数据类型，const声明的变量保存的值就是变量的值，是不可以修改，但如果是复杂数据类型(对象，数组等）const只是保存的是复杂数据类型的地址，只是确保地址不可变，但地址指向的内容是可以变的)

最后，因为let和const是es6的新特性，let和const的出现就是为了解决var的各种问题，强烈建议大家写js代码都用let和const声明变量和常量！