資料結構
網路
關係型資料庫管理系統
作業系統
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
因此，現在使用者可以清楚地理解，如果變數未初始化，則其預設值為“未定義”。如果我們用“空”值初始化變數，我們可以稱其為空變數。如果使用者在程式碼中使用未定義或空變數，他們必須面對錯誤。
我們有不同的方法來檢查變數是否為“未定義”。
- 使用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>在上面的示例中，我們嘗試將未定義結果變數賦值給 data 變數，因此控制權轉到 catch 塊並輸出 ReferenceError。
結論
我們已經看到了三種不同的方法來檢查變數是否未定義。第一種方法適用於所有情況。使用者只能將第二種方法用於使用“var”關鍵字宣告的變數。在使用第三種方法時，使用者需要在 catch 塊中指定錯誤型別。否則，由於其他錯誤，控制權將轉到 catch 塊。
3K+ 次瀏覽
