|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
3種方法JS判斷變量是否存在或已定義
作者:admin 時間:2022-5-11 18:21:5 瀏覽:我們在使用一個變量的時候，為了流程更加嚴密，程序會先判斷變量是否存在，以免拋出異常(throws ReferenceError)。關于變量的聲明，可以參考前文：
今天，我們重點介紹一下JS如何判斷變量是否已經(jīng)定義，我們有三種方法達到目的。
1、typeof
typeof運算符確定變量的類型。typeof myVar可以是以下值之一：'boolean', 'number', 'string', 'symbol', 'object','function'和'undefined'。
如果missingVar未定義，表達式typeof missingVar不會拋出 ReferenceError，這與未定義變量的簡單訪問相反：
// missingVar 未定義
typeof missingVar; // 不拋出 ReferenceError
missingVar; // 拋出 ReferenceError
這樣，我們就可以使用表達式typeof myVar === 'undefined'來確定變量是否未定義：
if (typeof myVar === 'undefined') {
// myVar (未定義) 或 (已定義但未初始化)
} else {
// myVar (已定義和已初始化)
}請注意，訪問已定義但未初始化的變量的結果為 undefined。
// missingVar 未定義
typeof missingVar === 'undefined'; // => true
// myVar 已定義但未初始化
let myVar;
typeof myVar === 'undefined'; // => true
如果變量已定義且具有值，則typeof myVar === 'undefined' 結果為false：
const myVar = 42;
typeof myVar === 'undefined'; // => false
2、使用try/catch
當訪問一個未定義的變量時，JavaScript 會拋出一個引用錯誤：
// missingVar 未定義
missingVar; // 拋出 "ReferenceError: missingVar is not defined"
那么......如何將檢查變量包裝在一個try塊中，并嘗試捕獲引用錯誤？如果捕獲到錯誤，則意味著未定義變量：
// missingVar 未定義
try {
missingVar;
console.log('missingVar 未定義')
} catch(e) {
e; // => ReferenceError
console.log('missingVar 未定義');
}
// logs 'missingVar 未定義'
missingVar在上面的例子中沒有定義。當嘗試訪問try塊中的變量時，會拋出 ReferenceError 錯誤，并且catch塊會捕獲此引用錯誤。這是檢查變量是否存在的另一種方法。
當然，如果定義了變量，就不會拋出引用錯誤：
// existingVar 已定義
let existingVar;
try {
existingVar;
console.log('existingVar 已定義')
} catch(e) {
console.log('existingVar 未定義');
}
// logs 'existingVar 已定義'
與typeof方法相比，try/catch更精確，因為它僅確定變量是否未定義，不管已初始化或未初始化。
3、使用window.hasOwnProperty()
最后，要檢查全局變量是否存在，可以采用更簡單的方法。
每個全局變量都存儲為全局對象的一個??屬性（window在瀏覽器環(huán)境中，global在 NodeJS 中）?？梢允褂眠@個想法來確定是否定義了全局變量myGlobalVar：只需檢查全局對象是否存在相應的屬性：window.hasOwnProperty('myGlobalVar')：
例如，以下是檢查瀏覽器是否定義了IntersectionObserver變量的方法：
if (window.hasOwnProperty('IntersectionObserver')) {
// 瀏覽器提供了IntersectionObserver
} else {
// 瀏覽器不支持IntersectionObserver
}var變量和function聲明，當在最外層范圍（也稱為全局范圍）中使用時，會在全局對象上創(chuàng)建屬性：
// 外部范圍
var num = 19;
function greet() {
return 'Hello!';
}
window.hasOwnProperty('num'); // => true
window.hasOwnProperty('greet'); // => true
但是，請注意，const和let變量，以及class聲明不會在全局對象上創(chuàng)建屬性：
// 外部范圍
const pi = 3.14;
let message = 'Hi!';
class MyClass {}
window.hasOwnProperty('pi'); // => false
window.hasOwnProperty('message'); // => false
window.hasOwnProperty('MyClass'); // => false
4、總結
在 JavaScript 中，變量可以定義或未定義，也可以初始化或未初始化。
如果myVar未定義，或已定義卻未初始化，那么typeof myVar === 'undefined' 值為true。這是確定變量是否已定義的快速方法。
另一種方法是將變量包裝在一個try { myVar }塊中，然后在一個塊中捕獲可能的引用錯誤catch(e) { }。如果捕獲到一個ReferenceError（引用錯誤），則未定義該變量。
最后，調用window.hasOwnProperty('myGlobalVar')檢查是否存在全局變量myGlobalVarinvoke 。這種方法對于檢查瀏覽器是否支持 Web API 很有用。
參考文章
相關文章
- 站長推薦
