JavaScript中var和let之间有什么区别?

2021年4月13日09:42:25 发表评论 76 次浏览

var和let都用于javascript中的变量声明, 但是它们之间的区别在于var是函数范围的, 而let是块范围的。

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

一个例子将更好地阐明差异

var的示例:

Input:
console.log(x);
var x=5;
console.log(x);
Output:
undefined
5
JavaScript中var和let之间的区别1

let的示例:

Input:
console.log(x);
let x=5;
console.log(x);
Output:
Error
JavaScript中var和let之间的区别2

让我们看看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>

输出如下

JavaScript中var和let之间的区别3

代码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>

输出如下:

JavaScript中var和let之间的区别4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: