資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 JavaScript 中檢查變數是否已定義？
在本教程中，我們將學習如何檢查**變數**是否存在，這意味著在**JavaScript**中變數是否已宣告和初始化。在許多情況下，JavaScript 程式設計師需要檢查變數是否存在。否則，如果我們在未宣告或定義變數的情況下使用它，則會丟擲引用錯誤。
例如，程式設計師已經定義了變數，但它未初始化。程式設計師希望透過從 API 呼叫中獲得的資料來更改變數的值。假設由於 API 呼叫期間出現某些錯誤，未初始化變數的值未更新。如果程式設計師嘗試在不檢查其值的情況下訪問未初始化的變數，則會丟擲錯誤。
在我們繼續之前，讓我們澄清一下**已定義**、**未定義**和**空**變數之間的區別。
Const data = 10; //variable is declared and defined (initialized with value 10) Const data; //variable is declared but its value is undefined. Const data = null; // declared and defined (initialized with "null" value). data = 10; // undeclared but defined (initialized with 10). data // undeclared and undefined, type of the variable is undefined
因此，現在使用者可以清楚地理解，如果變數未初始化，則其預設值為“undefined”。如果我們用“null”值初始化變數，我們可以稱其為空變數。如果使用者在程式碼中使用未定義或空變數，則必須面對錯誤。
我們有不同的方法來檢查變數是否為“undefined”。
- 使用 `typeof` 運算子
- 使用 `if` 語句
- 使用 `window.hasOwnProperty()` 方法
- 使用 `try/catch` 塊
使用 `typeof` 運算子
`typeof` 運算子有助於獲取任何變數的資料型別。對於未定義的變數，`typeof` 運算子返回字串“undefined”。我們可以使用字串相等性 (“===”) 運算子，並將從 `typeof` 運算子返回的值與“undefined”字串進行比較，以檢查變數是否存在。
語法
使用者可以按照以下語法使用 `typeof` 運算子。
typeof variable_name
引數
variable_name − 可以是任何我們想要檢查其是否未定義的變數。
一般來說，如果我們將未定義的變數用作 `typeof` 變數的運算元，即 ‘typeof undefined_variable’，它不會丟擲錯誤，但如果我們在程式碼中的其他任何地方使用它，它會丟擲錯誤。
示例 1
以下示例演示如何使用 `typeof` 運算子檢查變數是**已定義**還是**未定義**。變數 age 已宣告但已賦值，因此已定義。
<html>
<head>
<title> Check if variable is defined or not </title>
</head>
<body>
<h2>The <i>typeof</i> operator: Check if variable is defined or not</h2>
<div id="contentDiv"></div>
<script type="text/javascript">
let age = 20;
let contentDiv = document.getElementById("contentDiv");
if (typeof age === "undefined") {
contentDiv.innerHTML = " variable <i> age </i> is undefined. ";
} else {
contentDiv.innerHTML = "Variable <i> age </i> is defined. ";
}
</script>
<p> Here the variable <i>age</i> is declared with value 20. </p>
</body>
</html>在上面的輸出中，使用者可以看到我們已經聲明瞭“age”變數，並且它的值初始化為 20，因此它輸出為已定義。
嘗試使用以下程式：
var age; // undefined age = 20; // defined var age = 20; // defined var age = null; // defined age; // Uncaught ReferenceError: age is not defined (in Console)
請參考這篇文章以瞭解未定義和未宣告之間的區別。
使用 `if` 語句
我們可以使用 `if` 語句檢查變數是“已定義”還是“未定義”。需要使用以下語法進行檢查。
語法
if (variable_name === undefined){
//block of code to be executed.
}引數
variable_name − 應該是我們要檢查其是否已定義的變數的名稱。
這裡 `variable_name===undefined` 是 `if` 語句的條件。如果 `variable_name` 未定義，則條件的結果為“true”，否則條件的結果為“false”。請看下面的例子。
示例 2
<html>
<body>
<h2>The <i>if</i> statement: Check if variable is defined or not </h2>
<div id = "contentDiv" > </div>
<script>
var rank;
let contentDiv = document.getElementById("contentDiv" );
if(rank===undefined){
contentDiv.innerHTML = " variable <i> rank </i> is undefined. ";
} else{
contentDiv.innerHTML = " variablle <i> rank </i> is defined. ";
}
</script>
</body>
</html>在上面的輸出中，使用者可以看到我們已經聲明瞭“rank”變數，但其值未初始化，因此它輸出為未定義。
使用 `window.hasOwnProperty()` 方法
我們可以使用 JavaScript 中的 `window` 屬性訪問每個全域性定義的變數、物件或函式。“**window**”充當全域性物件來檢查任何變數的存在。我們可以為 `window` 物件呼叫 `hasOwnProperty()` 方法來確認它是否包含該變數。它根據變數是否已定義返回布林值。
語法
let isUndefined = window.hasOwnProerty('variable_name').引數
variable_name − 應該是我們要檢查其是否已定義的變數的名稱。
返回值 − 如果 `variable_name` 存在（已定義或已宣告），則返回“true”，否則返回“false”
示例 3
以下示例演示瞭如何使用 `window.hasOwnProperty()` 方法檢查變數是否未定義。
<html>
<head>
<title> Check if variable is defined or not </title>
</head>
<body>
<h2>The <i> window.hasOwnProperty()</i > method</h2>
<p>Checking the existence of a variable</p>
<div id="variableDiv"></div>
<script type="text/javascript">
// isdefined variable either get true or false value
var isdefined = window.hasOwnProperty('data');
let variableDiv = document.getElementById("variableDiv");
// function to check if variable is undefined or not.
function checkExistanceOfVar() {
if (isdefined) {
variableDiv.innerHTML = " Variable <i> data </i> exist ";
} else {
variableDiv.innerHTML = " Variable <i> data </i> doesn't exist ";
}
}
// call the function
checkExistanceOfVar();
</script>
</body>
</html>在上面的輸出中，使用者可以看到‘data’變數不存在，因此 `window.hasOwnProerty()` 方法返回false，控制流轉到 `else` 塊。
但是，上述方法不適用於 `let` 和 `const` 變數。使用者可以使用上述方法來檢查使用 `var` 關鍵字宣告的函式和變數的存在。
使用 `try/catch` 塊
通常，我們使用 `try/catch` 塊來防止我們的程式碼因未知錯誤而崩潰。當變數未定義或未初始化時，JavaScript 返回引用錯誤。我們可以嘗試在 `try` 塊中訪問變數，如果發生任何錯誤或變數未定義，控制流轉到 `catch` 塊，我們可以在那裡解決錯誤。
語法
使用者可以按照以下語法使用 `try/catch` 塊。
try{
let data = res;
} catch ( error ) {
// control goes here if variable is undefined without
// completing the try block
}示例 4
在下面的示例中，我們演示瞭如何使用 `try/catch` 塊來檢查變數是否未定義。
<html>
<head>
<title> Check if variable is defined or not </title>
</head>
<body>
<h2>Checking if the variable id defined using the <i>try / catch</i> block.</h2>
<div id="errorDiv"></div>
<script type="text/javascript">
let errorDiv = document.getElementById("errorDiv");
function checkExistanceOfVar() {
// using the try/catch block
try {
let data = result;
errorDiv.innerHTML = " <i> result </i> variable exist";
} catch (error) {
errorDiv.innerHTML = error;
}
}
// call the function
checkExistanceOfVar();
</script>
</body>
</html>在上面的示例中，我們嘗試將未定義的 `result` 變數賦值給 `data` 變數，因此控制流轉到 `catch` 塊並列印 `ReferenceError`。
結論
我們已經看到了三種不同的方法來檢查變數是否未定義。第一種方法適用於所有情況。使用者只能將第二種方法與使用 ‘var’ 關鍵字宣告的變數一起使用。在使用第三種方法時，使用者需要在 `catch` 塊中指定錯誤型別。否則，由於其他錯誤，控制流會轉到 `catch` 塊。
3K+ 次瀏覽
