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 的块作用域 vs 函数作用域

使用 let 关键字声明的变量具有块级作用域。这意味着如果你在一个特定的块中定义了一个变量，那么你只能在这个特定的块内访问这个变量，如果你试图在块外访问它，将会抛出一个错误，如 '变量未定义'。

{
   let x = "John";
}
// 这里 x 无法访问

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> 使用 let 关键字进行变量声明 </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> 使用 let 关键字进行变量声明 </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> 变量重新声明 </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> 变量提升 </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 控制台中检查错误，因为它不支持提升。