let与var的区别
程序员文章站
2022-12-21 14:27:17
1.let作用域局限于当前代码块 代码1： let作用域仅限于当前代码块，而var的作用域是全局的 2.let作用域不会被提升 代码2： let作用域不会被提升，而var作用域会被提升 代码2相当于： 3.let不能被重复定义 代码3： 上面这段代码运行会报错：Identifier 'str2' h ......
1.let作用域局限于当前代码块
文章中//后面的均为打印结果
代码1：
{
var str1 = "小花";
let str2 = "小明";
console.log(str1); //小花
console.log(str2); //小明
}
console.log(str1); //小花
console.log(str2); //error:str2 is not defined
let作用域仅限于当前代码块，而var的作用域是全局的
2.let作用域不会被提升
代码2：
{
console.log(str1); //undedined
console.log(str2); //str2 is not defined
var str1 = "小花";
let str2 = "小明";
}
let作用域不会被提升，而var作用域会被提升
代码2相当于：
{
var str1;
console.log(str1); //undedined
console.log(str2); //str2 is not defined
str1 = "小花";
let str2 = "小明";
}
3.let不能被重复定义
代码3：
var str1 = "小花1";
var str1 = "小花2";
let str2 = "小明1";
let str2 = "小明2";
上面这段代码运行会报错：identifier 'str2' has already been declared
var重复定义后面的会覆盖前面的，而let则不行，会报语法错误，str2标识符已经被声明
4.let父子作用域
代码4：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>learn</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.queryselectorall('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
alert('点击第'+i+'个按钮')
}
}
</script>
</body>
</html>
此时不管点击哪个都是弹出点击第5个按钮，因为此时在点击的事件触发的时候，for循环已经走完了，而此时的i的值为5，此时i变成全局的了，所以不管点击哪个都会弹出点击第5个按钮。
代码5：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>learn</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
let btns = document.queryselectorall('button')
for(let i=0;i<btns.length;i++){
btns[i].onclick = function(){
alert('点击第'+i+'按钮')
}
}
</script>
</body>
</html>
将上面代码的var改成let，点击的时候就会依次弹出对应的i的值，因为此时let定义的变量i的生命周期到for循环最后的大括号就结束了，所以alert中的i和btns[i]中的i对应的就是每次循环的值。
以上四点就是let与var的区别，如果有问题可以在评论里提哦。