let、const是ES6新增的声明变量的关键字，之前声明变量的关键字是var

var

1、var声明的变量具有函数作用域或全局作用域

2、在同一作用域内允许使用<code>var多次声明同一个变量，这可能会覆盖之前的声明

3、存在变量提升现象，即可以在声明之前使用变量，此时变量的值为undefined

4、可以在声明时不进行初始化，此时变量的值为undefined

let

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

2、let定义的变量不能重复

3、let不存在变量提升

4、let定义的变量如果在{ }中只能在{ }中调用

5、在循环语句中var定义的循环变量和使用let定义的循环变量，执行原理和执行效果不同。

const

1、const声明的变量具有块级作用域，声明常量并且一旦赋值后其值不能再被修改

2、const定义的变量如果在{  }中只能在{  }中调用

3、const 定义的变量存储的数据数值不能改变，也就是const定义的变量，不能重复赋值

4、不存在变量提升

代码演示

（1）let声明的变量提前调用报错

// 提前调用 预解析

console.log( a);

// // 提前调用 结果是报错

console.log( b );

// var 定义的变量

var a = 100 ;

let b = 200 ;

（2）const 和let 定义的变量不能重复

// var 定义的变量

var int1 = 100 ;

let int2 = 200 ;

// 变量名称重复 重复赋值效果

var int1 = '北京' ;

console.log( int1 );

// 变量名称重复 结果是 报错

let int2 = '上海' ;

（3）const 和let 定义的变量 如果在{ } 中只能在 { } 中调用

// 在 {} 中 使用 let 定义变量 只能在 { } 中 使用

// 如果需要在 { } 中 对 let 定义的变量 进行操作

// 提前定义 变量 在 {} 中 进行赋值操作

if( true ){

var a = 300 ;

let b = 400 ;

// let 声明的变量 在 { } 中可以调用

// 对 {} 外定义的变量 进行赋值操作

console.log( b ); // 400

}

console.log( a ) ; //300

// let 声明的变量 在 { } 外 不能调用

console.log( b ); //报错

let和var声明的循环变量的区别

循环变量存储的数据数值

5.1  var声明的循环变量

在整个循环变量过程中只定义了一个循环变量i，每次循环都对这一个循环变量i进行重复赋值，也就是之后的循环变量数值会覆盖之前的循环变量数值，当循环结束后只有一个循环变量i，存储的是最终的循环变量数值。

5.2  let声明的循环变量

在整个循环过程中每次循环都相当于触发执行了一个{   }，每一个{   }对于let定义的变量就是一个独立的作用域，也就是每次循环let声明的循环变量都是一个人独立作用域中的循环变量，每一次循环中循环变量都会存储不同的数据数值，互相之间不会影响，不会覆盖，也就是每次循环let声明的循环变量都相当于是一个独立的变量，不会覆盖之前的数据数值。

代码演示： 

<ul>

<li>我是第一个li</li>

<li>我是第二个li</li>

<li>我是第三个li</li>

<li>我是第四个li</li>

<li>我是第五个li</li>

</ul>

<script>

// 给 li 绑定事件 点击 li标签 弹出 索引下标

// 获取标签对象

const oLis = document.querySelectorAll('ul>li');

// 通过 for循环 给 li标签 绑定事件

for( var i = 0 ; i <= oLis.length -1 ; i++ ){

// i 是 索引下标 oLis[i] 是 li标签对象

oLis[i].addEventListener( 'click' , function(){

// 点击时输出索引下标

console.log( `我是var循环的i ${i}` );

})

}

for( let j = 0 ; j <= oLis.length -1 ; j++ ){

// i 是 索引下标 oLis[i] 是 li标签对象

oLis[j].addEventListener( 'click' , function(){

// 点击时输出索引下标

console.log( `我是let循环的i ${j}` );

})

}

</script>

按顺序点击每一个li后的运行结果：

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

如果本文对你有帮助，记得点个赞哦~