Come verificare la presenza di una variabile non definita o nulla in JavaScript?

Usiamo frequentemente il seguente modello di codice nel nostro codice JavaScript

if (typeof(some_variable) != 'undefined' && some_variable != null)
{
    // Do something with some_variable
}

Esiste un modo meno dettagliato per verificare che abbia lo stesso effetto?

Secondo alcuni forum e pubblicazioni che dicono semplicemente quanto segue dovrebbe avere lo stesso effetto.

if (some_variable)
{
    // Do something with some_variable
}

Sfortunatamente, Firebug valuta un'istruzione come errore in fase di esecuzione quando some_variablenon è definita, mentre la prima va bene per questo. È solo un comportamento (indesiderato) di Firebug o c'è davvero qualche differenza tra questi due modi?

Devi distinguere tra i casi:

1. Le variabili possono essere undefinedo non dichiarate . Riceverai un errore se accedi a una variabile non dichiarata in qualsiasi contesto diverso da typeof.

if(typeof someUndeclaredVar == whatever) // works
if(someUndeclaredVar) // throws error

Una variabile che è stata dichiarata ma non inizializzata è undefined.

let foo;
if (foo) //evaluates to false because foo === undefined

2. Proprietà indefinite , come someExistingObj.someUndefProperty. Una proprietà non definita non produce un errore e semplicemente restituisce undefined, che, quando convertita in un valore booleano, viene valutata false. Quindi, se non ti interessa 0e false, l'utilizzo if(obj.undefProp)è ok. C'è un linguaggio comune basato su questo fatto:

   value = obj.prop || defaultValue

   che significa "se objha la proprietà prop, assegnala a value, altrimenti assegna il valore predefinito defautValue".

   Alcune persone considerano questo comportamento confuso, sostenendo che porta a errori difficili da trovare e raccomandano invece di utilizzare l' inoperatore

   value = ('prop' in obj) ? obj.prop : defaultValue

Penso che il modo più efficace per verificare "il valore sia nullo undefined" sia

if ( some_variable == null ){
  // some_variable is either null or undefined
}

Quindi queste due linee sono equivalenti:

if ( typeof(some_variable) !== "undefined" && some_variable !== null ) {}
if ( some_variable != null ) {}

Nota 1

Come menzionato nella domanda, la breve variante richiede che some_variablesia stata dichiarata, altrimenti verrà lanciato un ReferenceError. Tuttavia, in molti casi d'uso puoi presumere che sia sicuro:

verifica argomenti opzionali:

