Esiste un operatore "null coalescing" in JavaScript?

Esiste un operatore null coalescente in Javascript?

Ad esempio, in C #, posso fare questo:

String someString = null;
var whatIWant = someString ?? "Cookies!";

La migliore approssimazione che riesco a capire per Javascript sta usando l'operatore condizionale:

var someString = null;
var whatIWant = someString ? someString : 'Cookies!';

Che è una specie di imho malizioso. Posso fare di meglio?

Aggiornare

JavaScript ora supporta l' operatore di coalescenza nullish (??) . Restituisce il suo operando sul lato destro quando il suo operando sul lato sinistro è nullo undefined, e in caso contrario restituisce il suo operando sul lato sinistro.

Si prega di verificare la compatibilità prima di utilizzarlo.

L'equivalente JavaScript dell'operatore di coalescenza null C # ( ??) utilizza un OR logico ( ||):

var whatIWant = someString || "Cookies!";

Ci sono casi (chiariti di seguito) in cui il comportamento non corrisponde a quello di C #, ma questo è il modo generale e conciso di assegnare valori predefiniti / alternativi in ​​JavaScript.

Una precisazione

Indipendentemente dal tipo di primo operando, se si esegue il cast su un valore booleano false, l'assegnazione utilizzerà il secondo operando. Fai attenzione a tutti i casi seguenti:

alert(Boolean(null)); // false
alert(Boolean(undefined)); // false
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("false")); // true -- gotcha! :)

Questo significa:

var whatIWant = null || new ShinyObject(); // is a new shiny object
var whatIWant = undefined || "well defined"; // is "well defined"
var whatIWant = 0 || 42; // is 42
var whatIWant = "" || "a million bucks"; // is "a million bucks"
var whatIWant = "false" || "no way"; // is "false"

function coalesce() {
    var len = arguments.length;
    for (var i=0; i<len; i++) {
        if (arguments[i] !== null && arguments[i] !== undefined) {
            return arguments[i];
        }
    }
    return null;
}

var xyz = {};
xyz.val = coalesce(null, undefined, xyz.val, 5);

// xyz.val now contains 5

questa soluzione funziona come la funzione di coesione SQL, accetta un numero qualsiasi di argomenti e restituisce null se nessuno di essi ha un valore. Si comporta come il C # ?? operatore nel senso che "", false e 0 sono considerati NOT NULL e quindi contano come valori effettivi. Se vieni da uno sfondo .net, questa sarà la soluzione di sentimento più naturale.

Sì, arriverà presto. Vedi la proposta qui e lo stato di attuazione qui .

Sembra così:

x ?? y

Esempio

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false

Se ||come sostituzione di C # ??non è abbastanza buono nel tuo caso, perché ingoia stringhe e zeri vuoti, puoi sempre scrivere la tua funzione:

 function $N(value, ifnull) {
    if (value === null || value === undefined)
      return ifnull;
    return value;
 }

 var whatIWant = $N(someString, 'Cookies!');

Nessuno ha menzionato qui il potenziale per NaN, che - per me - è anche un valore nullo. Quindi, ho pensato di aggiungere i miei due centesimi.

Per il codice dato:

var a,
    b = null,
    c = parseInt('Not a number'),
    d = 0,
    e = '',
    f = 1
;

Se dovessi usare l' ||operatore, otterrai il primo valore non falso:

var result = a || b || c || d || e || f; // result === 1

Se usi il tipico metodo di coalescenza, come pubblicato qui , otterrai c, che ha il valore:NaN

var result = coalesce(a,b,c,d,e,f); // result.toString() === 'NaN'

Nessuno di questi mi sembra giusto. Nel mio piccolo mondo di logica di coesione, che può differire dal tuo mondo, considero indefiniti, null e NaN come tutti "null-ish". Quindi, mi aspetterei di tornare d(zero) dal metodo di coalescenza.

Se il cervello di qualcuno funziona come il mio e si desidera escludere NaN, questo metodo consentirà di:

function coalesce() {
    var i, undefined, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg !== null && arg !== undefined
            && (typeof arg !== 'number' || arg.toString() !== 'NaN') ) {
            return arg;
        }
    }
    return null;
}

Per coloro che desiderano che il codice sia il più breve possibile e non dispiaccia un po 'di chiarezza, è possibile utilizzare anche questo come suggerito da @impinball. Questo sfrutta il fatto che NaN non è mai uguale a NaN. Puoi saperne di più qui: Perché NaN non è uguale a NaN?

function coalesce() {
    var i, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg != null && arg === arg ) { //arg === arg is false for NaN
            return arg;
        }
    }
    return null;
}

attenzione alla definizione specifica di JavaScript di null. ci sono due definizioni per "nessun valore" in javascript. 1. Null: quando una variabile è nulla, significa che non contiene dati al suo interno, ma la variabile è già definita nel codice. come questo:

var myEmptyValue = 1;
myEmptyValue = null;
if ( myEmptyValue === null ) { window.alert('it is null'); }
// alerts

in tal caso, il tipo di variabile è in realtà Object. Provalo.

window.alert(typeof myEmptyValue); // prints Object

2. Non definito: quando una variabile non è stata definita prima nel codice e, come previsto, non contiene alcun valore. come questo:

   if ( myUndefinedValue === undefined ) { window.alert('it is undefined'); }
   // alerts

in tal caso, il tipo di variabile è "non definito".

si noti che se si utilizza l'operatore di confronto per la conversione dei tipi (==), JavaScript agirà allo stesso modo per entrambi questi valori vuoti. per distinguerli, utilizzare sempre l'operatore di confronto di tipo rigoroso (===).

