Ersetzen eines Wertes, wenn dieser null oder undefiniert ist, in JavaScript

Question

Ich habe eine Anforderung zur Anwendung der ?? C#-Operator zu JavaScript und ich weiß nicht, wie. Betrachten Sie dies in C#:

int i?=null;
int j=i ?? 10;//j is now 10

Jetzt habe ich das in JavaScript eingerichtet:

var options={
       filters:{
          firstName:'abc'
       } 
    };
var filter=options.filters[0]||'';//should get 'abc' here, it doesn't happen
var filter2=options.filters[1]||'';//should get empty string here, because there is only one filter

Wie mache ich es richtig?

Danke.

EDIT: Ich habe die Hälfte des Problems entdeckt: Ich kann die 'indexer'-Notation nicht für Objekte verwenden ( my_object[0] ). Gibt es eine Möglichkeit, dies zu umgehen? (Ich kenne die Namen der Filtereigenschaften nicht im Voraus und möchte sie nicht durchgehen).

Answer 1

Hier ist das JavaScript-Äquivalent:

var i = null;
var j = i || 10; //j is now 10

Beachten Sie, dass die logischer Operator || gibt keinen booleschen Wert zurück, sondern den ersten Wert, der sich in wahr .

Verwenden Sie außerdem ein Array von Objekten anstelle eines einzelnen Objekts:

var options = {
    filters: [
        {
            name: 'firstName',
            value: 'abc'
        }
    ]
};
var filter  = options.filters[0] || '';  // is {name:'firstName', value:'abc'}
var filter2 = options.filters[1] || '';  // is ''

Darauf kann per Index zugegriffen werden.

Answer 2

ES2020 Antwort

Die neue Nullish Koaleszenz Operator, ist endlich auch für JavaScript verfügbar. Beachten Sie jedoch die Browserunterstützung . Möglicherweise müssen Sie einen JavaScript-Compiler wie Babel um sie in etwas Abwärtskompatibleres umzuwandeln.

In der Dokumentation heißt es dazu,

Der Koaleszenzoperator Null (??) ist ein logischer Operator, der seinen Operanden auf der rechten Seite zurückgibt, wenn sein Operand auf der linken Seite null oder undefiniert ist, und andernfalls seinen Operanden auf der linken Seite zurückgibt.

const options={
  filters:{
    firstName:'abc'
  } 
};
const filter = options.filters[0] ?? '';
const filter2 = options.filters[1] ?? '';

Dadurch wird sichergestellt, dass beide Variablen einen Fallback-Wert von '' wenn filters[0] o filters[1] sind null , oder undefined .

Beachten Sie, dass der Koaleszenzoperator nullish nicht den Standardwert für andere Arten von Falsy-Werten zurückgibt, wie z. B. 0 y '' . Wenn Sie alle falschen Werte berücksichtigen wollen, sollten Sie den Operator OR verwenden || .

Answer 3

Logische Nullzuweisung, Lösung 2020+

Es wurde ein neuer Operator hinzugefügt, ??= . Dies ist gleichbedeutend mit value = value ?? defaultValue .

||= y &&= sind ähnlich, Links unten.

Dies prüft, ob die linke Seite undefiniert oder null ist und schließt kurz, wenn sie bereits definiert ist. Wenn nicht, wird der linken Seite 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

// Equivalent to
a = a ?? true

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" }

Funktionales Beispiel

function config(options) {
    options.duration ??= 100
    options.speed ??= 25
    return options
}

config({ duration: 555 })   // { duration: 555, speed: 25 }
config({})                  // { duration: 100, speed: 25 }
config({ duration: null })  // { duration: 100, speed: 25 }

??= Browser-Unterstützung September 2021 - 90%

Mozilla-Dokumentation

||= Mozilla-Dokumentation

&&= Mozilla-Dokumentation

Answer 4

TLDR:

int j=i ?? 10; ist völlig in Ordnung, auch in Javascript zu verwenden. Einfach ersetzen int avec let .

?? gegen ||

?? sollte vorgezogen werden gegenüber || denn sie prüft nur für Nullen und Undefinierte .

Die folgenden Ausdrücke sind alle wahr:

(null || 'x') === 'x' ;
(undefined || 'x') === 'x' ;
//Most of the times you don't want the result below
('' || 'x') === 'x'  ;
(0 || 'x') === 'x' ;
(false || 'x') === 'x' ;
//-----

//Using ?? is preferred
(null ?? 'x') === 'x' ;
(undefined ?? 'x') === 'x' ;
//?? works only for null and undefined, which is in general safer
('' ?? 'x') === '' ;
(0 ?? 'x') === 0 ;
(false ?? 'x') === false ;

Sternchen: Siehe Browser-Kompatibilität und wenn Sie diese anderen Browser wirklich unterstützen müssen, verwenden Sie babel .

Answer 5

Ich habe die Hälfte des Problems entdeckt: Ich kann die Notation "indexer" nicht für Objekte verwenden (my_object[0]). Gibt es eine Möglichkeit, dies zu umgehen?

Nein; ein Objektliteral ist, wie der Name schon sagt, ein Objekt und kein Array, so dass Sie eine Eigenschaft nicht einfach anhand eines Indexes abrufen können, da es keine bestimmte Reihenfolge der Eigenschaften gibt. Die einzige Möglichkeit, ihre Werte abzurufen, besteht darin, den spezifischen Namen zu verwenden:

var someVar = options.filters.firstName; //Returns 'abc'

Oder durch Iteration über sie mit der Funktion for ... in Schleife:

for(var p in options.filters) {
    var someVar = options.filters[p]; //Returns the property being iterated
}