JavaScript檢查變量是否存在(被定義/初始化)


檢查變量是否被初始化的哪種方法是更好的還是正確的? (假設變量可以容納任何東西(string,int,object,function等))

if (elem) { // or !elem

要么

if (typeof(elem) !== 'undefined') {

要么

if (elem != null) {


Answers


你想要typeof運算符 。 特別:

if (typeof variable !== 'undefined') {
    // the variable is defined
}



typeof運算符將檢查變量是否真的未定義。

if (typeof variable === 'undefined') {
    // variable is undefined
}

與其他運算符不同, typeof運算符在與未聲明的變量一起使用時不會引發ReferenceError異常。

但是,請注意typeof null將返回"object" 。 我們必須小心避免將變量初始化為null的錯誤。 為了安全起見,這是我們可以使用的:

if (typeof variable === 'undefined' || variable === null) {
    // variable is undefined or null
}

有關使用嚴格比較===而不是簡單的等式==更多信息,請參閱:
應該在JavaScript比較中使用哪個等於運算符(== vs ===)?




在JavaScript中,可以定義一個變量,但將值保留為undefined ,所以最常見的答案在技術上不正確,而是執行以下操作:

if (typeof v === "undefined") {
   // no variable "v" is defined in the current scope
   // *or* some variable v exists and has been assigned the value undefined
} else {
   // some variable (global or local) "v" is defined in the current scope
   // *and* it contains a value other than undefined
}

這可能就足夠了你的目的。 下面的測試具有更簡單的語義,這使得更準確地描述你的代碼的行為和自己理解(如果你關心這樣的事情)更容易:

if ("v" in window) {
   // global variable v is defined
} else {
   // global variable v is not defined
}

這當然假定你正在瀏覽器中運行(其中window是全局對象的名稱)。 但是如果你正在用這樣的全局變量,你可能在瀏覽器中。 主觀地說, 'name' in window使用'name' in window與使用window.name來引用全局window.name在風格上是一致的。 將全局變量作為window屬性而不是變量訪問,可以使代碼中引用的未聲明變量的數量最小化(為了linting),並避免全局被局部變量覆蓋的可能性。 另外,如果全局變形使你的皮膚爬行,你可能會感覺更舒服,只有用這個比較長的棒才能觸摸它們。




在大多數情況下,你會使用:

elem != null

不像一個簡單的if (elem) ,它允許0falseNaN'' ,但是拒絕null或者undefined ,使得它成為一個對象的一個參數或屬性的一個很好的通用測試。

其他檢查也不正確,他們只是有不同的用途:

  • if (elem) :可以用來保證elem是一個對象,或者如果為false ,則0等被認為是“默認”值(因此相當於undefinednull )。

  • 在指定的null對未初始化的變量或屬性具有不同的含義的情況下,可以使用typeof elem == 'undefined'

    • 這是唯一的檢查, 不會拋出一個錯誤,如果elem沒有聲明 (即沒有var聲明,不屬於window ,或不是一個函數參數)。 在我看來,這是相當危險的,因為它可以讓人誤入歧途。 為了避免這種情況,請參閱下面的方法。

另外有用的是嚴格比較undefined

if (elem === undefined) ...

但是,由於全局undefined可以被另一個值覆蓋,因此最好在使用它之前將當前範圍中undefined的變量聲明為:

var undefined; // really undefined
if (elem === undefined) ...

要么:

(function (undefined) {
    if (elem === undefined) ...
})();

這種方法的第二個優點是JS縮小器可以將undefined變量減少為單個字符,每次都可以節省幾個字節。




如何檢查一個變量是否存在

這是一個很好的解決方案,用於測試變量是否存在並被初始化:

var setOrNot = typeof variable !== typeof undefined;

在一個變量尚未初始化的情況下,它通常與三元運算符結合使用來設置默認值:

var dark = typeof darkColor !== typeof undefined ? darkColor : "black";

封裝問題

不幸的是,你不能簡單地把你的支票封裝在一個函數中。

你可能會想到做這樣的事情:

function isset(variable) {
    return typeof variable !== typeof undefined;
}

但是,如果你打電話,這將產生一個參考錯誤。 isset(foo)和變量foo沒有被定義,因為你不能把一個不存在的變量傳遞給一個函數:

Uncaught ReferenceError:foo未定義

測試函數參數是否未定義

雖然我們的isset函數不能用來測試一個變量是否存在(由於上面解釋的原因),但它確實允許我們測試一個函數的參數是否是未定義的:

var a = '5';

var test = function(x, y) {
    console.log(isset(x));
    console.log(isset(y));
};

test(a);

// OUTPUT :
// ------------
// TRUE
// FALSE

儘管沒有將y值傳遞給函數test ,但是我們的isset函數在這個上下文中是完美的,因為y在函數test被稱為undefined值。




檢查一個對象hasOwnProperty()

另一種類型的答案,是使用hasOwnProperty()當然檢查一個對象(幾乎所有在JS)有一個屬性, 變量(等)。

hasOwnProperty()方法返回一個布爾值,指示對像是否具有指定的屬性作為自己的(未繼承)屬性。

每個Object的繼承對像都繼承hasOwnProperty()方法。 此方法可用於確定對像是否具有指定的屬性作為該對象的直接屬性; 與in運算符不同,此方法不檢查對象的原型鏈。

// Globally established (therefore) properties of window
var foo = "whatever", // string
    bar = false,      // bool
    baz;              // undefined
// window.qux does not exist

console.log( [
    window.hasOwnProperty( "foo" ),             // true
    window.hasOwnProperty( "bar" ),             // true
    window.hasOwnProperty( "baz" ),             // true
    window.hasOwnProperty( "qux" ),             // false
    { foo: [], bar: 0 }.hasOwnProperty( "bar" ) // true
] );

hasOwnProperty()在於,在調用它的時候,我們不使用一個尚未定義的變量 - 這當然是第一個問題的一半。

雖然並不總是 完美理想的解決方案,但在某些情況下,這只是工作!




當您執行簡單的作業和相關檢查時,還有另一個簡短的方法來檢查這一點。 只需使用條件(三元)運算符。

var values = typeof variable !== 'undefined' ? variable : '';

當你嘗試用引用變量的實例分配來聲明全局變量時,這也是有幫助的。

如果你想檢查變量不應該是undefinednull 。 然後執行下面的檢查。

當變量被聲明時,如果你想檢查值,這甚至是簡單的: 它將執行undefinednull檢查在一起。

var values = variable ? variable : '';



未定義,布爾,字符串,數字功能

if( typeof foo !== 'undefined' ) { 

}

對象,數組

if( foo instanceof Array ) { 

}



這取決於你是否在意這個變量已經被定義,或者你是否希望它有一個有意義的值。

檢查類型是否未定義將檢查變量是否已被定義。

=== null!== null只會檢查變量的值是否為null

== null!= null將檢查該值是否為undefinednull

if(value)將檢查變量是undefinednull0還是空字符串。




在許多情況下,使用:

if (elem) { // or !elem

會為你做這個工作...這將檢查下面這些情況:

  1. undefined :如果該值沒有定義,並且是undefined
  2. null :如果它為空,例如,如果DOM元素不存在...
  3. 空字符串''
  4. 0 :數字零
  5. NaN :不是一個數字

所以它會涵蓋所有的情況,但總是有些奇怪的情況,我們也想要覆蓋,例如一個帶空格的字符串,就像這個,這個在javascript中定義,因為它在字符串中有空格。 ..例如在這種情況下,你使用trim()添加一個檢查,如:

if(elem) {

if(typeof elem === 'string' && elem.trim()) {
///

我也創建下面的圖像來快速簡要回答一下答案:




最高的答案是正確的,使用typeof。

但是,我想指出的是,在JavaScript中, undefined是可變的(出於某種不合理的原因)。 所以簡單地做一個varName !== undefined的檢查有可能不會總是如你所期望的那樣返回,因為其他庫可能已經改變了undefined。 一些答案(@ skalee的,一個),似乎更喜歡不使用typeof ,這可能會讓人陷入困境。

處理這個“舊”的方法是宣布未定義為一個變量來抵消任何潛在的靜音/ undefined 。 但是,最好的方法仍然是使用typeof因為它會忽略任何其他代碼的undefined重寫。 特別是如果你正在編寫野外使用的代碼,誰知道什麼可以在網頁上運行...




if (typeof console != "undefined") {    
   ...
}

或更好

if ((typeof console == "object") && (typeof console.profile == "function")) {    
   console.profile(f.constructor);    
}

適用於所有瀏覽器




區分undefined和null是很困難的。 Null是一個值,當你想表示變量​​沒有特殊的值時,你可以賦值給一個變量。 Undefined是一個特殊值,它是未賦值變量的默認值。


var _undefined;
var _null = null;

alert(_undefined); 
alert(_null); 
alert(_undefined == _null);
alert(_undefined === _null);




最強大的“是它定義”檢查與typeof

if (typeof elem === 'undefined')

如果你只是檢查一個定義的變量來指定一個默認的,為了方便閱讀一個班輪,你可以經常這樣做:

elem = elem || defaultElem;

這通常是很好的使用,請參閱: javascript中設置默認值的習慣用法

還有一個使用typeof關鍵字的班輪:

elem = (typeof elem === 'undefined') ? defaultElem : elem;



你可以使用typeof運算符。

例如,

var dataSet;

alert("Variable dataSet is : " + typeof dataSet);

上面的代碼片段將返回類似的輸出

變量dataSet是:undefined。




Null是JavaScript中的一個值, typeof null返回"object"

因此,如果您傳遞空值,接受的答案將不起作用。 如果您傳遞空值,則需要為空值添加額外的檢查:

if ((typeof variable !== "undefined") && (variable !== null))  
{
   // the variable is defined and not null
}



這些答案(除了Fred Gandt解決方案)都不正確或不完整。

假設我需要我的variableName; 攜帶一個undefined值,因此已經以var variableName;的方式聲明了var variableName; 這意味著它已經被初始化 ; - 如何檢查是否已經聲明?

甚至更好 - 我如何立即檢查“Book1.chapter22.paragraph37”是否存在一個調用,但不會引起參考錯誤?

我們通過使用最強大的JasvaScript運算符( in運算符)來實現:

"[variable||property]" in [context||root] 
>> true||false

在AJAX高峰流行的時代,我寫了一個方法(後來命名)是NS(),它能夠確定名稱空間是否存在,包括對屬性名稱進行深度測試,比如“Book1.chapter22.paragraph37”等等。

但由於它以前已經發表,因為它的重要性值得在一個單獨的線程發表,我不會在這裡發表,但會提供關鍵字( JavaScript + ISNS ),這將幫助您找到源代碼,支持所有的必要的解釋。




在問題中概述的特定情況下,

typeof window.console === "undefined"

是相同的

window.console === undefined

我更喜歡後者,因為它更短。

請注意,我們只在全局範圍內查找console (這是所有瀏覽器中的window對象)。 在這個特定的情況下,這是可取的。 我們不希望在別處定義console

@BrianKelley在他的偉大答案中解釋了技術細節。 我只是添加了一些不足的結論,並將其消化為更易於閱讀的內容。




我的首選是typeof(elem) != 'undefined' && elem != null

不過你選擇的話,可以考慮把支票放在這樣的功能中

function existy (x) {
    return typeof (x) != 'undefined' && x != null;
}

如果你不知道這個變量被聲明了,那麼繼續使用typeof (x) != 'undefined' && x != null;

你知道這個變量已經被聲明了,但是可能並不存在,你可以使用

existy(elem) && doSomething(elem);

你正在檢查的變量有時可能是一個嵌套的屬性。 你可以使用prop || {}去檢查存在問題的財產線:

var exists = ((((existy(myObj).prop1||{}).prop2||{}).prop3||{})[1]||{}).prop4;

在每個屬性使用(...'|| {}')。nextProp之後,一個缺失的屬性不會拋出錯誤。

或者你可以使用existy existy(o) && existy(op) && existy(opq) && doSomething(opq)




這取決於實際情況。 如果你正在檢查的東西可能或可能不是全局定義在你的代碼之外(如jQuery也許):

if (typeof(jQuery) != "undefined")

(不需要嚴格的平等,typeof總是返回一個字符串。)但是如果你有一個函數的參數可能被傳遞或者不被傳遞,它們總是被定義的,但是如果被省略,則為空。

function sayHello(name) {
    if (name) return "Hello, " + name;
    else return "Hello unknown person";
}
sayHello(); // => "Hello unknown person"



為了促進辯論,如果我知道變量應該是一個字符串或對象,我總是喜歡if (!variable) ,所以檢查是否它的虛假。 這可以帶來更乾淨的代碼,例如:

if (typeof data !== "undefined" && typeof data.url === "undefined") {
        var message = 'Error receiving response';
        if (typeof data.error !== "undefined") {
            message = data.error;
        } else if (typeof data.message !== "undefined") {
            message = data.message;
        }
        alert(message); 
}

..可以減少到:

if (data && !data.url) {
    var message = data.error || data.message || 'Error receiving response';
    alert(message)
} 



我根據對象使用兩種不同的方法。

if( !variable ){
  // variable is either
  // 1. empty string i.e. '';
  // 2. Integer 0;
  // 3. undefined;
  // 4. null;
}

有時我不想評估一個空字符串為falsey,那麼我使用這種情況

function invalid( item ){
  return (item === undefined || item === null);
}

if( invalid( variable )){
  // only here if null or undefined;
}

如果你需要相反的話,那麼在第一個實例中!變量變成!!變量,並且在無效函數===成為!=並且函數名稱變為notInvalid。




多一點功能和易於使用:

function exist(obj)
{
    return (typeof obj !== 'undefined');
}

如果存在,函數將返回true ,否則返回false




如果你想要定義的塊做某事然後使用這個

if (typeof variable !== 'undefined') {
    // the variable is defined
}

如果你想要未定義的塊做某事或分配或定義變量,那麼使用這個

if (typeof variable === 'undefined') {
    // the variable is undefined
}



那麼簡單一點:

if(!!variable){
  //the variable is defined
}



要檢查一個變量是否已被聲明/設置,我做了這個骯髒的伎倆。

我還沒有找到一種方法來提取代碼到一個函數,即使與eval

"use strict";

// var someVar;

var declared;
try {
  someVar;
  declared = true;
} catch(e) {
  declared = false;
}

if (declared) {
  console.log("someVar is declared; now has the value: " + someVar);
} else {
  console.log("someVar is not declared");
}



不確定這是否有幫助,我需要檢查是否在運行相關的腳本之前檢測到頁面上定義的Var是否被拾取,下面的工作適合我。

if (window.myvar) { // run scripts here }

這是一個簡單,但罰款一個或喜歡。




我在上面的答案中看不到這個,所以我想在這裡推荐一下。

function isDefined(x) { return !!x }

if( isDefined(x) ) {
    //The variable is defined
}

!x將返回true如果x是nullundefined ,那麼!! x只會返回true,如果f既不是undefined也是null。

我意識到這也是空的情況,但這是公正的警告。