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控制檯中檢查錯誤，因為它不支援提升。

列印頁面