function(foo){
    if( foo == null ) {...}

controlla le proprietà di un oggetto esistente

if(my_obj.foo == null) {...}

D'altra parte typeofpuò gestire variabili globali non dichiarate (semplicemente restituisce undefined). Tuttavia, questi casi dovrebbero essere ridotti al minimo per buoni motivi, come spiegato da Alsciende.

Nota 2

Questa variante, anche più breve, non è equivalente:

if ( !some_variable ) {
  // some_variable is either null, undefined, 0, NaN, false, or an empty string
}

così

if ( some_variable ) {
  // we don't get here if some_variable is null, undefined, 0, NaN, false, or ""
}

Nota 3

In generale si consiglia di utilizzare ===anziché ==. La soluzione proposta è un'eccezione a questa regola. Il checker di sintassi JSHint fornisce anche l' eqnullopzione per questo motivo.

Dalla guida di stile jQuery :

Controlli rigorosi sull'uguaglianza (===) dovrebbero essere usati a favore di ==. L'unica eccezione riguarda il controllo di undefined e null mediante null.

// Check for both undefined and null values, for some important reason. 
undefOrNull == null;

Il controllo di null con l'uguaglianza normale restituirà anche true per non definito.

if (window.variable == null) alert('variable is null or undefined');

Nei più recenti standard JavaScript come ES5 ed ES6 puoi semplicemente dire

> Boolean(0) //false
> Boolean(null)  //false
> Boolean(undefined) //false

tutti restituiscono false, che è simile al controllo di Python delle variabili vuote. Quindi, se si desidera scrivere una logica condizionale attorno a una variabile, basta dire

if (Boolean(myvar)){
   // Do something
}

qui "null" o "stringa vuota" o "non definito" verranno gestiti in modo efficiente.

Se si tenta di fare riferimento a una variabile non dichiarata, verrà generato un errore in tutte le implementazioni JavaScript.

Le proprietà degli oggetti non sono soggette alle stesse condizioni. Se una proprietà dell'oggetto non è stata definita, non verrà generato un errore se si tenta di accedervi. Quindi in questa situazione potresti accorciare:

 if (typeof(myObj.some_property) != "undefined" && myObj.some_property != null)

per

if (myObj.some_property != null)

Tenendo presente questo e il fatto che le variabili globali sono accessibili come proprietà dell'oggetto globale ( windownel caso di un browser), è possibile utilizzare quanto segue per le variabili globali:

if (window.some_variable != null) {
    // Do something with some_variable
}

Negli ambiti locali, è sempre utile assicurarsi che le variabili siano dichiarate nella parte superiore del blocco di codice, ciò consentirà di risparmiare sugli usi ricorrenti di typeof.

In primo luogo devi essere molto chiaro su ciò che test. JavaScript ha ogni sorta di conversioni implicite per farti inciampare e due diversi tipi di comparatore di uguaglianza: ==e ===.

Una funzione test(val)che verifica nullo undefineddovrebbe avere le seguenti caratteristiche:

 test(null)         => true
 test(undefined)    => true
 test(0)            => false
 test(1)            => false
 test(true)         => false
 test(false)        => false
 test('s')          => false
 test([])           => false

Vediamo quali idee qui effettivamente superano il nostro test.

Questi lavori:

val == null
val === null || val === undefined
typeof(val) == 'undefined' || val == null
typeof(val) === 'undefined' || val === null

Questi non funzionano:

typeof(val) === 'undefined'
!!val

Ho creato una voce jsperf per confrontare la correttezza e le prestazioni di questi approcci. I risultati non sono per il momento conclusivi in ​​quanto non vi sono state corse sufficienti su diversi browser / piattaforme. Ti preghiamo di dedicare un minuto per eseguire il test sul tuo computer!

Allo stato attuale, sembra che il semplice val == nulltest dia le migliori prestazioni. È anche praticamente il più corto. Il test può essere negato val != nullse si desidera il complemento.

questo è l'unico caso in cui ==dovrebbe essere usato:

if (val == null) console.log('val is null or undefined')

Poiché non esiste un'unica risposta completa e corretta, cercherò di riassumere:

In generale, l'espressione:

if (typeof(variable) != "undefined" && variable != null)

non può essere semplificato, in quanto variablepotrebbe non essere dichiarato in modo tale che omettendo il typeof(variable) != "undefined"si tradurrebbe in ReferenceError. Ma puoi semplificare l'espressione in base al contesto :

Se variableè globale , puoi semplificare a:

if (window.variable != null)

Se è locale , puoi probabilmente evitare situazioni in cui questa variabile non è dichiarata e anche semplificare per:

if (variable != null)

Se si tratta di proprietà dell'oggetto , non devi preoccuparti di ReferenceError:

if (obj.property != null)

Puoi semplicemente verificare se la variabile ha un valore oppure no. Senso,

if( myVariable ) {
//mayVariable is not :
//null
//undefined
//NaN
//empty string ("")
//0
//false

}

Se non sai se esiste una variabile (ciò significa che se è stata dichiarata) dovresti verificare con l'operatore typeof. per esempio

if( typeof myVariable !== 'undefined' ) {
    // myVariable will get resolved and it is defined
}

Ho fatto questo usando questo metodo

salva l'id in qualche variabile

var someVariable = document.getElementById("someId");

quindi utilizzare if condition

if(someVariable === ""){
 //logic
} else if(someVariable !== ""){
 //logic
}

Questo è un esempio di un'occasione molto rara in cui si consiglia di utilizzare ==invece di ===. L'espressione somevar == nullrestituirà true per undefinede null, ma false per tutto il resto (un errore se la variabile non è dichiarata).

Utilizzando il !=pulsante capovolgi il risultato, come previsto.

Gli editor moderni non avvertiranno l'utilizzo ==o l' !=operatore con null, poiché questo è quasi sempre il comportamento desiderato.

Confronti più comuni:

undeffinedVar == null     // true
obj.undefinedProp == null // true
null == null              // true
0 == null                 // false
'0' == null               // false
'' == null                // false

Prova tu stesso:

let undefinedVar;
console.table([
    { test : undefinedVar,     result: undefinedVar     == null },
    { test : {}.undefinedProp, result: {}.undefinedProp == null },
    { test : null,             result: null             == null },
    { test : false,            result: false            == null },
    { test : 0,                result: 0                == null },
    { test : '',               result: ''               == null },
    { test : '0',              result: '0'              == null },
]);

Come menzionato in una delle risposte, puoi essere fortunato se stai parlando di una variabile che ha un ambito globale. Come forse saprai, le variabili definite a livello globale tendono ad essere aggiunte all'oggetto windows. Puoi trarre vantaggio da questo fatto, quindi supponiamo che tu stia accedendo a una variabile chiamata bleh, basta usare il doppio operatore invertito (!!)

!!window['bleh'];

Ciò restituirebbe un falso mentre bleh non è stato dichiarato E assegnato un valore.

ecco un altro modo di usare il metodo include () :

[undefined, null].includes(value)

qualunque cosa yyy sia indefinita o nulla, tornerà vera

if (typeof yyy == 'undefined' || !yyy) {
    console.log('yes');
} else {
    console.log('no');
}

sì

if (!(typeof yyy == 'undefined' || !yyy)) {
    console.log('yes');
} else {
    console.log('no');
}

no

Apri gli strumenti per sviluppatori nel tuo browser e prova semplicemente il codice mostrato nell'immagine qui sotto.

Per capire, analizziamo quale sarà il valore restituito dal motore Javascript durante la conversione di undefined, null e '' (Anche una stringa vuota). Puoi controllare direttamente lo stesso sulla tua console di sviluppo.

Puoi vedere che tutti si stanno convertendo in false, significa che tutti e tre stanno assumendo "mancanza di esistenza" da JavaScript. Quindi non è necessario controllare esplicitamente tutti e tre nel codice come di seguito.

if (a === undefined || a === null || a==='') {
    console.log("Nothing");
} else {
    console.log("Something");
}

Voglio anche sottolineare un'altra cosa.

Quale sarà il risultato di Boolean (0)?

Certamente falso. Ciò creerà un errore nel codice quando 0 è un valore valido nel risultato previsto. Quindi assicurati di controllare questo quando scrivi il codice.

Simile a quello che hai, potresti fare qualcosa del genere

if (some_variable === undefined || some_variable === null) { do stuff }

Testare nullity ( if (value == null)) o non nullity ( if (value != null)) è meno dettagliato rispetto al test dello stato di definizione di una variabile.

Inoltre, il test if (value)(o if( obj.property)) per garantire l'esistenza della variabile (o della proprietà dell'oggetto) ha esito negativo se è definito con un falsevalore booleano . Caveat emptor :)

