JavaScript 中的 var 关键字用于声明变量。在 ES6 之前，只有 var 关键字来声明变量。在 ES6 中，引入了 let 和 const 关键字作为声明变量的更好方法。建议使用 let 而不是 var 来声明变量。如果您以旧版本的浏览器为目标，则可以使用 var.
在 JavaScript 中，变量是数据存储容器。您可以使用变量来存储任何类型的数据。例如，string、number、boolean、object 等。
使用 var 关键字声明的变量具有函数范围。而使用 let 声明的变量具有块范围。
语法
按照下面的语法使用 'var' 关键字定义变量。
var identifier;
var identifier = value;
此处，标识符可以是有效的变量名称。在 JavaScript - 变量 章节中，我们已经讨论了定义有效标识符的规则。
在使用 JavaScript 'var' 关键字声明变量时，您可以为变量赋值或不赋值。
例在下面的代码中，我们使用 '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>
输出
Hello World!
true
JavaScript 变量范围
使用 JavaScript 'var' 关键字定义的变量的范围具有函数范围或全局范围。
JavaScript 函数范围
当您使用 var 关键字在函数内定义变量时，可以在函数内的任何位置访问该变量。即使你在函数内的特定块中使用 var 关键字定义变量，它也可以在任何地方访问。
让我们通过下面的示例来了解函数范围。
例在下面的代码中，我们在函数中定义了变量 'x'。我们还在块内定义了变量 'y'，它位于函数内部。
之后，我们访问函数内部的变量 x 和 y。
<html>
<body>
<div id = "demo1"> </div>
<div id = "demo2"> </div>
<script>
function demo() {
var x = 10;
{
var y = 20;
// x和y都可以在这里访问
}
document.getElementById('demo1').innerHTML = "X == " + x;
document.getElementById('demo2').innerHTML = "Y == " + y;
}
demo();
</script>
</body>
</html>
输出
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>
输出
window.num1 + num2 = 30
JavaScript 变量提升
使用 '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;
}
// 您无法在此处访问变量a。
checkHoisting();
</script>
</body>
</html>
输出
上面的 JavaScript 代码类似于下面的代码。
a = 98;
document.getElementById('output').innerHTML += a;
重新声明使用 'var' 关键字定义的变量
您可以使用 'var' 关键字重新声明变量，代码将运行而不会出现任何错误。
如果您已使用 latest 值初始化了最后一个重复变量，它将包含该值。但是，如果您不初始化最后一个重复变量，则该变量将包含其前一个值而不会丢失它。
例在下面的代码中，我们定义了两次变量 '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
如果您在不同的范围内定义重复的变量，则根据您访问变量的位置，它可以具有值。
例在下面的代码中，我们在函数外部和内部定义了 '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 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 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: 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
使用 Destructuring 的声明
在 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>
输出
您还可以使用 'var' 关键字来定义变量并存储对象或函数表达式。
