ES6 中 let 和 const 是新的声明变量的方式

let 与 var 的一些用法区别

块级作用域

let a = 10;     

这一句是 ES6中 代替 var a = 10; 的语法，这个语法和 var 有啥区别呢？？我们看下面的一个示例代码。

if (true){
var a =10;
}
console.log(a);       

上面和下面的两个语法上有什么区别

if (true){
var let =10;
}
console.log(a);        

可以看出当使用 let 的时候报错了。原因是 var 不具备块级作用域，可以找到 a。而 let 是具备块级作用域的，所以找不到 a。这样就可以提高语言的严谨性，有了更大的应用的场合。
看下面的一个例子。
有这样的一段代码
HTML 代码

<div>
<ul>
    <input type="button" value="0" />
    <input type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />   
</ul>           
</div>
<div id="xo">
    <p>这里是 i = </p>
</div>  

JS 代码

window.onload = function () {
    var X = document.getElementsByTagName('input');
    for (let i=0;i<X.length;i++){
        X[i].onclick = function(){
            var XO = document.getElementById('xo'); 
            XO.innerHTML = XO.innerHTML + '<br>'+i; 
        };
    }
}     

当我们点击 0 1 2 3 的按钮的时候，下面的框里会显示出 i 的值。这里 我们用的是 for (let i=0;i<X.length;i++) 中的 let 打印出来就是

而我们把 for (let i=0;i<X.length;i++) 中的 let 换成 var 的时候就是这样的情况

显示的都是 i=4 说明用 var 的情况下我们点击 0 1 2 3 按钮的时候for (var i=0;i<X.length;i++) 这个循环已经结束了，而 var 不具备块级作用域，所以最后输出的还是 4 。而 let 有作用域，在输出的时候就是就算在 for 循环的块内执行完了外部无法调用。只能就是按照它的顺序执行。这个我们可以给他做一个 console.log(i) 这样就很明显了。代码如下
HTML 代码

<div>
<ul>
    <input type="button" value="0" />
    <input type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />   
</ul>           
</div>
<div id="xo">
    <p>这里是 i = </p>
</div>  

JS 代码

window.onload = function () {
    var X = document.getElementsByTagName('input');
    for (let i=0;i<X.length;i++){
        console.log(i);
        X[i].onclick = function(){
            var XO = document.getElementById('xo'); 
            XO.innerHTML = XO.innerHTML + '<br>'+i; 
        };
    }
}        

那么换是 let 的时候看下图；

可以看出两个是一样的。

重复定义同一个变量

JS代码

var a = 10;
var a = 20 ;
var XO = document.getElementById('xo'); 
XO.innerHTML = a ;         

然后打印出 a 的值要注意这时候 var 是不报错的注意看红色的框框，是监听的时间。

最后打印出了 20 ；也就是 20 覆盖了 10；
那么我们再用 let 试一下。

这样大大的提高了 JavaScript 语言的严谨性。

全局下并没有成为 window 的属性

因为 window. 这是我们 JS 的最顶层。我们有这样一段代码，那就是

var a = 10;     
console.log(window.a)    

而是 let 的时候就是这样的

const 命令

const 是用来定义常量的基本语法和 let 差不多，let 有的他也有。const 也是有一些自己的特殊要求。有三点

1. 必须定义初始值。
   比如这样的代码：
   const NUM = 20;
   如果写 const NUM ; //这样就是报错了
   而 var NUM; 是不会报错的，会返回一个 undefine

2. 一般常量规范命名需要大写。这是大家遵守的一个不成文的规定吧。

3. 不可变的是地址，但是常量本身是可以变的。
   这句话的意思是变量的地址你不能改，内容却可以改的，具体我们看下面的例子。

   const OBJ = {name:'咸菜',age:'27'};
   console.log(OBJ);
   //OBJ = {};//改变对象本身，这样是不行的会报错
   OBJ.name = '油条';
   console.log(OBJ);
   红框就是修改了对象自身以后报错的内容。

当修改了对象里面的内容以后，是不会报错的红框是修改前，蓝框是修改后

const OBJ = {name:'咸菜',age:'27'};
console.log(OBJ);   
//OBJ = {};//改变对象本身，这样是不行的会报错    
OBJ.name = '油条';
console.log(OBJ);      
OBJ = {name:'油条',age:'26'};//报错
console.log(OBJ);              

当 const 一个对象以后，对象的地址是不能做修改的，比如上面的代码中的 OBJ = {name:'油条',age:'26'};//报错 虽然结构是一样的但是他的地址是被修改了的。所以就报错了。
对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址。const 命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。

const xo = {};
xo.prop = 123;

xo.prop
// 123

xo = {}; // TypeError: "xo" is read-only       

上面代码中，常量 xo 储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把 xo 指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。