JavaScript - var 關鍵字

上一頁
下一頁

JavaScript 中的var關鍵字用於宣告變數。在 ES6 之前，只有var關鍵字可以用來宣告變數。在 ES6 中，引入了 let 和 const 關鍵字作為宣告變數的更好方法。建議使用 let 而不是 var 來宣告變數。如果您要針對舊版本的瀏覽器，可以使用 var。

在 JavaScript 中，變數是資料儲存容器。您可以使用變數來儲存任何型別的資料。例如，字串、數字、布林值、物件等。

用 var 關鍵字宣告的變數具有函式作用域。而用 let 宣告的變數具有塊作用域。

語法

請遵循以下語法使用“var”關鍵字定義變數。

var identifier;
var identifier = value;

這裡，識別符號可以是有效的變數名。在JavaScript - 變數章節中，我們已經討論了定義有效識別符號的規則。

在使用 JavaScript“var”關鍵字宣告變數時，您可以為變數賦值或不賦值。

示例

在下面的程式碼中，我們使用“var”關鍵字定義了 3 個變數。在 num1 變數中，我們儲存了數字值。在 str1 變數中，我們儲存了字串值；在 bool 變數中，我們儲存了布林值。

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <div id = "output3"> </div>
   <script>
      var num1 = 30;
      var str1 = "Hello World!";
      var bool = true;
      document.getElementById('output1').innerHTML = num1;
      document.getElementById('output2').innerHTML = str1;
      document.getElementById('output3').innerHTML = bool;
  </script>
</body>
</html>

輸出

30
Hello World!
true

JavaScript 變數作用域

使用 JavaScript“var”關鍵字定義的變數的作用域具有函式作用域或全域性作用域。

JavaScript 函式作用域

當您使用 var 關鍵字在函式內部定義變數時，可以在函式內部的任何地方訪問它。即使您在函式內部的特定塊內使用 var 關鍵字定義變數，也可以在任何地方訪問它。

讓我們透過下面的示例瞭解函式作用域。

示例

在下面的程式碼中，我們在函式內部定義了變數“x”。我們還在函式內部的塊內定義了變數“y”。

之後，我們在函式內部訪問變數 x 和 y。

<html>
<body>
   <div id = "demo1"> </div>
   <div id = "demo2"> </div>
   <script>
      function demo() {
         var x = 10;
         {
            var y = 20;
            // x and y both can be accessible here
         }
         document.getElementById('demo1').innerHTML = "X == " + x;
         document.getElementById('demo2').innerHTML = "Y == " + y;
      }
      demo();
   </script>
</body>
</html>

輸出

X == 10
Y == 20

如果您在函式內部的塊內使用 let 關鍵字定義變數，並嘗試在塊外部訪問它，則會引發錯誤。

JavaScript 全域性作用域

如果您在函式或特定塊外部使用“var”關鍵字定義變數，則它將成為全域性變數。

之後，您可以使用 window 物件在程式碼中的任何位置訪問該變數。

示例

我們在下面的程式碼中定義了“num1”全域性變數。

之後，我們在函式內部使用和不使用 window 物件訪問“num1”變數。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const output = document.getElementById('output');
      var num1 = 10;
      function sum(num2) {
         output.innerHTML += "num1 + num2 = " + (num1 + num2) + "<br>";
         output.innerHTML += "window.num1 + num2 = " + (window.num1 + num2);
      }
      sum(20);
   </script>
</body>
</html>

輸出

num1 + num2 = 30
window.num1 + num2 = 30

JavaScript 變數提升

使用“var”關鍵字定義的變數會被提升到其作用域的頂部。這意味著 JavaScript 會將其作用域頂部的變數宣告新增進去。

因此，您可以在變數宣告之前訪問該變數。

示例

在下面的程式碼中，我們在變數“a”的宣告之前初始化了它並列印了它的值。

程式碼在沒有錯誤的情況下執行，因為使用 var 關鍵字定義的變數會被提升到其作用域的頂部。

