1.let
<!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>
<style>
.page-header {
border-bottom: 1px solid #ddd;
}
.item {
width: 100px;
height: 100px;
border: 1px solid steelblue;
margin-left: 30px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// 声明变量举例:
let a;
let b, c, d;
let e = 300;
let f = 123,
g = "123",
h = [];
// 1.let变量不能重复声明---会报错,var可以重复声明
// 2.let有自己的块级作用域,ES5的作用域(全局,函数,eval(只在严格模式下才生效)),var没有自己的块级作用域
// 3.let不存在变量提升,var声明变量会变量提升,赋一个初始值:undefined
// 4.不影响作用域链
// 实践案例
let items = document.getElementsByClassName("item");
for (let i = 0; i < items.length; i++) {
items[i].onclick = function () {
// this.style.background = "pink"; //第一种写法
items[i].style.background = "pink"; //第二种写法;变量必须使用let声明,否则i会被全局污染,i的值最后就会等于3
};
}
</script>
</body>
</html>
