var ——ES5 变量声明方式
- 在变量未赋值时，变量值为undefined（为使用声明变量时也为undefined）
- 作用域： var的作用域为方法作用域；只要在方法内定义了，整个方法内的定义变量后的代码都可以使用
let——ES6变量声明方式
- 在变量为声明前直接使用会报错
- 作用域——let为块作用域——通常let比var 范围要小
- let禁止重复声明变量，否则会报错；var可以重复声明
const——ES6变量声明方式
const为常量声明方式；声明变量时必须初始化，在后面出现的代码中不能再修改该常量的值
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动
总结
- var定义的变量，可以预解析提前调用, 结果是undefined，let、const定义的变量不能预解析，提前调用的结果是报错。
- var定义的变量，变量名称可以重复，效果是重复赋值，let、const定义的变量不能重复，否则执行报错。
- var定义的变量作用域是全局/局部作用域。let、const定义的变量如果在{}中只能在{}中调用。
- 在循环语句中var定义的循环变量和使用let定义的循环变量。执行原理和执行效果不同。
- const 定义的变量存储的数据数值不能改变，也就是const定义的变量，不能重复赋值。
代码演示
提前调用
console.log( int1 );// 提前调用 预解析 结果：undefined
console.log( int2 );//报错
console.log( int3 );//报错
var int1 = 100 ;
let int2 = 200 ;
const int3 = 100;
// var定义的变量，可以预解析提前调用, 结果是undefined，let、const定义的变量不能预解析，提前调用的结果是报错。
变量名重复
var int1 = 100 ;
let int2 = 200 ;//报错
const int3 = 200;//报错
// var变量名称重复 重复赋值效果
var int1 = '北京' ;
console.log( int1 );//北京
// 变量名称重复 结果是报错
let int2 = '上海' ;//报错
const int3 = 400;//报错
//var定义的变量，变量名称可以重复，效果是重复赋值，let、const定义的变量不能重复，否则报错
const与 let定义的变量如果在{}中只能在{}中调用
if( true ){
var a = 300 ;
let b = 400 ;
console.log( b );//400
}
console.log( a ) ; //300
// let 声明的变量 在 { } 外 不能调用
console.log( b );//b is not defined
//var定义的变量作用域是全局/局部作用域。let、const定义的变量如果在{}中只能在{}中调用。
const 定义的变量 不能重复赋值
const c = 100 ;
c = 200 ;//执行报错
const arr = [1,2,3,4,5] ;
// 只是修改引用数据类型中,数据单元存储的数据
// 没有修改 arr变量中 存储的引用数据类型的内存地址
arr[0] = '北京' ;
console.log( arr );//[ "北京", 2, 3, 4, 5 ]
//本质是const定义的变量，内存指向不能改变
//const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动
循环中let和var声明的循环变量的区别
事件的绑定
通过for循环给标签绑定事件，一打开执行界面，事件绑定就结束了，也就是循环已经结束了，也就是说触发事件时循环已经结束了。
循环变量存储的数据数值
var声明的循环变量
在整个循环变量过程中只定义了一个循环变量 i，每次循环都对这一个循环变量 i 进行重复赋值，也就是之后的循环变量数值会覆盖之前的循环变量数值，当循环结束后只有一个循环变量i，存储的是最终的循环变量数值。
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++ ){
oLis[i].addEventListener( 'click' , function(){
console.log( `我是var循环的i ${
i}` );
})
}
for( let j = 0 ; j <= oLis.length -1 ; j++ ){
oLis[j].addEventListener( 'click' , function(){
console.log( `我是let循环的i ${
j}` );
})
}
</script>
//结果
//点击第一个li 我是var循环的i 5
//点击第一个li 我是let循环的i 0
//点击第二个li 我是var循环的i 5
//点击第二个li 我是let循环的i 1
//点击第三个li 我是var循环的i 5
//点击第三个li 我是let循环的i 2
我是var循环的i 5
我是let循环的i 3
我是var循环的i 5
我是let循环的i 4