如何在 JavaScript 中使用 'const' 關鍵字？

我們在 JavaScript 中使用const關鍵字宣告變數，其值只能在宣告時初始化。它的功能類似於 JavaScript 提供的其他關鍵字（即var和let）宣告變數。const 是常量的縮寫，表示儲存在變數中的值是不可更改的。

JavaScript 中的 const 關鍵字

它用於在 JavaScript 中宣告變數。使用 const 建立的變數遵循某些規則。

  • 該變數是塊作用域的。這意味著變數的作用域（生命週期）取決於其宣告的位置。這遵循與let關鍵字相同的規則。

  • const 變數的值應該只在宣告時提供。這是因為一旦宣告，儲存在 const 變數中的值就無法更改。

  • 但是，使用 const 關鍵字宣告的陣列或物件可以被修改。

  • 任何嘗試在初始化之前修改或訪問 const 變數都會導致引用錯誤。如果宣告行尚未執行，則該變數被稱為處於暫時性死區 (TDZ)。此行為與 var 關鍵字不同。

const 關鍵字對變數持有隻讀許可權。這意味著，在底層，變數而不是儲存在該變數中的值被限制為不能更改。任何嘗試寫入變數都會由於變數上沒有寫入許可權而引發錯誤。

語法

const NUM = 10;

這建立一個值為 10 的常量變數NUM。注意，使用大寫字母編寫 const 變數是一種常見的約定。這是為了強調該變數是常量，不應修改。

讓我們來看一個 const 關鍵字的例子。

示例 1

在這裡，我們將建立一個 const 變數，然後嘗試更改其值。這將丟擲一個“Assignment to constant variable”（賦值給常量變數）錯誤，我們將使用 try-catch 塊處理該錯誤。

讓我們看看相應的程式碼。

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
</body>
   <script>
      const NUM = 10;
      var text = "";
      for (let NUM = 0; NUM < 10; NUM++) {
         text += NUM + ",";
      }
      text += "<br>"
      try {
         NUM = 20;
      } catch (err) {
         text += err.message;
      }
      document.getElementById("result").innerHTML = text;
   </script>
</html>

在上面的程式碼中，有兩件事需要注意。一是 const 變數的塊作用域特性。這允許我們使用相同的名稱 NUM 定義另一個變數而不會發生衝突。這是因為 let 建立塊作用域變數。所以 for 迴圈內的 NUM 是一個非 const 變數，它與 const 變數具有相同的識別符號名稱。迴圈內建立的 NUM 與全域性作用域的 const 變數獨立工作，因為它是宣告在每個塊之外的。

第二點需要注意的是，當我們嘗試重新初始化 const 變數 NUM 的值時丟擲的錯誤。這符合 const 的工作方式。

注意，如果我們嘗試使用 var 關鍵字宣告一個與 const 變數同名的變數，則會丟擲一個錯誤，因為使用 var 關鍵字宣告的變數具有全域性作用域，這會造成衝突。

另外注意，如果我們嘗試宣告一個變數而不初始化它，則會丟擲一個“Missing Initializer in const declaration”（const 宣告中缺少初始化程式）錯誤。

const 關鍵字經常用於宣告陣列和物件。這是因為它不允許重新賦值物件變數，但同時允許修改物件的屬性的靈活性。

以下是如何在 JavaScript 中將 const 關鍵字與物件一起使用的示例。

示例 2

在這裡，我們將使用 const 關鍵字建立一個具有兩個屬性 name 和 age 的物件。然後我們嘗試修改 age 屬性。這將正常工作，因為我們處理的是物件而不是原始變數。讓我們看看相應的程式碼。

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
</body>
   <script>
      var text = "";
      const student = {
         name : "Jane Doe",
         age : 27
      }
      student.age = 29;
      text += student.name + "<br>";
      text += student.age + "<br>";
      document.getElementById("result").innerHTML = text;
   </script>
</html>

在上面的程式碼中，正如輸出中可見的那樣，age 屬性可以成功修改。

結論

const 關鍵字可以有效地防止意外使用者更改你的變數，並跟蹤在程式執行過程中保持不變的值。

更新於：2022年11月10日

3K+ 次檢視

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.