Entrambi i valori possono essere facilmente distinti utilizzando l'operatore di confronto rigoroso:

Esempio di lavoro su:

http://www.thesstech.com/tryme?filename=nullandundefined

Codice di esempio:

function compare(){
    var a = null; //variable assigned null value
    var b;  // undefined
    if (a === b){
        document.write("a and b have same datatype.");
    }
    else{
        document.write("a and b have different datatype.");
    }   
}

Se lo scopo dell'istruzione if è verificare nullo undefinedvalori prima di assegnare un valore a una variabile, è possibile utilizzare l' operatore Nullish Coalescing , è finalmente disponibile su JavaScript, sebbene il supporto del browser sia limitato. Secondo i dati di caniuse , solo il 48,34% dei browser è supportato (ad aprile 2020).

const a = some_variable ?? '';

Ciò assicurerà che la variabile verrà assegnata a una stringa vuota (o qualsiasi altro valore predefinito) se some_variableè nullo undefined.

Questo operatore è più adatto al tuo caso d'uso, in quanto non restituisce il valore predefinito per altri tipi di valori falsi come 0e ''.

È necessario definire una funzione di questo modulo:

validate = function(some_variable){
    return(typeof(some_variable) != 'undefined' && some_variable != null)
}

In ES5 o ES6 se è necessario controllarlo più volte, è possibile:

const excluded = [null, undefined, ''];

if (!exluded.includes(varToCheck) {
  // it will bee not null, not undefined and not void string
}

Con Ramda, puoi semplicemente fare R.isNil(yourValue) Lodash e altre librerie di helper hanno la stessa funzione.