Optionale Verkettung, Vereinigung mit Null und wie sie unsere Herangehensweise beim Schreiben von Code ändern

Foto von Miguel Á. Padriñán .

Guten Tag, Freunde!

Ich präsentiere Ihnen die Übersetzung von Sam Sedighians Artikel "Optional Chaining, Null Coalescing und wie sie die Art und Weise verändern, wie Sie Code schreiben" .

Optionale Verkettung, Vereinigung mit Null und Änderung der Vorgehensweise beim Schreiben von Code

Ein sicherer und ergonomischer Weg, um auf das Objekt zuzugreifen.

Wenn Sie TypeScript-Versionen befolgen, wissen Sie, dass in TypeScript 3.7 optionales Verketten und Null-Coalescing eingeführt wurden. Diese Funktionen sind standardmäßig in Babel 7.8.0 enthalten. Dies ist einer der Hauptkonkurrenten für die Rolle von JavaScript-Funktionen. Derzeit befinden sie sich in Phase 4 bzw. 3 (am 23. Januar wurde der Standard ECMAScript 2020 verabschiedet, in dem es eine optionale Kette, die Integration mit null und einige interessante Dinge gibt; mir ist bekannt, dass kürzlich ein Artikel über Habré erschienen ist Eine Übersetzung der im JS ES2020 eingeführten Funktionen schadet meiner Meinung nach jedoch ein paar zusätzlichen Beispielen nicht - ca.

Optionale Verkettung

Sehr oft müssen wir auf die tief eingebettete Eigenschaft eines Objekts zugreifen. Wenn Sie 100 Zeilen nicht sehr hochwertigen Codes geschrieben haben, kann dies zu Uncaught TypeError führen.

const data = {} data.user.id // Uncaught TypeError: Cannot read property 'id' of undefined //           -   

Für weitere Beispiele verwenden wir diesen Pseudocode (falsche Serverantwort):

 { 'url': 'https://api.github.com/repos/sedighian/Hello-World/pulls/12', 'number': 12, 'state': 'open', 'title': 'Amazing new feature', 'user': { 'login': 'sedighian', 'id': 123234 }, 'labels': [{ 'id': 208045946, 'name': 'bug', }] } 

Um nicht abgefangenen TypeError zu vermeiden und den ID-Wert zu erhalten, müssen wir "tanzen". Der Ansatz, den wir zuvor verwendet haben, bestand darin, die Wahrheit des Objekts auf jeder Verschachtelungsebene zu überprüfen. Diese Vorlage ähnelt eher einer bedingten Anweisung, die einen Booleschen Wert zurückgibt, als eine Möglichkeit, auf eine Eigenschaft zuzugreifen. Dies ist jedoch der sauberste und sicherste Weg, den wir bisher gefunden haben:

 const userId = data && data.user && data.user.id //     const label = data && data.labels && data.labels[0] const someFuncRes = navigator && navigator.serviceWorker && window.serviceWorker() 

Oder, wenn Sie es vorziehen, zu destrukturieren:

 const { user: { id } = {} } = data || {} //        const { user } = data || {} const { id } = user || {} 

Eine ergonomischere Möglichkeit ist die Verwendung von Lodash oder Ember:

 // lodash import _ from 'lodash' _.get(data, 'user.id') // ember import { get } from '@ember/object' get(data, 'user.id') 

Wie machen wir dasselbe mit der optionalen Kette?

 const userId = data?.user?.id //     const label = data?.labels?.[0] const someFuncRes = someFunc?.() 

Kombinieren mit null (Null Coalescing)

Wenn der Eigenschaftswert des Objekts, auf das zugegriffen wird, null oder undefiniert ist, wird der Standardwert verwendet. Zuvor war der Operator || (logisch oder).

Wenn wir standardmäßig sedighian auf den Wert der login-Eigenschaft schreiben möchten, gehen wir wie folgt vor:

 //      data && data.user && data.user.login || 'sedighian' //     data?.user?.login || 'sedighian' //        null data?.user?.login ?? 'sedighian' 

Das zweite und dritte Beispiel sind ähnlich. Was ist der Vorteil einer Kombination mit null? Das Kombinieren mit Null wird nur dann nach rechts ausgewertet, wenn die linke Seite undefiniert oder null ist. Dies gibt uns einen gewissen Schutz vor zufälligen Ergebnissen, wenn wir mit echten (gültigen), aber falschen Werten arbeiten.

Angenommen, wir möchten '' (leere Zeichenfolge), false oder 0 zurückgeben. Mit dem Operator || Dies wird nicht funktionieren, da er die rechte Seite zurückgibt. In diesem Fall ist die Kombination mit null für uns nützlich:

 //  data.user.alias   ,     data?.user?.alias ?? 'code ninja' // '' data?.user?.alias || 'code ninja' // code ninja //  data.user.volumePreference = 0 data?.user?.volumePreference ?? 7 // 0 data?.user?.volumePreference || 7 // 7 //  data.user.likesCats = false data?.user?.likesCats ?? true // false data?.user?.likesCats || true // true 

Alternativ können Sie Bibliotheken von Drittanbietern und im Fall von Ember ein integriertes Hilfsprogramm verwenden:

 // lodash import _ from 'lodash' _.get(data, 'user.likesCats', true) // ember import { getWithDefault } from '@ember/object' getWithDefault(data, 'user.likesCats', true) 

Denken Sie daran, dass die Kombination mit null mehr als der Standardwert einer Variablen ist. Dies ist eine alternative Möglichkeit, einen Codeblock auszuführen, wenn keine entsprechenden Werte vorhanden sind:

 const temp = { celsius: 0 } temp?.fahrenheit ?? setFahrenheit(temp) 

Woran sollte man sich erinnern?

Merken Sie sich die Reihenfolge der Zeichen in der optionalen Zeichenfolge (zuerst ein Fragezeichen, dann ein Punkt):

 data.?user // Uncaught SyntaxError: Unexpected token '?' data?.user // ok 

Die optionale Kette schützt nicht vor dem Aufrufen einer nicht vorhandenen Funktion:

 data?.user() // Ungaught TypeError: user is not a function 

Die Kombination mit null ist nicht identisch mit lodash.get oder EmberObject.getWithDefault. Der Hauptunterschied besteht darin, wie das Kombinieren von c null den Wert "null" behandelt:

 const data = { user: { interests: null } } // lodash import _ from 'lodash' _.get(data, 'user.interests', 'knitting') // null // ember import { get } from '@ember/object' getWithDefault(data, 'user.interests', 'knitting') // null //   null data?.user?.interests ?? 'knitting' // knitting 

Danke für die Aufmerksamkeit. Alles Gute.