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{} ...都是块级作用域
类似局部作用域，只不过在一定程度上分的更细了
