JavaScript hat sich in den letzten Jahren sehr schnell entwickelt. Dies gilt insbesondere für den Zeitraum nach der Veröffentlichung des ES6-Standards im Jahr 2015. Seitdem sind viele großartige Funktionen in der Sprache erschienen. Für die Aufnahme in den ES2020-Standard wurde viel Neues vorgeschlagen. Es wurde bereits eine endgültige Liste von Merkmalen erstellt, deren Erscheinen nach seiner Genehmigung in der Norm zu erwarten ist. Dies sind gute Nachrichten für alle JS-Enthusiasten. Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, sagt, dass es unter diesen Möglichkeiten diejenigen gibt, mit denen er besonders zufrieden ist. Bevor sie auftauchten, war es für ihn viel schwieriger, Code in Situationen zu schreiben, in denen sie anwendbar sind. Ihm zufolge hätten sie ihm viel Zeit und Mühe gespart, wenn sie früher in der Sprache erschienen wären.
Optionale Ketten
Die optionale Verkettung ist für mich persönlich eine der aufregendsten Funktionen des ES2020-Standards. Ich habe viele Programme geschrieben, in denen diese Funktion äußerst nützlich wäre. Mit optionalen Ketten können Sie den sicheren Zugriff auf tief eingebettete Eigenschaften von Objekten organisieren, ohne die Existenz der einzelnen Objekte überprüfen zu müssen. Schauen Sie sich an, wie diese Funktion funktioniert.Schauen Sie sich zunächst den Code an, der vor dem Aufkommen optionaler Ketten geschrieben werden musste.▍ Code vor dem Erscheinen optionaler Ketten
const user = {
firstName:"Joseph",
lastName:"Kuruvilla",
age:38,
address:{
number:"239",
street:"Ludwig Lane",
city:"Chennai",
zip:"600028",
prop1:{
prop2:{
prop3:{
prop4:{
value:'sample'
}
}
}
}
}
}
if(user && user.address){
console.log(user.address.zip);
}
if(user && user.address && user.address.prop1 && user.address.prop1.prop2 && user.address.prop1.prop2.prop3 && user.address.prop1.prop2.prop3.prop4){
console.log(user.address.prop1.prop2.prop3.prop4.value);
}
console.log(user.address.prop102.po);
Wie Sie sehen können, ist es anscheinend Cannot read property 'po' of undefinederforderlich, auf jeder Verschachtelungsebene die Eigenschaften auf ihre Existenz zu überprüfen , um das Auftreten von Fehlern zu vermeiden . Mit zunehmender Verschachtelungstiefe von Entitäten nimmt auch die Anzahl der überprüften Eigenschaften zu. Dies bedeutet, dass der Programmierer selbst Code schreiben muss, der ihn vor Eigenschaften schützt, auf die beim Zugriff die Werte von nulloder stoßen können undefined.▍ Code nach dem Erscheinen optionaler Ketten
Das Schreiben von Code wie dem, den wir gerade überprüft haben, machte es mit dem Aufkommen optionaler Ketten viel einfacher. Um sicheres Arbeiten mit tief eingebetteten Eigenschaften von Objekten zu organisieren, reicht es aus, den Operator zu verwenden ?.. Dies erspart uns die Notwendigkeit, die Werte an nullund unabhängig zu überprüfen undefined.So sieht es aus:const user = {
firstName:"Joseph",
lastName:"Kuruvilla",
age:38,
address:{
number:"239",
street:"Ludwig Lane",
city:"Chennai",
zip:"600028",
prop1:{
prop2:{
prop3:{
prop4:{
value:'sample'
}
}
}
}
}
}
console.log(user?.address?.zip);
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
console.log(user?.address?.prop102?.po);
Ist es nicht in Ordnung? Dank dieser Innovation konnte mit ES2020 eine Vielzahl von Codezeilen entfernt werden.Validierung nur null und undefinierter Werte
Das Überprüfen von Werten nur auf nullund undefined(Nullish Coalescing) ist eine dieser Funktionen, die mich wirklich begeistert hat, selbst wenn sich die Möglichkeiten in der Vorschlagsphase befanden. Ich bin oft auf die Notwendigkeit gestoßen, spezielle Funktionen zu schreiben, um die entsprechenden Überprüfungen durchzuführen.Es ist bekannt, dass JavaScript die Bedeutung "falsch" und "wahr" hat. Jetzt können wir sagen, dass ihnen Nullwerte hinzugefügt wurden. Diese Werte umfassen nullund undefined. Mit JavaScript Bezug auf "false" sind leere Strings, die Zahl 0, die Werte undefined, null, false, NaN. Das heißt, ein bestimmter Ausdruck zum Überprüfen des Werts auf "Falschheit" funktioniert für eine leere Zeichenfolge und für den Wertundefinedund vieles mehr darüber. Und der Ausdruck zum Überprüfen des Werts, ob er "Null" ist, gibt truenur für nullund zurück undefined. Vielleicht erscheint Ihnen diese Gelegenheit persönlich nicht so wunderbar, aber tatsächlich ist sie sehr, sehr wichtig.Schauen wir uns einige Beispiele an.▍ Der Code bis zur Möglichkeit, Werte nur auf null und undefiniert zu überprüfen
Vor kurzem habe ich an einem Projekt gearbeitet, in dem ich die Funktionalität des Wechsels zwischen hellen und dunklen Themen implementieren musste. Gleichzeitig musste ich den Status des Steuerelements überprüfen, um herauszufinden, ob er dem Wert von trueoder entspricht false. Wenn der Benutzer keinen Wert festgelegt hat, sollte dieser standardmäßig gleich sein true. So habe ich dieses Problem gelöst, bevor die Möglichkeit bestand, Werte nur für nullund zu überprüfen undefined:const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
const getUserDarkModePreference = (darkModePreference) => {
if (darkModePreference || darkModePreference === false) {
return darkModePreference
}
return true
}
getUserDarkModePreference(darkModePreference1)
getUserDarkModePreference(darkModePreference2)
getUserDarkModePreference(darkModePreference3)
getUserDarkModePreference(darkModePreference4)
▍ Code nach der Möglichkeit, Werte nur auf null und undefiniert zu prüfen
Sobald diese Funktion in der Sprache zur Überprüfung nullund undefinedausreichenden Bediener erschienen ist ??. Sie können auf eine bedingte Anweisung verzichten if:const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
const getUserDarkModePreference = (darkModePreference) => {
return darkModePreference ?? true;
}
getUserDarkModePreference(darkModePreference1)
getUserDarkModePreference(darkModePreference2)
getUserDarkModePreference(darkModePreference3)
getUserDarkModePreference(darkModePreference4)
Hier passiert Folgendes: Wenn die Variable darkModePreferenceeinen Wert „Null“ enthält, wird der Wert zurückgegeben true. Dies erleichtert das Schreiben von Code, ist kompakt und leicht zu verstehen.Dynamische Importe
Dynamische Importe tragen zu einer effizienteren Anwendungsleistung bei. Mit dieser Technologie können Sie JS-Dateien dynamisch in Form von Modulen importieren, ohne zusätzliche Tools zu verwenden. Wenn das Modul nicht benötigt wird, wird es nicht importiert. Vor dem ES2020 wurden Module importiert, unabhängig davon, ob sie von der Anwendung verwendet werden oder nicht.Angenommen, wir müssen die Funktionalität zum Laden einer bestimmten Datei im PDF-Format implementieren.Berücksichtigen Sie wie gewohnt die alten und neuen Optionen zur Lösung dieses Problems.▍ Code vor Unterstützung für dynamische Importe
Aufgrund der tatsächlichen Situation können wir davon ausgehen, dass die Möglichkeit zum Herunterladen von Materialien im PDF-Format nicht von allen Besuchern der Seite genutzt wird. Das entsprechende Modul muss jedoch trotzdem in den Code importiert werden. Dies bedeutet, dass das Modul, unabhängig davon, ob es benötigt wird oder nicht, beim Laden der Seite geladen wird.import { exportAsPdf } from './export-as-pdf.js'
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', exportAsPdf);
Dies führt zu einer zusätzlichen Belastung des Systems, die durch das verzögerte Laden von Modulen erleichtert werden kann. Dies kann mithilfe der Codetrennungstechnologie erfolgen, die im Webpack oder in anderen Modulladern verfügbar ist (und deren Verwendung an sich bedeutet eine Verschwendung einer bestimmten Menge an Systemressourcen).Dank des ES2020 haben wir jetzt eine Standardmethode zum dynamischen Laden von Modulen, mit der wir auf Bundler verzichten können.▍ Code nach dem Auftreten der Unterstützung für dynamische Importe
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
import('./export-as-pdf.js')
.then(module => {
module.exportAsPdf()
})
.catch(err => {
})
})
Wie Sie sehen, können Sie jetzt das verzögerte Laden von Modulen organisieren, indem Sie nur dann laden, wenn das entsprechende Modul benötigt wird. Dies reduziert die Systemlast und erhöht die Geschwindigkeit beim Laden von Seiten.Konstruieren Sie Promise.allSettled
Wenn Sie nur dann eine Aktion ausführen müssen, wenn alle Versprechen erfolgreich gelöst wurden, können Sie die Methode verwenden Promise.all(). Diese Methode hat zwar einen Nachteil. Die Methode gibt einen Fehler aus, wenn mindestens ein an sie übergebenes Versprechen abgelehnt wird. Dies bedeutet, dass die erforderlichen Maßnahmen erst ausgeführt werden, wenn alle Versprechen erfolgreich gelöst wurden.Möglicherweise benötigen Sie dies nicht. Vielleicht passt das folgende Szenario zu Ihnen: „Das Ergebnis ist für mich nicht wichtig. Ich muss den Code ausführen, nachdem alle Versprechen erfüllt wurden. “ In diesem Fall ist die Methode für Sie nützlich Promise.allSettled(). Das entsprechende Versprechen wird erst nach Abschluss anderer Versprechen erfolgreich gelöst. Es spielt keine Rolle, ob sie erfolgreich oder erfolglos gearbeitet haben.▍ Code mit dem Promise.all-Konstrukt
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
.then(data => console.log('all resolved! here are the resolve values:', data))
.catch(err => console.log('got rejected! reason:', err))
Anscheinend Promise.allgibt es einen Fehler nach der Ablehnung eines der ihm übertragenen Versprechen.▍ Code, der das Promise.allSettled-Konstrukt verwendet
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
Und hier werden, obwohl einige der Versprechen abgelehnt werden, Promise.allSettleddie Ergebnisse aller an sie übertragenen Versprechen zurückgegeben.Andere bemerkenswerte Merkmale
▍ BigInt-Datentyp
Mit dem neuen Datentyp BigIntkönnen Sie mit Zahlen arbeiten, deren Länge die Länge der Zahlen überschreitet, mit denen Sie in JavaScript arbeiten konnten, bevor sie angezeigt wurden ( pow(2,53)-1). Dieser Datentyp ist zwar nicht abwärtskompatibel mit dem, was zuvor in der Sprache war. Der IEEE 754-Standard, der die Grundlage für die Arbeit mit Zahlen in JavaScript bildet, unterstützt nicht die Zahlen, mit denen gearbeitet werden kannBigInt▍ String.prototype.matchAll-Methode
Die Methode String.prototype.matchAll()bezieht sich auf reguläre Ausdrücke. Es gibt einen Iterator zurück, mit dem Sie mit allen in einer Zeichenfolge gefundenen Übereinstimmungen mithilfe eines regulären Ausdrucks , einschließlich Gruppen, arbeiten können .▍ Globale Eigenschaft globalThis
Die globale Eigenschaft globalThisenthält einen Verweis auf das globale Objekt, das der Umgebung entspricht, in der der Code ausgeführt wird. Im Browser wird das globale Objekt durch das Objekt dargestellt window. In Node.js ist dies ein Objekt global. Bei Web-Workern ist dies ein Objekt self.Welche Innovationen mögen Sie am ES2020 am meisten?