51工具盒子变量声明
var 老的（逐渐淘汰）
let （推荐）
const 常量
var存在的问题：
1.允许变量重复声明
2.不限制修改
3.不支持块级作用域 -- 函数级
let const 的优点：
1.不允许变量重复声明
2.const可以限制修改
3.支持块级作用域 -- {}
块级作用域好处：
1.不容易重名
2.每个代码块都有自己的变量副本(这点对普通的if之类的影响不大，但对循环里影响特别大)
for循环里用var声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button type="button">aaa</button>
<button type="button">bbb</button>
<button type="button">ccc</button>
<script>
let aBtn = document.querySelectorAll('button');
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
alert(i);
}
}
</script>
<!--
{
var i=0;
aBtn[i].onclick = function() {
alert(i); // 3
};
}
{
var i=1;
aBtn[i].onclick = function() {
alert(i); // 3
};
}
{
var i=2;
aBtn[i].onclick = function() {
alert(i); // 3
};
}
在这个循环里i 只有一个
因为var是不带块级作用域的，所以就只有一个副本
换句话说就是在循环过程中i都是同一个,如果其中一个变了，其他的都会变，跟着受影响
-->
</body>
</html>
for循环里用let声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button type="button">aaa</button>
<button type="button">bbb</button>
<button type="button">ccc</button>
<script>
let aBtn = document.querySelectorAll('button');
for (let i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
alert(i);
}
}
</script>
<!--
{
let i=0;
aBtn[i].onclick = function() {
alert(i); // 0
};
}
{
let i=1;
aBtn[i].onclick = function() {
alert(i); // 1
};
}
{
let i=2;
aBtn[i].onclick = function() {
alert(i); // 2
};
}
let就不一样了，它是一个块级作用域，每个代码块都有自己的变量副本。for也是一个代码块，for本身也在这个代码块当中
在这个循环里i 一共有三个，且这些i都是完全互相不打扰的，任何一个i变了,其他的不会跟着变
-->
</body>
</html>
变量作用域（scope）
全局
在所有函数之外声明的 -- 可以在任何地方使用 （不推荐）
全局变量在任何地方都可以使用，之所以非常危险，是因为任何人都可以修改，也容易重名
let a=12;
function show(){
alert(a);
}
show();
console.log(a);
局部
声明在函数内的变量叫做'局部变量' -- 只能在函数内部使用
function show(){
let a=12;
alert(a);
};
show();
//报错
console.log(a);
// Uncaught ReferenceError: a is not defined
块级
if{} for{} function{} ...都是块级作用域
类似局部作用域，只不过在一定程度上分的更细了
