视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript中的var和let的区别(代码示例)
2020-11-27 19:27:02 责编:小采
文档
 var和let都用于javascript中的函数声明,它们之间的区别是,var是函数作用域,let是块作用域。

可以说,与let相比,用var声明的变量在整个程序中都是定义的。

举个例子会更清楚地说明这种区别,如下:

var的例子:

输入:
console.log(x);
var x=5;
console.log(x);
输出: undefined 5

let的例子:

输入:
console.log(x);
let x=5;
console.log(x);
输出: Error

让我们看看JavaScript代码:

代码示例1:

<html> 
 
<body> 
 <script> 
 // 定义后调用x
 var x = 5; 
 document.write(x, "\n"); 
 
 // 定义后调用y 
 let y = 10; 
 document.write(y, "\n"); 
 
 // 在定义之前调用var z将返回undefined
 document.write(z, "\n"); 
 var z = 2; 
 
 // 在定义前调用let a会产生错误
 document.write(a); 
 let a = 3; 
 </script> 
</body> 
 
</html>

输出:

代码示例2:

在下面的代码中,单击start将调用一个函数,该函数每0.5秒更改两个标题的颜色。第一个标题的颜色存储在一个var中,第二个标题使用let声明。

然后在函数块之外访问它们。Var将工作,但使用let声明的变量将显示一个错误,因为let是块作用域。

<!DOCTYPE html>
<html>
<head>
 <title>js教程</title>
 <meta charset="UTF-8">
</head>

<body>

<h1 id="var" style="color:black;">javascript教程</h1>
<h1 id="let" style="color:black;">javascript教程</h1>
<button id="btn" onclick="colour()">Start</button>

<script type="text/javascript">
 function colour() {

 setInterval(function() {

 if (document.getElementById('var').style.color == 'black')
 var col1 = 'blue';
 else
 col1 = 'black';

 // 通过var设置color 1的值

 if (document.getElementById('let').style.color == 'black') {
 let col2 = 'red';
 } else {
 col2 = 'black';
 }

 // 通过let设置color 2的值

 document.getElementById('var').style.color = col1;

 document.getElementById('let').style.color = col2;

 // 在html中改变h1的颜色
 }, 500);

 }
</script>
</body>

</html>

输出:

下载本文
显示全文
专题