變量聲明
var、let、const
作用域：變量的作用範圍
- 全局 - 非函數
- 函數 - 函數包含
- 塊作用域 -一對{}包含的範圍
var
- 支持變量聲明預解析
- 不支持塊作用域
- 允許重複聲明
let
- 不支持變量聲明預解析（先聲明後使用）
- 支持塊作用域
- 不允許重複聲明（暫存死區）
const
- 不支持變量聲明預解析（先聲明後使用）
- 支持塊作用域
- 不允許重複聲明（暫存死區）
- 常量（值一旦確定，不允許修改，所以必須初始化）
例子：
{
var a = 1;
let b = 2;
const c = 3;
}
console.log(a);
console.log(b);
console.log(c);
結果爲：
1
Uncaught ReferenceError: b is not defined
Uncaught ReferenceError: c is not defined
故let和const在塊作用域外是無法引用的
html的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
button.active {
background: yellow;
}
p {
display: none;
}
p.active {
display: block;
}
</style>
</head>
<body>
<button class="active">選項一</button>
<button>選項二</button>
<button>選項三</button>
<p>內容一</p>
<p>內容二</p>
<P>內容三</P>
</body>
<script>
var buttons = document.querySelectorAll('button');
var ps = document.querySelectorAll('p');
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
for (let i = 0; i < buttons.length; i++) {
buttons[i].className = '';
ps[i].className = '';
}
this.className = 'active';
ps[i].className = 'active';
}
}
</script>
</html>
效果：
