Gibt es einen "Null-Koaleszenz"-Operator in JavaScript?

Question

Gibt es einen Null-Koaleszenz-Operator in Javascript?

In C# kann ich zum Beispiel Folgendes tun:

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

Die beste Annäherung, die ich für Javascript herausfinden kann, ist die Verwendung des Bedingungsoperators:

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

Was IMHO ziemlich eklig ist. Kann ich es besser machen?

Answer 1

Logische Nullzuweisung, Lösung 2020+

Ein neuer Operator wird derzeit zu den Browsern hinzugefügt, ??= . Dies kombiniert den Null-Koaleszenz-Operator ?? mit dem Zuweisungsoperator = .

HINWEIS: Dies ist in öffentlichen Browser-Versionen nicht üblich dennoch . Wird aktualisiert, wenn sich die Verfügbarkeit ändert.

??= prüft, ob die Variable undefiniert oder null ist, und schließt sie kurz, wenn sie bereits definiert ist. Ist dies nicht der Fall, wird der Variable der Wert der rechten Seite zugewiesen.

Grundlegende Beispiele

let a          // undefined
let b = null
let c = false

a ??= true  // true
b ??= true  // true
c ??= true  // false

Beispiele für Objekte/Arrays

let x = ["foo"]
let y = { foo: "fizz" }

x[0] ??= "bar"  // "foo"
x[1] ??= "bar"  // "bar"

y.foo ??= "buzz"  // "fizz"
y.bar ??= "buzz"  // "buzz"

x  // Array [ "foo", "bar" ]
y  // Object { foo: "fizz", bar: "buzz" }

Browser-Unterstützung Jan '22 - 89%

Mozilla-Dokumentation

Answer 2

?? gegen || gegen &&

In keiner der anderen Antworten werden alle drei Punkte miteinander verglichen. Da Der Kommentar von Justin Johnson so viele Stimmen hat, und da doppeltes Fragezeichen vs. && in Javascript als Duplikat dieses Artikels markiert wurde, ist es sinnvoll, die && in einer Antwort.

Zunächst in Worten, inspiriert durch den Kommentar von Justin Johnson:

• || gibt den ersten "wahren" Wert zurück, sonst den letzten Wert, was auch immer das ist.

• && gibt den ersten "falschen" Wert zurück, sonst den letzten Wert, was auch immer das ist.

• ?? gibt den ersten nicht-nullen, nicht-undefinierten Wert zurück, sonst den letzten Wert, was auch immer das ist.

Dann wird es im Live-Code demonstriert:

let F1,
    F2 = null,
    F3 = 0,
    F4 = '',
    F5 = parseInt('Not a number (NaN)'),
    T1 = 3,
    T2 = 8

console.log( F1 || F2 || F3 || F4 || F5 || T1 || T2 ) // 3 (T1)
console.log( F1 || F2 || F3 || F4 || F5 )             // NaN (F5)

console.log( T1 && T2 && F1 && F2 && F3 && F4 && F5 ) // undefined (F1)
console.log( T1 && T2 )                               // 8 (T2)

console.log( F1 ?? F2 ?? F3 ?? F4 ?? F5 ?? T1 )       // 0 (F3)
console.log( F1 ?? F2)                                // null (F2)

Answer 3

Ja, und seine Vorschlag es Stufe 4 jetzt. Das bedeutet, dass der Vorschlag zur Aufnahme in den offiziellen ECMAScript-Standard bereit ist. Sie können es bereits in den aktuellen Desktop-Versionen von Chrome, Edge und Firefox verwenden, aber wir müssen noch ein wenig warten, bis diese Funktion browserübergreifende Stabilität erreicht.

Das folgende Beispiel veranschaulicht dieses Verhalten:

// 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}`);

Das vorherige Beispiel ist gleichbedeutend mit:

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

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

なお Nullische Verschmelzung wird no Bedrohung falsy Werte, wie die || Operator getan hat (er prüft nur auf undefined o null Werte), daher wird der folgende Ausschnitt wie folgt funktionieren:

// 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}`);

---

Für TypesScript-Anwender, die mit der TypeScript 3.7 ist diese Funktion jetzt ebenfalls verfügbar.

Answer 4

Achten Sie auf die JavaScript-spezifische Definition von null. Es gibt zwei Definitionen für "kein Wert" in JavaScript. 1. Null: Wenn eine Variable null ist, bedeutet das, dass sie keine Daten enthält, aber die Variable ist bereits im Code definiert. z.B. so:

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

In diesem Fall ist der Typ Ihrer Variablen tatsächlich Object. testen Sie es.

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

2. Undefiniert: wenn eine Variable noch nicht im Code definiert wurde und erwartungsgemäß keinen Wert enthält, z. B. so:

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

Wenn dies der Fall ist, ist der Typ Ihrer Variablen "undefiniert".

Beachten Sie, dass JavaScript bei Verwendung des typkonvertierenden Vergleichsoperators (==) für beide leeren Werte gleich agiert. Um zwischen ihnen zu unterscheiden, verwenden Sie immer den typstrengen Vergleichsoperator (===).

Answer 5

Beachten Sie, dass Reacts create-react-app Werkzeugkette unterstützt die Null-Koaleszenz seit Version 3.3.0 (veröffentlicht am 5.12.2019) . Aus den Versionshinweisen:

Optionale Verkettungs- und Nullish Coalescing-Operatoren

Wir unterstützen jetzt die optionalen Verkettungs- und Nullish-Coalescing-Operatoren!

// 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

Das heißt, falls Sie die create-react-app 3.3.0+ können Sie den Null-Koaleszenz-Operator bereits heute in Ihren React-Anwendungen verwenden.