javaScript中var、let、const的区别

     在javascript中有三种声明变量的方式：var、let、const。

1、var

      之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量，也可以省略var，而且在非严格模式下不会报错，但是实际上在严格模式下，两者的使用有没有区别，可能很多人不清楚。

[javascript]  view plain  copy

1. var x = 1;  y = 2;    
2. console.log(x);//1    
3. console.log(y);//2    
4.   
5. console.log(window.x);//1    
6. console.log(window.y);/2  

        简单测试下可以知道定义的x和y都被挂载在window对象上，变为window下的属性，这并不能说明什么。

[javascript]  view plain  copy

1. delete x;    
2. delete y;    
3.   
4. console.log(window.x);//1    
5. console.log(window.y);//undefined  

     接下来，看看执行上面代码之后x属性没有被删除，y被删除了，此时区别就体现出来了。首先我们可以通过Object.getOwnPropertyDescriptor()来获取对象自身某个property的属性信息，这样我们可以进一步分析：

       当不使用var进行定义是，变量默认的configurable为true，可以进行delete等命令进行操作，而当var在定义一个全局变量的时候configurable 变为了false，即不会被delete删除。
       关于对象属性的详细说明看我之前的博文吧：JavaScript之面向对象的属性和特性
       接下来看看下面的代码运行结果，因为var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

[javascript]  view plain  copy

1. var c=1;  
2. console.log(c);// 1   
3. var c=2;  
4. console.log(c); // 2  
5. c=3;  
6. console.log(c); // 3  

       var 声明全局变量，换句话理解就是，声明在for循环中的变量，跳出for循环同样可以使用。

[javascript]  view plain  copy

1. for(var i=0;i<=10;i++){   
2. var sum=0;   
3. sum+=i;   
4. }   
5. console.log(sum);  

       声明在for循环内部的sum，跳出for循环一样可以使用，不会报错正常弹出结果。
  
      另外，说一下变量提升的问题。

[javascript]  view plain  copy

1. console.log(a);//Uncaught ReferenceError: a is not defined    
2. a = 100;    
3.   
4. console.log(b);//undefined    
5. var b = 200;    

       先说第二段代码，var声明的全局变量b在js中会进行代码提升，也就是说var b = 200；会被分解为var b；b=200；代码解析的第时候会将var b；提升到最前面，并且在内存中开辟一个空间，由于b没有被赋值，默认为undefined。第一段代码中当js执行console.log()函数时候由于没有进行var声明，变量没有被提升，不存在内存开辟,所以在console.log()时候直接报错！

2、let
       在ECMAScript6标准中,一个重要的概念就是"JavaScript严格模式",需要在最前面加上"use strict";
       let注意点:

• let拥有块级作用域,一个{}就是一个作用域，也就是let声明块级变量，即局部变量；
• let在其作用域下面不存在变量提升；
• let在其作用域中不能被重复声明(函数作用域和块级作用域)。

     1）let的块级作用域
     注意：以下代码都在严格模式下执行的，必须声明'use strict';后才能使用let声明变量否则浏览并不能显示结果。

[javascript]  view plain  copy

1. let n = 10;    
2. if(true){    
3.     let n = 50;    
4. }    
5. console.log(n);//10    

      表示外层代码块不受内层代码块的影响，如果是用var定义的变量n，那么输出的就是修改后的50。
同样的，在上面的例子中，跳出for循环，再使用sum变量就会报错，有着严格的作用域，变量只作用域当前隶属的代码块，不可重复定义同一个变量，不可在声明之前调用，必须先定义再使用，会报错，循环体中可以用let。

     2）变量提升的问题

[javascript]  view plain  copy

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

     不同var，let不存在变量提升，以上写法会直接报错。

     3）重复声明问题

[javascript]  view plain  copy

1. (function(){    
2.     let test1 = "let";    
3.     var test2 = "var"    
4.         
5.     let test1 = "let changed";//Uncaught SyntaxError: Identifier 'lTest' has already been declared    
6.     var test2 = "var changed";    
7.         
8.     console.log(test1);    
9.     console.log(test2);    
10. })();   

       let在同一个作用域下不允许进行重复变量声明，否则也是直接报错。

3、const

     const用来声明常量，一旦声明，其值就不可以更改，而且必须初始化。如果你非得修改变量的值，js不会报错，只是默默表示失败(不起作用)。

[javascript]  view plain  copy

1. const b = 2;//正确  
2. const b;//Uncaught SyntaxError: Missing initializer in const declaration错误，必须初始化   
3. console.log(b);//有输出值  
4. b = 5;  
5. console.log(b);//Uncaught TypeError: Assignment to constant variable.无法输出   

    const的作用域与let相同，只在声明所在的块级作用域内有效，并且也是和let一样不可以重复进行声明。const是常数变量，即一般在require一个模块的时候用或者定义一些全局常量，一旦定义，无法更改，无法重复赋值。

参考：

1. js变量中有var定义和无var定义的区别,es6中let命令和const命令

2.JavaScript中const、var和let区别浅析

3.js中var、let、const区别