JS / ES6: Zerstörung von undefinierten

73

Ich verwende eine solche Destrukturierung:

const { item } = content
console.log(item)

Aber wie soll ich damit umgehen content === undefined- was wird einen Fehler auslösen?

Der "alte" Weg würde so aussehen:

const item = content && content.item

Also, wenn contentundefiniert ist -> itemwird auch undefiniert sein.

Kann ich mit Destrukturierung etwas Ähnliches tun?

javascript ecmascript-6 user3142695
quelle
Siehe auch JS-Destrukturierung. Wie mit null oder undefinierten Werten zu behandeln , welche Argumente auf dieser Weise bedeutet das vorbei?
Gast271314

Antworten:

138

Sie können die Kurzschlussauswertung verwenden , um einen Standardwert contentanzugeben, wenn es sich normalerweise undefinedoder nullin diesem Fall um einen falschen Wert handelt.

const content = undefined
const { item } = content || {}
console.log(item)                       // undefined
Erweitern Sie das Snippet

Eine weniger idiomatische Methode ( siehe diesen Kommentar ) besteht darin, den Inhalt vor der Zerstörung in ein Objekt zu verteilen, da nullund undefinedsWerte ignoriert werden .

const content = undefined
const { item } = { ...content }
console.log(item) // undefined
Erweitern Sie das Snippet

Wenn Sie Funktionsparameter destrukturieren, können Sie einen Standardwert angeben ( = {}im Beispiel).

Hinweis: Der Standardwert wird nur angewendet, wenn der destrukturierte Parameter lautet. Dies undefinedbedeutet, dass Destrukturierungswerte nulleinen Fehler auslösen .

const getItem = ({ item } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem())                  // undefined

try {
  getItem(null)
} catch(e) {
  console.log(e.message)                // Error - Cannot destructure property `item` of 'undefined' or 'null'.
}
Erweitern Sie das Snippet

Oder legen Sie einen Standardwert für die itemEigenschaft fest, wenn das Eingabeobjekt die Eigenschaft nicht enthält

const getItem = ({ item = "default" } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem({ foo: "bar" }))    // "default"
Erweitern Sie das Snippet

Ori Drori
quelle
" Sie können den Inhalt auch in ein Objekt verbreiten, bevor Sie es zerstören " - dies scheint mir sowohl sehr ineffizient als auch unidiomatisch zu sein
Bergi
@Bergi - Ich werde nicht über die Effizienz streiten, da es davon abhängt, was Sie damit machen. for loop ist effizienter als forEach, aber wir verwenden letzteres immer noch, es sei denn, wir benötigen jede Unze Leistung. Warum ist es unidiomaticIhrer Meinung nach?
Ori Drori
1
(Wir verwenden, for ofweil es besser liest und besser funktioniert als .forEach, aber sie haben die gleiche Geschwindigkeit in heutigen Motoren ). Es fühlt sich unidiomatisch an, weil es in meinen Augen nur… komisch aussieht. { ...content }ist als Redewendung für "eine flache Kopie von content" erstellen , nicht für "... oder ein leeres Objekt, wenn es undefiniert ist" bekannt.
Bergi
2
Ich betrachte es als eine mögliche Verwendung für die Verbreitung. Es ist weniger lesbar als ein Kurzschluss, aber es ist ein weiteres Werkzeug in der Toolbox.
Ori Drori
6 
const { item } = Object(content)
Вадик Орлов
quelle
-1

Die akzeptierte Antwort funktioniert nicht für wirklich undefinierte Werte, die nicht von festgelegt wurden const content = undefined. In solchen Fällen funktioniert dies:

const { item } = (typeof content !== 'undefined' && content) || {}
console.log(item)
Nir O.
quelle
6
Was meinst du mit "wirklich undefinierten Werten"?
Bergi
@Bergi Ich glaube, sie sprechen von nicht deklarierten Variablen im Vergleich zu deklarierten Variablen mit dem Wert von undefined. Das Testen des obigen Codes in einer Entwicklungskonsole, die contentnicht deklariert ist oder sich im Gültigkeitsbereich befindet, funktioniert, aber das Ersetzen der Zuweisung durch content || {}eine Uncaught ReferenceError: content is not definedAusnahme wird ausgelöst .
Unbekannt Unbekannt