JavaScript - let 语句

什么是 JavaScript let 语句?

JavaScript let 语句用于声明变量。使用 let 语句，我们可以声明一个块级作用域的变量。这意味着用 let 声明的变量只能在定义它的代码块内访问。

let 关键字是在 JavaScript ES6(2015)版本中引入的。它是 var 关键字的替代方案。

引入 let 关键字的主要原因是为了改善变量的作用域行为和代码的安全性。

使用 let 语句声明变量

以下是使用 let 语句声明变量的语法 -

let var_name = value

让我们看一些使用 let 声明变量的示例。

let name = "John";
let age = 35;
let x = true;

使用 let 语句，我们可以声明任何数据类型的变量，例如数字、字符串、布尔值等。

JavaScript 块作用域与函数作用域

使用 let 关键字声明的变量的作用域是块作用域。这意味着，如果您在特定块中使用 let 关键字定义变量，则只能在该特定块内访问该变量;如果您尝试在块外访问该变量，则会引发"变量未定义"之类的错误。

{
    let x = "John";
}
//此处 x 无法访问

var 关键字具有函数作用域，这意味着如果您在任何函数块中使用 var 关键字定义变量，则可以在整个函数中访问它。

function foo(){
   if (true){
      let x = 5
      var y = 10
   }
   // 这里 x 不可访问，但 y 可访问
}

有时，我们需要在一个函数的不同代码块中定义同名的变量。如果使用 var 关键字，变量值可能会发生冲突。

示例

在下面的示例中，我们使用 let 关键字定义了变量 x，并使用 var 关键字定义了变量 y。此外，我们分别为这两个变量赋值 10 和 20。

我们定义了 test() 函数，在其中重新声明了 x 和 y 变量，并分别用 50 和 100 初始化它们。我们在函数内部打印变量值，由于局部变量优先于全局变量，因此函数会打印 50 和 100。

<html>
<head>
   <title> Variable declaration with let keyword </title>
</head>
<body>
   <script>
      let x = 10;
	  var y = 20;
	  function test() {
	     let x = 50;
	     var y = 100;
	     document.write("x = " + x + ", y = " + y + "<br/>");
	  }
	  test();
   </script>
</body>
</html>

示例

在下面的示例中，我们用"true"值初始化了 bool 变量。之后，我们在"if"块中使用 let 和 var 关键字声明了变量 x 和 y。

我们在"if"块内打印变量 x 和 y 的值。由于变量 x 具有块作用域，因此我们无法在"if"块外部访问它;但是，由于变量 y 具有函数作用域，因此我们可以在"if"块外部和函数块内部访问它。

<html>
<head>
   <title> Variable declaration with let keyword </title>
</head>
<body>
   <script>
      function test() {
	     let bool = true;
		 if (bool) {
		    let x = 30;

		    var y = 40;
		    document.write("x = " + x + ", y = " + y + "<br/>");
		 }
		 // x 无法在这里访问
		 document.write("y = " + y + "<br/>");
		}
      test();
   </script>
</body>
</html>

这样，let 关键字就被用来改进代码的作用域行为。

在 JavaScript 中重新声明变量

您不能在同一个代码块中重新声明使用 let 关键字声明的变量。但是，您可以将同名变量声明到具有相同功能的不同代码块中。

示例

在下面的示例中，您可以观察到使用 let 关键字声明的变量不能在同一个代码块中重新声明，但使用 var 关键字声明的变量可以在同一代码块中重新声明。

代码在输出中打印新声明的变量的值。

<html>
<head>
   <title> Variable redeclaring </title>
</head>
<body>
   <script>
      function test() {
	     if (1) {
	        let m = 70;
			// let m = 80; // 无法使用 let 关键字重新声明
			var n = 80;
			var n = 90; // 可以使用 var 关键字重新声明
			document.write("m = " + m + ", n = " + n);
		 }
	  }
      test();
   </script>
</body>
</html>

变量提升

JavaScript 的提升行为将变量的声明移至代码顶部。let关键字不支持变量提升，但var关键字支持变量提升。

示例

在下面的示例中，您可以看到，我们可以在变量n声明之前初始化并打印其值，因为它是使用var关键字声明的。

<html>
<head>
   <title> Variable hoisting </title>
</head>
<body>
   <script>
      function test() {
         // let 关键字不支持提升
         // m = 100;
         // document.write("m = " + m + "<br/>");
         // let m;
         n = 50;
         document.write("n = " + n + "<br/>");
         var n;
      }
      test();
   </script>
</body>
</html>

您可以使用 let 关键字取消注释代码并在 Web 控制台中检查错误，因为它不支持提升。