let 与var
1.let 变量不能重复声明 ,var可以
let c=1;
let c=2;
console.log(c);
以下代码重复对c进行声明并赋值,新的赋值结果覆盖旧的赋值结果,所以c输出2
var c=1;
var c=2;
console.log(c);
2.块级作用域
let定义的变量只在当前块级作用域中生效
<script>
{
let a = 1;
}
console.log(a);
</script>
var定义的变量可以在代码块外访问到
<script>
{
var a = 1;
}
console.log(a);
</script>
3.不存在变量提升
<script>
console.log(b);
let b=2;
</script>
var存在变量提升,有代码如下:
<script>
console.log(b);
var b=2;
</script>
而由于var的变量提升,实际代码的执行顺序如下:
<script>
var b;
console.log(b);
b=2;
</script>
执行结果如下:
4.不影响作用域链
函数f()中输出变量d的值,在函数f()作用域下找d的定义,如果找到了,输出当前作用域下的结果,如果没有找到,则退至上一级作用域查找d的值,以此类推
<script>
{let d=3;
function f(){
console.log(d);
}
}
f();
</script>
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>
.item{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 0 5px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
</div>
<script>
let items=document.getElementsByClassName('item');
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
// this.style.background='red';
items[i].style.background='red';
}
}
</script>
</body>
</html>
用this.style.background='red';切换成功,但是用items[i].style.background='red';不能生效。原因:循环体在按顺序执行,已经执行完毕,此可i=3,所以找不该对象,可以把循环体中的i改为let来声明,i的值只在当前代码块生效,不影响其他代码块。
const
const用于声明常量
声明常量要注意以下几点:
- 一定要赋初值
- 一般常量使用大写(潜规则)
- 常量的值不能修改
- 块级作用域
- 对于数组和对象的元素修改,不算做对常量的修改,不会报错,因为指向的是地址