<html>
<body>
   <div id = "output">Value of the variable a is:  </div>
   <script>
      function checkHoisting() {
         a = 98;
         document.getElementById('output').innerHTML += a;
         var a;
      }
      // You can't access the variable a here.
      checkHoisting();
   </script>
</body>
</html>

輸出

Value of the variable a is: 98

以上 JavaScript 程式碼類似於以下程式碼。

var a;
a = 98;
document.getElementById('output').innerHTML += a;

使用 'var' 關鍵字宣告的變數的重新宣告

您可以使用 'var' 關鍵字重新宣告變數，程式碼將執行而不會出現任何錯誤。

如果您已將最後一個重複變數初始化為最新值，則它將包含該值。但是，如果您沒有初始化最後一個重複變數，則該變數將包含其先前值，而不會丟失它。

示例

在下面的程式碼中，我們定義了變數 'a' 兩次並用不同的值初始化它。您可以在輸出中觀察到變數 'a' 包含最後一個值。

我們第三次定義了變數 'a' 並且沒有初始化它。因此，它包含第二個 'a' 變數的值。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById('demo');
      var a = 10;
      var a = 20;
      output.innerHTML += "The value of the a is: " + a + "<br>";
      var a;
      output.innerHTML += "The value of the a is: " + a;
   </script>
</body>
</html>

輸出

The value of the a is: 20
The value of the a is: 20

如果在不同的作用域中定義重複變數，則它可以根據訪問變數的位置具有不同的值。

示例

在下面的程式碼中，我們在函式外部和內部定義了 'num' 變數。當您在函式內部或外部訪問它時，它會列印不同的值。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById('demo');
      var num = 10;
      function printNum() {
         var num = 20;
         output.innerHTML += "Num inside the function is: " + num + "<br>";
      }
      printNum();
      output.innerHTML += "Num outside the function is: " + num + "<br>";
   </script>
</body>
</html>

輸出

Num inside the function is: 20
Num outside the function is: 10

在一個語句中宣告多個變數

如果要使用 JavaScript 的 'var' 關鍵字宣告多個變數，可以在一個語句中宣告所有變數。這使程式碼更易於閱讀。

示例

在下面的程式碼中，我們在單個語句中聲明瞭變數 'a' 和 'b'，並在聲明後用不同的值初始化它們。

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      var a, b;
      a = 70;
      b = 80;
      document.getElementById('output1').innerHTML = "The value of a is: " + a;
      document.getElementById('output2').innerHTML = "The value of b is: " + b;
   </script>
</body>
</html>

輸出

The value of a is: 70
The value of b is: 80

但是，您也可以在單個語句中宣告多個變數時為變數賦值。

在迴圈中使用 var 關鍵字

當您使用 JavaScript 的 'var' 關鍵字定義 for 迴圈的迭代器變數時，您也可以在 for 迴圈外部訪問它。

示例

在下面的程式碼中，我們在 for 迴圈內部定義了變數 'p'。我們在迴圈內部和外部訪問變數 p。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const output = document.getElementById('output');
      for (var p = 0; p < 5; p++) {
         output.innerHTML += "The value of p is: " + p + "<br>";
      }
      output.innerHTML += "The value of p outside the loop is: " + p;
   </script>
</body>
</html>

輸出

The value of p is: 0
The value of p is: 1
The value of p is: 2
The value of p is: 3
The value of p is: 4
The value of p outside the loop is: 5

使用解構宣告

在 JavaScript 中，您可以在解構陣列或物件時使用 'var' 關鍵字宣告變數。

示例

在下面的程式碼中，'arr' 陣列包含 3 個變數。

之後，我們使用 'var' 關鍵字定義變數並解構陣列。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const output = document.getElementById('output');
      var arr = [4, 5, 6];
      var [a, b, c] = arr;
      output.innerHTML = "a = " + a + ", b = " + b + ", c = " + c;
   </script>
</body>
</html>

輸出

a = 4, b = 5, c = 6

您還可以使用 'var' 關鍵字定義變數並存儲物件或函式表示式。

列印頁面
上一頁
下一頁
廣告