Verwendung des optionalen Verkettungsoperators von JS

Vorwort

Der optionale Verkettungsoperator (?.) ermöglicht das Lesen des Werts einer Eigenschaft am Ende einer Kette, ohne dass die Gültigkeit jeder Referenz in der Kette explizit überprüft werden muss. Der Unterschied besteht darin, dass kein Fehler auftritt, wenn die Referenz null oder undefiniert ist, und der Kurzschluss-Rückgabewert des Ausdrucks undefiniert ist. Bei Verwendung mit einem Funktionsaufruf wird „undefined“ zurückgegeben, wenn die angegebene Funktion nicht existiert.

Der optionale Verkettungsoperator verkürzt und prägnanter die Ausdruckswurzeln beim Versuch, auf möglicherweise nicht vorhandene Objekteigenschaften zuzugreifen. Der optionale Verkettungsoperator ist auch beim Untersuchen des Inhalts eines Objekts hilfreich, wenn Sie nicht sicher sind, welche Eigenschaften vorhanden sein müssen.

Optionaler Verkettungsoperator (?.)

Grammatik

obj?.prop
obj?.[Ausdruck]
Funktion?.(Argumente)

beschreiben

Der optionale Verkettungsoperator bietet eine Möglichkeit, den Zugriff auf den Wert eines verbundenen Objekts zu vereinfachen, wenn die Referenz oder Funktion, die durch das verbundene Objekt übergeben wird, undefiniert oder null sein kann.
Betrachten Sie beispielsweise ein Objekt obj, das eine verschachtelte Struktur hat. Ohne optionale Verkettung müssen Sie beim Nachschlagen einer tief verschachtelten Untereigenschaft die Verweise zwischen ihnen überprüfen, zum Beispiel:

let nestedProp = obj.erstes && obj.erstes.zweites

Um Fehler zu vermeiden, stellen Sie vor dem Zugriff auf obj.first.second sicher, dass der Wert von obj.first weder null noch undefiniert ist. Wenn Sie einfach auf obj.first.second zugreifen, ohne obj.first zu überprüfen, wird möglicherweise ein Fehler ausgegeben.
Mit dem optionalen Verkettungsoperator (?.) müssen wir den Status von obj.first nicht mehr explizit prüfen, bevor wir auf obj.first.second zugreifen und dann eine Kurzschlussauswertung verwenden, um das Endergebnis zu erhalten:

let nestedProp = obj.erste?.zweite

Durch die Verwendung des ?.-Operators anstelle des .-Operators überprüft JavaScript implizit, ob obj.first weder null noch undefiniert ist, bevor versucht wird, auf obj.first.second zuzugreifen. Wenn obj.first null oder undefiniert ist, wird der Ausdruck die Berechnung kurzschließen und direkt „undefined“ zurückgeben.

Dies entspricht dem folgenden Ausdruck, allerdings wird dabei keine temporäre Variable erstellt:

let temp = obj.first
let nestedProp = ((temp === null || temp === undefiniert) ? undefiniert : temp.Sekunde) 

verwenden

Wir können verkettbare Operatoren mit dem Babel-Compiler verwenden.

babel

Garn hinzufügen @babel/plugin-proposal-optional-chaining --dev

Fügen Sie eine .babelrc-Datei hinzu

{
  "Plugins": ["@babel/Plugin-Vorschlag-optional-Chaining"]
}

Verwendung in Create-React-App

Standardmäßig erlaubt create-react-app keine Änderung der Babel-Konfiguration. Hier müssen wir zwei zusätzliche Module installieren, um eine Ergänzung der Standardkonfiguration zu ermöglichen.

Garn hinzufügen anpassen-cra reagieren-app-rewired --dev

Fügen Sie die Datei config-overrides.js hinzu

const { useBabelRc, override } = erfordern('customize-cra');
module.exports = überschreiben(useBabelRc());

Ändern Sie package.json

"Skripte": {
  "Start": "React-App-Rewired-Start",
  "Build": "React-App-Rewired-Build",
  „Test“: „React-App-Rewired-Test --env=jsdom“
}

eslint

Nach der Installation des Babel-Compilers können Sie den ?.-Operator verwenden. Wenn Sie jedoch eslint verwenden, müssen Sie babel-eslint installieren, um diese neue Syntax zu erkennen.

Garn hinzufügen babel-eslint --dev

Fügen Sie die .eslintrc-Datei hinzu

{
  "Parser": "babel-eslint",
  "Regeln": {
    "streng": 0
  }
}

Verwendung in vscode

Der JS-Validator von vscode erkennt derzeit den ?.-Operator nicht, daher wird eine Fehlerwarnung ausgegeben:

So beheben Sie die Fehlerwarnung:

Installieren Sie die vscode-Erweiterung ESLint, suchen und installieren Sie ESLint im Erweiterungsspeicher.

Ändern Sie die vscode-Konfiguration (.vscode/settings.json):

{
  "eslint.alwaysShowStatus": wahr,
  "eslint.autoFixOnSave": wahr,
  "javascript.validate.enable": false, // Hauptsächlich dies, schalte den JS-Validator von vscode aus "[javascript]": {
    "editor.formatOnSave": falsch,
  },
  "[javascriptreact]": {
  "editor.formatOnSave": falsch,
  },
}

Quelle: Optionaler Verkettungsoperator

Dies ist das Ende dieses Artikels über die Verwendung des optionalen Verkettungsoperators von js. Weitere relevante Inhalte zum optionalen Verkettungsoperator von js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!