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的變量提升,實際代碼的執(zhí)行順序如下:
<script>
var b;
console.log(b);
b=2;
</script>
執(zhí)行結果如下:
4.不影響作用域鏈
函數(shù)f()中輸出變量d的值蜕窿,在函數(shù)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';不能生效。原因:循環(huán)體在按順序執(zhí)行畔咧,已經執(zhí)行完畢茎芭,此可i=3,所以找不該對象誓沸,可以把循環(huán)體中的i改為let來聲明梅桩,i的值只在當前代碼塊生效,不影響其他代碼塊拜隧。
const
const用于聲明常量
聲明常量要注意以下幾點:
- 一定要賦初值
- 一般常量使用大寫(潛規(guī)則)
- 常量的值不能修改
- 塊級作用域
- 對于數(shù)組和對象的元素修改宿百,不算做對常量的修改,不會報錯洪添,因為指向的是地址