var定义变量 和let、const区别在哪?
let和var都是定义可以改变值的变量,而const定义的是不可改变值的常量
const http = "www.baidu.com" //无法更改值
http = 123 // 报错 :赋值给了常数变量
console.log(http)
区别1:let和const新增了块级作用域 {},let和const定义的变量写在{}中,就只会在{}中生效,而var 没有块级作用域,只有全局和局部作用域(定义在函数中)
{
var dd=78;
let a = 10;
const ss = 20;
console.log(a, ss)//10 20
}
console.log(a)//报错 没有找到
// console.log(ss)//报错 没有找到
console.log(dd)//78
深度理解let和const的块级作用域
案例代码:
点击页面中不同的li输出n值比较let和var作用域的区别
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
let lis = document.getElementsByTagName("li")
// for(let n=0;n<lis.length;n++){
// lis[n].onclick=function(){
// console.log(n)//点击第一个li控制台输出0,
//点击第二个li控制台输出1,点击第三个li控制台输出2
// }
// }
/*这里let定义的是在{}中的局部变量,
每一次的循环都会产生新的局部变量n和块级作用域{},
这几个n之间互不干扰,拥有各自的的块级作用域,保存了不同的值
每一个n都被单独保存下来,所以点击不同的li就会输出不同的n值*/
for (var n = 0; n < lis.length; n++) {
lis[n].onclick = function() {
console.log(n)
//不管点击哪一个li,控制台都只会输出3
//因为循环中var定义的是全局变量,n的值在循环中修改,
//覆盖了之前的值,n最后的值为循环结束后的值,n=3
}
}
区别2:var 定义变量 存在变量的默认提升功能 ,let 和const没有
// console.log(x)//undifined
// var x=2
console.log(x)//报错: 在初始化之前无法访问“x”
let x = 2
区别3: var 定义可以重复定义 ,let和const不可以
// var x=2
// var x=3
// console.log(x)//3 var重复定义变量会覆盖之前的值
let x = 2
let x = 3 //报错 x已经声明过
console.log(x)
区别四:var 定义变量 自动挂载 window对象上 。let和const不会
// var x=2 //相当于window.x=2
// console.log(window.x) //2
let x = 2
console.log(window.x) //undefined
区别五:let 存在暂时性死区问题
ES6明确规定,如果区块
中存在let
和const
命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域
。凡是在声明之前
就使用这些变量就会报错
。
总之,在代码块内使用let
命令声明变量之前,该变量都是不可用的。
这在语法上,称为“暂时性死区”
(temporal dead zone,简称 TDZ)。
var a = 20
if (true) {
a = 40 //报错:在初始化之前无法访问“a”
console.log(a)
let a = 50
}