let变量
let变量其实let就是变量声明符 和var的效果是相同的 都是用来声明变量使用的
只不过他们之间有一点区别 let会更加先进一些 主要有三点不同
1.let变量不能重复定义
// let变量不能重复定义
// var num = 200;
// var num = 300;
// console.log(num);
let num = 600;
let num = 800; // 一旦变量重复定义 那么会产生报错
console.log(num);
2.let变量是块作用域
块作用域 这里的块指的是大括号{} 也就是说 在大括号中定义的let变量那么在大括号的外部无法访问
那么可以产生块作用域的语句都有哪些 if for while do…while switch
// 块作用域
{
var name = 'Eric';
var age = 18;
}
console.log(name);
console.log(age);
// let 块作用域
let blacklist = '禁用';
{
console.log(blacklist);
let username = "admin";
let password = "123";
}
// console.log(username);
// console.log(password);
if (true){
let address = "吉林长春";
}
console.log(address);
3.不做变量提升
var变量是存在变量提升的 但是let变量不存在
// 变量提升
// console.log(username);
// var username = "admin";
// let变量
console.log(password);
let password = '123';
4.暂时性死区
// 暂时性死区
let username = "admin";
if (true){
console.log(username); //直接报错 不做变量提升
let username = "root";
}
小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<button>按钮7</button>
<button>按钮8</button>
</body>
</html>
<script>
// var oBtns = document.querySelectorAll('button');
// for (var i = 0; i < oBtns.length;i++){
// oBtns[i].asd = i;
// oBtns[i].onclick = function () {
// alert(this.asd);
// }
// }
var oBtns = document.querySelectorAll('button');
for (let i = 0; i < oBtns.length;i++){
oBtns[i].onclick = function () {
alert(i);
}
}
</script>