JavaScript - let 语句

什么是 JavaScript let 语句？

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

let关键字是在ES6（2015）版本的JavaScript中引入的。它是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";
}
//here x can't be accessed

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

function foo(){
   if (true){
      let x = 5
      var y = 10
   }
   // here x can't be accessed while y is accessible
}

有时，我们需要在一个函数的不同块中定义同名的变量。如果使用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>

示例

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

我们在“if”块内打印x和y变量的值。“if”块外无法访问变量'x'，因为它具有块作用域，但是可以在“if”块外和函数块内访问变量y，因为它具有函数作用域。

<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 can't be accessible here
		 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; // redeclaration with let keyword is not	possible
			var n = 80;
			var n = 90; // redeclaration with var keyword is possible
			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() {
         // Hoisiting is not supported by let keyword
         // m = 100;
         // document.write("m = " + m + "<br/>");
         // let m;
         n = 50;
         document.write("n = " + n + "<br/>");
         var n;
      }
      test();
   </script>
</body>
</html>

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

打印页面