let 與var
1.let 變量不能重復(fù)聲明 ，var可以
let c=1;
let c=2;
console.log(c);
以下代碼重復(fù)對c進行聲明并賦值，新的賦值結(jié)果覆蓋舊的賦值結(jié)果，所以c輸出2
var c=1;
var c=2;
console.log(c);
2.塊級作用域
let定義的變量只在當(dāng)前塊級作用域中生效
<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的變量提升，實際代碼的執(zhí)行順序如下：
<script>
var b;
console.log(b);
b=2;
</script>
執(zhí)行結(jié)果如下：
4.不影響作用域鏈
函數(shù)f()中輸出變量d的值，在函數(shù)f()作用域下找d的定義，如果找到了，輸出當(dāng)前作用域下的結(jié)果，如果沒有找到，則退至上一級作用域查找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';不能生效。原因：循環(huán)體在按順序執(zhí)行，已經(jīng)執(zhí)行完畢，此可i=3，所以找不該對象，可以把循環(huán)體中的i改為let來聲明，i的值只在當(dāng)前代碼塊生效，不影響其他代碼塊。
const
const用于聲明常量
聲明常量要注意以下幾點：
- 一定要賦初值
- 一般常量使用大寫（潛規(guī)則）
- 常量的值不能修改
- 塊級作用域
- 對于數(shù)組和對象的元素修改，不算做對常量的修改，不會報錯，因為指向的是地址
