Javascript 简明教程

JavaScript - let Statement

What is JavaScript let statement?

JavaScript ${s0} 语句用于声明变量。使用 let 语句，我们可以声明一个变量是什么 ${s1}。这意味着使用 let 声明的变量只能在定义它的代码块中访问。

${s2} 关键字在 JavaScript 的 ES6(2015) 版本中引入。它是 ${s3} 关键字的替代品。

引入 ${s4} 关键字的主要原因是改进变量的范围行为和代码的安全性。

Variable Declaration with let statement

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

let var_name = value

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

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

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

JavaScript Block Scope vs. Function Scope

使用 ${s6} 关键字声明的变量的范围是块范围。这意味着如果使用 let 关键字在特定块中定义变量，则只能访问该特定块内的变量，如果你尝试在块外部访问变量，它会引发一个错误，如“变量未定义”。

{
   let x = "John";
}
//here x can't be accessed

${s7} 关键字具有函数范围，这意味着如果你在任何函数块中使用 var 关键字定义变量，则可以在整个函数中访问它。

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

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

Example

在下面的示例中，我们使用 let 关键字定义了变量 ${s8}，使用 var 关键字定义了变量 ${s9}。此外，我们分别为这两个变量赋值为 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>

Example

在下面的示例中，我们用“true”值初始化了 bool 变量。然后，我们在“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 关键字用于改善代码的范围行为。

Redeclaring Variables in JavaScript

您无法在同一块中重新声明使用 let 关键字声明的变量。但是，您可以使用同一函数在不同块中声明名称相同的变量。

Example

在下面的示例中，您可以观察到使用 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>

Variable Hoisting

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

Example

在下面的示例中，您会看到我们可以使用 var 关键字初始化并打印变量 n 的值，然后才能进行声明。

<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 控制台中的错误，因为它不支持提升。