In letzter Zeit sind die Optionale Verkettung und der Standardattributwert ( Nullish Coalescing ) zum letzten, vierten Schritt des TC39-Prozesses übergegangen.
In der Praxis bedeutet dies, dass diese und andere Innovationen bereits ab 2020 Bestandteil des JavaScript-Standards werden. Wir werden sie in diesem Artikel betrachten.
Hier können Sie die Browserunterstützung nachverfolgen („2020-Funktionen“). perev.
Die Verwendung von festen oder globalen regulären Ausdrücken, wenn Sie mehrere Gruppen in derselben Zeile erfassen müssen, ist möglicherweise nicht trivial.
String.prototype.match gibt keine erfassten Gruppen zurück, wenn ein globales Flag vorhanden ist. Ohne dieses Flag können Sie nur die erste vollständige Übereinstimmung mit der Vorlage und ihrer Gruppe erhalten.
Ein Beispiel:
let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; const results = str.match(regexp); console.log(results);
Ergebnis mit Flag "g"
Das Ergebnis ohne die Flagge "g"Durch die Verwendung von String.prototype.matchAll wird sichergestellt, dass alle Übereinstimmungen und ihre Gruppen zurückgegeben werden.
Ein Beispiel:
let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; let array = [...str.matchAll(regexp)]; console.log(array);
Ergebnis:
Vor BigInt war der größte durch Number dargestellte Wert 2⁵³-1 (MAX_SAFE_INTEGER). JavaScript hat jetzt ein Grundelement, das das Limit überschreiten kann.
Sie können ein BigInt erstellen, indem Sie einer Zahl ein 'n' hinzufügen oder die BigInt () - Funktion verwenden.
Ein Beispiel:
let bigInt = 4n console.log(bigInt * bigInt)
- BigInt ist nicht gleichbedeutend mit Number , kann jedoch in letzteres umgewandelt werden.
- Bei Operationen wie Division wird das Ergebnis auf das nächste Ganze gerundet.
- Kann nicht mit Number ohne Typumwandlung verwendet werden.
Es wird versucht, BigInt mit einer Nummer hinzuzufügen ...
let bigInt = 4n + 2 console.log(bigInt)
... führt zu einer Ausnahme:
Der Zugriff auf globale Objekte in der JavaScript-Welt bereitete immer Kopfzerbrechen. Sie sollten mit der spezifischen Syntax für die Umgebung vertraut sein, die beim Schreiben von portablem Code unnötige Schwierigkeiten verursacht und die Verwendung von etwas wie getGlobal erforderlich macht.
Ein Beispiel:
var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('no global object found'); }; var globals = getGlobal();
Mit dem Aufkommen von globalThis können Sie aufhören, an die Umgebung zu denken, und globale Objekte vereinheitlichen.
Ein Beispiel:
globalThis.someFunction = () => 'hello' console.log(globalThis.someFunction())
Angenommen, Sie haben ein paar Versprechen und möchten etwas tun, nachdem sie abgeschlossen sind (es spielt keine Rolle, ob es erfolgreich ist oder nicht). Promise.allSettled dient genau diesem Zweck.
Ein Beispiel:
const fulfilledPromise = Promise.resolve("success"); const rejectedPromise = Promise.reject("error") const promises = [fulfilledPromise, rejectedPromise]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result)));
Ergebnis:
Möchten Sie ein Modul zur Laufzeit laden, abhängig von einer bestimmten Bedingung? Jetzt kann auf Bibliotheken von Drittanbietern verzichtet werden.
Es reicht aus, die Importfunktion aufzurufen, die das Versprechen zurückgibt.
Ein Beispiel:
import("some_module") .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); });
Im Gegensatz zum statischen Import, bei dem Sie den Modulnamen explizit angeben müssen, können Sie beim dynamischen Import beispielsweise eine Vorlage an die Funktion übergeben.
Beispiel mit einer Vorlage:
import(`${some_module}.js`) .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); });
Wenn Sie ein Attribut oder einen Standardwert benötigen, verwenden wir normalerweise den Operator '||', wenn dieser null oder undefiniert ist.
Vor dem Nullish-Verschmelzen:
const response = someResponse.properties.mayBeUndefined || 'Response';
Stellen Sie sich jedoch vor, dass ein Attribut einen „falschen“ Wert hat.
Das Problem der Verwendung von '||':
const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined || 'Response'; console.log(response)
Ergebnis:
Dies ist ein unerwünschtes Verhalten. In diesem Fall benötigten wir einen Attributwert, keinen Standardwert.
Mit Nullish Coalescing wird dieses Problem nicht auftreten. Der Standardwert wird nur für null oder undefinierte Attribute zurückgegeben.
Verwenden von Nullish Coalescing:
const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined ?? 'Response'; console.log(response)
Ergebnis:
Um auf das Unterattribut zuzugreifen, müssen wir sicherstellen, dass das obige Attribut vorhanden ist. Bisher muss das Vorhandensein der einzelnen Überattribute manuell überprüft werden.
Vor dem optionalen Verketten:
const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty ? someObj.NotOtherProperty.name: undefined; console.log(property);
Mit der Einführung der optionalen Verkettung können Sie den Operator "?." Verwenden für optionalen Zugriff auf Unterattribute. Der folgende Code entspricht dem obigen Code.
Verwenden der optionalen Verkettung:
const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty?.name; console.log(property);
Durch die optionale Verkettung wird der Code wesentlich übersichtlicher, insbesondere wenn die Zeichenfolge viele Attribute enthält.
Fazit
Sie können versuchen, Beispiele aus einem Artikel in der Konsole auszuführen: Einige davon sind bereits in den neuesten Browserversionen implementiert, andere werden wahrscheinlich sehr bald implementiert. Auf die eine oder andere Weise ist es bereits möglich, sich auf die Möglichkeiten des Artikels als Teil der Sprache 2020 zu beziehen.