var和let都用于javascript中的变量声明, 但是它们之间的区别在于var是函数范围的, 而let是块范围的。
可以说, 与let相比, 在整个程序中都定义了用var声明的变量。
一个例子将更好地阐明差异
var的示例：
Input:
console.log(x);
var x=5;
console.log(x);
Output:
undefined
5
let的示例：
Input:
console.log(x);
let x=5;
console.log(x);
Output:
Error
让我们看看JavaScript中的代码：
代码1：
<html>
<body>
<script>
//calling x after definition
var x = 5;
document.write(x, "\n");
//calling y after definition
let y = 10;
document.write(y, "\n");
//calling var z before definition will return undefined
document.write(z, "\n");
var z = 2;
//calling let a before definition will give error
document.write(a);
let a = 3;
</script>
</body>
</html>输出如下
代码2：
在下面的代码中, 单击"开始"将调用一个函数, 该函数每0.5秒更改两个标题的颜色。第一个标题的颜色存储在var中, 而第二个则通过使用let声明。
然后都可以在功能块外部访问它们。 Var将起作用, 但使用let声明的变量将显示错误, 因为let是块作用域的。
<!DOCTYPE html>
<html>
<head>
<title>Var vs Let</title>
</head>
<body>
<h1 id = "var" style = "color:black;">lsbin</h1>
<h1 id = "let" style = "color:black;">lsbin</h1>
<button id = "btn" onclick = "colour()">Start</button>
<!-- executing function on button click -->
<script type = "text/javascript">
function colour() {
setInterval(function() {
if (document.getElementById('var').style.color == 'black')
var col1 = 'blue';
else
col1 = 'black';
//setting value of color 1 through var
if (document.getElementById('let').style.color == 'black') {
let col2 = 'red';
} else {
col2 = 'black';
}
//setting value of color 2 through let
document.getElementById('var').style.color = col1;
document.getElementById('let').style.color = col2;
//changing color of h1 in html
}, 500);
}
</script>
</body>
</html>输出如下：
