var 关键字简介
在 JavaScript 中，var 关键字用于声明变量。在 ES6 之前，只有 var 关键字用于声明变量。ES6 引入了 let 和 const 关键字作为声明变量的更好方式。建议使用 let 而不是 var 来声明变量。如果你的目标是旧版本的浏览器，可以使用 var。
在 JavaScript 中，变量是数据存储容器。你可以使用变量来存储任何类型的数据，例如字符串、数字、布尔值、对象等。
使用 var 关键字声明的变量具有函数作用域，而使用 let 关键字声明的变量则具有块作用域。
语法
遵循以下语法来使用 var 关键字定义变量：
var 标识符;
var 标识符 = 值;
在这里，标识符可以是一个有效的变量名。在《JavaScript 变量》章节中，我们已经讨论了定义有效标识符的规则。
在声明变量时，你可以赋予或不赋予一个值。
示例
在下面的代码中，我们使用 var 关键字定义了 3 个变量。在 num1 变量中，我们存储了一个数值；在 str1 变量中，我们存储了一个字符串值；在 bool 变量中，我们存储了一个布尔值。
<html>
<body>
<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>
<script>
var num1 = 30;
var str1 = "Hello World!";
var bool = true;
document.getElementById('output1').innerHTML = num1;
document.getElementById('output2').innerHTML = str1;
document.getElementById('output3').innerHTML = bool;
</script>
</body>
</html>
输出
30
Hello World!
true
JavaScript 变量的作用域
使用 var 关键字定义的变量具有函数作用域或全局作用域。
JavaScript 函数作用域
当你在函数内部使用 var 关键字定义变量时，可以在函数内的任何地方访问该变量。即使你在函数内某个特定块内定义变量，也可以在函数内的任何地方访问它。
让我们通过下面的例子来理解函数作用域。
示例
在下面的代码中，我们在函数内部定义了变量 x。我们还在函数内部的一个块内定义了变量 y。
之后，我们在函数内部访问变量 x 和 y。
<html>
<body>
<div id="demo1"></div>
<div id="demo2"></div>
<script>
function demo() {
var x = 10;
{
var y = 20;
}
document.getElementById('demo1').innerHTML = "X == " + x;
document.getElementById('demo2').innerHTML = "Y == " + y;
}
demo();
</script>
</body>
</html>
输出
X == 10
Y == 20
如果你在函数内部的一个块内使用 let 关键字定义变量，并试图在块外访问它，将会抛出错误。
JavaScript 全局作用域
如果你在函数或特定块之外使用 var 关键字定义变量，它将成为全局变量。
之后，你可以使用 window 对象在代码中的任何地方访问该变量。
示例
我们在下面的代码中定义了一个全局变量 num1。
之后，我们在函数内部使用和不使用 window 对象来访问 num1 变量。
<html>
<body>
<div id="output"></div>
<script>
const output = document.getElementById('output');
var num1 = 10;
function sum(num2) {
output.innerHTML += "num1 + num2 = " + (num1 + num2) + "<br>";
output.innerHTML += "window.num1 + num2 = " + (window.num1 + num2);
}
sum(20);
</script>
</body>
</html>
输出
num1 + num2 = 30
window.num1 + num2 = 30
JavaScript 变量的提升（Hoisting）
使用 var 关键字定义的变量会被提升到其作用域的顶部。这意味着 JavaScript 会在其作用域的顶部添加变量声明。
因此，你可以在变量声明之前访问该变量。
示例
在下面的代码中，我们在声明变量 a 之前初始化了它，并打印了它的值。
由于使用 var 关键字定义的变量被提升到了其作用域的顶部，代码没有报错。
<html>
<body>
<div id="output">Value of the variable a is: </div>
<script>
function checkHoisting() {
a = 98;
document.getElementById('output').innerHTML += a;
var a;
}
checkHoisting();
</script>
</body>
</html>
输出
Value of the variable a is: 98
上面的 JavaScript 代码类似于下面的代码：
var a;
a = 98;
document.getElementById('output').innerHTML += a;
使用 var 关键字重新声明变量
你可以使用 var 关键字重新声明变量，代码将无错误地运行。
如果你用最新的值初始化了最后一个重复的变量，它将包含该值。但是，如果你没有初始化最后一个重复的变量，变量将保留其先前的值，不会丢失。
示例
在下面的代码中，我们两次定义了变量 a 并用不同的值初始化它。在输出中你可以看到变量 a 包含的是最后的值。
我们第三次定义了变量 a 但没有初始化它。因此，它包含了第二个 a 变量的值。
<html>
<body>
<div id="demo"></div>
<script>
const output = document.getElementById('demo');
var a = 10;
var a = 20;
output.innerHTML += "The value of the a is: " + a + "<br>";
var a;
output.innerHTML += "The value of the a is: " + a;
</script>
</body>
</html>
输出
The value of the a is: 20
The value of the a is: 20
如果你在不同的作用域中定义重复的变量，可以根据你访问变量的位置有不同的值。
示例
在下面的代码中，我们在函数外部和内部都定义了 num 变量。当你在函数内部或外部访问它时，它打印出不同的值。
<html>
<body>
<div id="demo"></div>
<script>
const output = document.getElementById('demo');
var num = 10;
function printNum() {
var num = 20;
output.innerHTML += "Num inside the function is: " + num + "<br>";
}
printNum();
output.innerHTML += "Num outside the function is: " + num + "<br>";
</script>
</body>
</html>
输出
Num inside the function is: 20
Num outside the function is: 10
在单个语句中声明多个变量
如果你想使用 JavaScript 的 var 关键字声明多个变量，可以在一个语句中声明所有变量。这样可以使代码更具可读性。
示例
在下面的代码中，我们在单个语句中声明了变量 a 和 b，并在声明后用不同的值初始化它们。
<html>
<body>
<div id="output1"></div>
<div id="output2"></div>
<script>
var a, b;
a = 70;
b = 80;
document.getElementById('output1').innerHTML = "The value of a is: " + a;
document.getElementById('output2').innerHTML = "The value of b is: " + b;
</script>
</body>
</html>
输出
The value of a is: 70
The value of b is: 80
当然，你也可以在单个语句中声明多个变量的同时赋值给这些变量。
在循环中使用 var 关键字
当你使用 JavaScript 的 var 关键字定义 for 循环的迭代变量时，也可以在 for 循环之外访问该变量。
示例
在下面的代码中，我们在 for 循环内定义了变量 p。我们在循环内外都访问了变量 p。
<html>
<body>
<div id="output"></div>
<script>
const output = document.getElementById('output');
for (var p = 0; p < 5; p++) {
output.innerHTML += "The value of p is: " + p + "<br>";
}
output.innerHTML += "The value of p outside the loop is: " + p;
</script>
</body>
</html>
输出
The value of p is: 0
The value of p is: 1
The value of p is: 2
The value of p is: 3
The value of p is: 4
The value of p outside the loop is: 5
解构赋值声明
在 JavaScript 中，你可以在解构数组或对象时使用 var 关键字声明变量。
示例
在下面的代码中，arr 数组包含 3 个变量。
之后，我们使用 var 关键字定义变量并解构数组。
<html>
<body>
<div id="output"></div>
<script>
const output = document.getElementById('output');
var arr = [4, 5, 6];
var [a, b, c] = arr;
output.innerHTML = "a = " + a + ", b = " + b + ", c = " + c;
</script>
</body>
</html>
输出
a = 4, b = 5, c = 6
你也可以使用 var 关键字定义变量并存储对象或函数表达式。