Dopo aver letto i tuoi chiarimenti, la risposta di @Ates Goral ti fornisce istruzioni su come eseguire la stessa operazione che stai eseguendo in C # in JavaScript.

La risposta di @ Gumbo fornisce il modo migliore per verificare la presenza di null; tuttavia, è importante notare la differenza ==rispetto ===a JavaScript, specialmente quando si tratta di problemi di controllo di undefinede / o null.

C'è un ottimo articolo sulla differenza in due termini qui . Fondamentalmente, capisci che se usi ==invece di ===, JavaScript proverà a fondere i valori che stai confrontando e restituirà quale sia il risultato del confronto dopo questa coalescenza.

Si noti che la create-react-appcatena di strumenti di React supporta la coalescenza nulla dalla versione 3.3.0 (rilasciata il 5.12.2019) . Dalle note di rilascio:

Operatori opzionali concatenati e a coalescenza nullo

Ora supportiamo gli operatori opzionali di concatenamento e di coalizione nulli!

// Optional chaining
a?.(); // undefined if `a` is null/undefined
b?.c; // undefined if `b` is null/undefined

// Nullish coalescing
undefined ?? 'some other default'; // result: 'some other default'
null ?? 'some other default'; // result: 'some other default'
'' ?? 'some other default'; // result: ''
0 ?? 300; // result: 0
false ?? true; // result: false

Detto questo, nel caso in cui usi create-react-app3.3.0+, puoi iniziare a utilizzare l'operatore null-coalesce già oggi nelle tue app React.

Sì, e la sua proposta è ora Stage 4 . Ciò significa che la proposta è pronta per essere inclusa nello standard formale ECMAScript. Puoi già utilizzarlo nelle recenti versioni desktop di Chrome, Edge e Firefox, ma dovremo aspettare ancora un po 'prima che questa funzionalità raggiunga la stabilità cross-browser.

Dai un'occhiata al seguente esempio per dimostrare il suo comportamento:

// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = undefined;
const var2 = "fallback value";

const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);

L'esempio precedente equivale a:

const var1 = undefined;
const var2 = "fallback value";

const result = (var1 !== null && var1 !== undefined) ?
    var1 :
    var2;
console.log(`Nullish coalescing results in: ${result}`);

Si noti che coalescenza nullish sarà non minaccia falsy valori del modo in cui l' ||operatore ha fatto (si verifica solo i undefinedo nullvalori), da qui il seguente frammento agirà come segue:

// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = ""; // empty string
const var2 = "fallback value";

const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);

Per gli utenti di TypScript, a partire da TypeScript 3.7 , questa funzione è ora disponibile anche.

Speriamo che sarà presto disponibile in Javascript, poiché è in fase di proposta a partire da aprile 2020. Puoi monitorare lo stato qui per compatibilità e supporto - https://developer.mozilla.org/en-US/docs/Web/ JavaScript / Reference / Operatori / Nullish_coalescing_operator

Per le persone che usano Typescript, è possibile utilizzare l' operatore di coalescenza nullish da Typescript 3.7

Dai documenti -

Puoi pensare a questa funzione - l' ??operatore - come un modo per "ripiegare" su un valore predefinito quando hai a che fare con nullo undefined. Quando scriviamo codice come

let x = foo ?? bar();

questo è un nuovo modo di dire che il valore fooverrà usato quando è "presente"; ma quando è nullo undefined, calcola bar()al suo posto.

Ok una risposta adeguata

Esiste in JavaScript? Sì, lo fa. MA. È attualmente al 2020-02-06 nella fase 3 e non è ancora supportato ovunque.Segui il link nell'URL seguente e vai alle intestazioni "Specifiche" e "Compatibilità del browser" per maggiori informazioni su dove si trova.

Citazione da: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

L'operatore di coalescenza nullish (??) è un operatore logico che restituisce il suo operando sul lato destro quando il suo operando sul lato sinistro è nullo o non definito, e altrimenti restituisce il suo operando sul lato sinistro.

Contrariamente all'operatore logico OR (||), l'operando di sinistra viene restituito se si tratta di un valore errato che non è nullo o non definito. In altre parole, se usi || per fornire un valore predefinito a un'altra variabile foo, è possibile che si verifichino comportamenti imprevisti se si considerano alcuni valori falsi utilizzabili (ad es. '' o 0). Vedi sotto per altri esempi.

Vuoi esempi? Segui il link che ho pubblicato, ha tutto.

Ora ha il pieno supporto nell'ultima versione dei principali browser come Chrome, Edge, Firefox, Safari ecc. Ecco il confronto tra l'operatore null e Nullish Coalescing Operator

const response = {
        settings: {
            nullValue: null,
            height: 400,
            animationDuration: 0,
            headerText: '',
            showSplashScreen: false
        }
    };
    /* OR Operator */
    const undefinedValue = response.settings.undefinedValue || 'Default Value'; // 'Default Value'
    const nullValue = response.settings.nullValue || 'Default Value'; // 'Default Value'
    const headerText = response.settings.headerText || 'Hello, world!'; //  'Hello, world!'
    const animationDuration = response.settings.animationDuration || 300; //  300
    const showSplashScreen = response.settings.showSplashScreen || true; //  true
    /* Nullish Coalescing Operator */
    const undefinedValue = response.settings.undefinedValue ?? 'Default Value'; // 'Default Value'
    const nullValue = response.settings.nullValue ?? ''Default Value'; // 'Default Value'
    const headerText = response.settings.headerText ?? 'Hello, world!'; // ''
    const animationDuration = response.settings.animationDuration ?? 300; // 0
    const showSplashScreen = response.settings.showSplashScreen ?? true; //  false