Ersetzen Sie einen Wert, wenn er in JavaScript null oder undefiniert ist

128

Ich muss den ??C # -Operator auf JavaScript anwenden und weiß nicht wie. Betrachten Sie dies in C #:

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

Jetzt habe ich dies 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 das richtig?

Vielen Dank.

BEARBEITEN: 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 vorher nicht und möchte sie nicht durchlaufen).

Valentin Vasilyev
quelle

Antworten:

271

Hier ist das JavaScript-Äquivalent:

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

Beachten Sie, dass der logische Operator|| keinen booleschen Wert zurückgibt, sondern den ersten Wert, der in true konvertiert werden kann .

Verwenden Sie zusätzlich 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.

Gumbo
quelle
56
Beachten Sie, dass dies nicht funktioniert, wenn 0 ein gültiger Wert von i ist.
jt000
13
Wenn etwas Falsey eine potentiell gültige Eingabe ist ( 0, false, leere Zeichenkette), würde ich so etwas wie dies stattdessen tun: var j = (i === null) ? 10 : i;die nur ersetzen werden null, anstatt alles , was zu falsch ausgewertet werden kann.
DBS
Gibt es dafür ein Äquivalent in Groovy?
user6123723
Wenn dies nicht idefiniert ist, wird ein Fehler ausgegeben. scheint mir so nutzlos .. (?)
phil294
@ phil294 var j = (i != null ? i : 10);sollte funktionieren, da undefinedist ==null, so i != nullist falsefür beide nullund undefined.
ToolmakerSteve
6

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?

Nein; Ein Objektliteral ist, wie der Name schon sagt, ein Objekt und kein Array. Sie können also eine Eigenschaft nicht einfach anhand eines Index abrufen, da es keine bestimmte Reihenfolge ihrer Eigenschaften gibt. Die einzige Möglichkeit, ihre Werte abzurufen, besteht in der Verwendung des spezifischen Namens:

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

Oder indem Sie sie mit der for ... inSchleife durchlaufen :

for(var p in options.filters) {
    var someVar = options.filters[p]; //Returns the property being iterated
}
Alex Rozanski
quelle
1
@LinusGeffarth Beachten Sie, dass diese lustige for inJS-Schleife nur mit Objektliteralen funktioniert! Es schlägt kläglich auf JS-Arrays (gibt Index) und JS Maps (gibt undefined) fehl . Ich hoffe, Sie vergessen das nicht, damit Sie nicht auf eine Debugging-Überraschung warten! xP
varun
4

ES2020 Antwort

Der neue Nullish Coalescing Operator ist endlich für JavaScript verfügbar, obwohl die Browserunterstützung begrenzt ist. Nach Angaben von caniuse werden nur 48,34% der Browser unterstützt (Stand April 2020).

Laut Dokumentation,

Der nullish coalescing operator (??) 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 ansonsten 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 ''if filters[0]oder filters[1]are nulloder haben undefined.

Beachten Sie, dass der nullish coalescing-Operator den Standardwert für andere Arten von Falschwerten wie 0und nicht zurückgibt ''. Wenn Sie alle falschen Werte berücksichtigen möchten, sollten Sie den Operator OR verwenden ||.

gojun
quelle
0

Logische Nullzuweisung, 2020+ Lösung

Derzeit wird den Browsern ein neuer Operator hinzugefügt ??=. Dies entsprichtvalue = value ?? defaultValue .

||=und &&=kommen auch, Links unten.

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

Objekt- / Array-Beispiele

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

Funktionsbeispiel

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 Juli 2020 - .03%

?? = Mozilla-Dokumentation

|| = Mozilla-Dokumentation

&& = Mozilla-Dokumentation

Gibolt
quelle
0

Destrukturierungslösung

Der Inhalt der Fragen hat sich möglicherweise geändert, daher werde ich versuchen, ihn gründlich zu beantworten.

Durch die Destrukturierung können Sie Werte mit Eigenschaften aus allem herausziehen. Sie können auch Standardwerte definieren, wenn null / undefiniert und Aliase benannt sind.

const options = {
    filters : {
        firstName : "abc"
    } 
}

const {filters: {firstName = "John", lastName = "Smith"}} = options

// firstName = "abc"
// lastName = "Smith"

HINWEIS: Kapitalisierung ist wichtig

Wenn Sie mit einem Array arbeiten, gehen Sie wie folgt vor.

In diesem Fall wird der Name aus jedem Objekt im Array extrahiert und mit einem eigenen Alias ​​versehen. Da das Objekt möglicherweise nicht vorhanden ist, = {}wurde es ebenfalls hinzugefügt.

const options = {
    filters: [{
        name: "abc",
        value: "lots"
    }]
}

const {filters:[{name : filter1 = "John"} = {}, {name : filter2 = "Smith"} = {}]} = options

// filter1 = "abc"
// filter2 = "Smith"

Detaillierteres Tutorial

Browser-Unterstützung 92% Juli 2020

Gibolt
quelle