Neue JavaScript-Funktionen, die jeder Entwickler kennen sollte

JavaScript entwickelt sich ständig weiter und mit jeder neuen Version werden Funktionen eingeführt, die unser Leben als Entwickler ein wenig einfacher machen. Einige dieser Funktionen sind bahnbrechend und verbessern die Art und Weise, wie wir unseren Code schreiben und verwalten. Wenn Sie täglich programmieren, ist es wichtig, über diese neuen Funktionen auf dem Laufenden zu bleiben. In diesem Beitrag werde ich Sie durch einige der neuesten JavaScript-Funktionen führen, die äußerst nützlich sind und in Ihrem Toolkit enthalten sein sollten.

1. Optionale Verkettung (?.)

Eine der nützlichsten Funktionen, die in neueren Versionen von JavaScript hinzugefügt wurden, ist die optionale Verkettung. Dadurch können wir sicher auf tief verschachtelte Eigenschaften in Objekten zugreifen, ohne uns Gedanken darüber machen zu müssen, ob eine Zwischeneigenschaft null oder undefiniert ist.

Beispiel:

Stellen Sie sich vor, Sie haben ein Benutzerobjekt, das möglicherweise ein Profil hat oder nicht:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

Ohne optionale Verkettung müssten Sie jede Eigenschaft manuell überprüfen, was den Code unübersichtlich machen kann. Dieser kleine Operator hilft uns, diese Prüfungen zu vermeiden, wodurch der Code sauberer und leichter lesbar wird.

2. Nullish Coalescing Operator (??)

Der Nullish-Koaleszenzoperator (??) ist eine weitere nette Funktion, die eingeführt wurde, um den Umgang mit Null- oder undefinierten Werten zu erleichtern, ohne andere falsche Werte wie 0 oder falsch zu beeinflussen.

Beispiel

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

Im Gegensatz zum logischen ODER (||), das eine leere Zeichenfolge ("") oder 0 als falsche Werte behandelt, ?? gibt den rechten Operanden nur zurück, wenn der linke Operand null oder undefiniert ist.

3. Promise.allSettled()

Wenn Sie mit Versprechen in JavaScript arbeiten, haben Sie wahrscheinlich Promise.all() verwendet. Aber wussten Sie, dass es eine leistungsfähigere Version namens Promise.allSettled() gibt? Diese Methode wartet darauf, dass alle Versprechen erfüllt werden, unabhängig davon, ob sie erfüllt oder abgelehnt wurden. Es ist super praktisch, wenn Sie das Ergebnis aller Versprechen wissen müssen, auch wenn einige scheitern.

Beispiel:

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

Dies ist eine großartige Möglichkeit, mehrere asynchrone Vorgänge zu verarbeiten, wenn Sie nicht möchten, dass ein einziger Fehler den gesamten Prozess unterbricht.

4. BigInt für große Zahlen

Wir alle kennen das Problem, die Grenzen des JavaScript-Nummerntyps zu überschreiten. JavaScript-Zahlen sind auf Werte zwischen -(2^53 - 1) und (2^53 - 1) beschränkt. Wenn Sie mit größeren Zahlen arbeiten müssen, ist BigInt Ihr Freund.

Beispiel:

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

Dadurch haben Sie die Möglichkeit, mit beliebig großen Ganzzahlen zu arbeiten, ohne sich Gedanken über Präzisionsfehler machen zu müssen.

5. String.prototype.replaceAll()

Wenn Sie jemals versucht haben, alle Vorkommen eines Teilstrings in einem String zu ersetzen, haben Sie wahrscheinlich einen regulären Ausdruck mit der Methode replace() verwendet. Mit replaceAll() ist es viel einfacher. Diese Methode ersetzt alle Vorkommen eines Teilstrings, und Sie müssen sich keine Gedanken über globale Regex-Flags machen.

Beispiel:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

Es ist einfach, übersichtlicher und macht reguläre Ausdrücke überflüssig.

6. Logische Zuweisungsoperatoren (&&=, ||=, ??=)

Diese neuen Operatoren bieten eine Verknüpfung zum Kombinieren logischer Operatoren mit Zuweisungen. Sie sind eine großartige Möglichkeit, prägnanteren Code zu schreiben.

• &&=: Weist den Wert nur zu, wenn der linke Wert wahr ist.
• ||=: Weist den Wert nur zu, wenn der linke Wert falsch ist.
• ??=: Weist den Wert nur zu, wenn der linke Wert null oder undefiniert ist.

Beispiel:

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

Diese Verknüpfungen helfen Ihnen, die Ausführlichkeit Ihres Codes zu reduzieren.

7. Object.fromEntries()

Wenn Sie jemals eine Liste von Schlüssel-Wert-Paaren in ein Objekt konvertieren mussten, macht es Object.fromEntries() ganz einfach. Dies ist besonders nützlich, wenn Sie mit Map-Objekten oder Tupel-Arrays arbeiten.

Beispiel:

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

Diese Methode ist eine sauberere, besser lesbare Alternative zum manuellen Erstellen von Objekten.

8. Array.prototype.flatMap()

Diese Methode ist eine Kombination aus map() gefolgt von flat(). Damit können Sie die Ergebnisse in einem einzigen Schritt zuordnen und reduzieren, was bei der Arbeit mit Arrays von Arrays sehr nützlich sein kann.

Beispiel:

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

Dies ist sauberer als die separate Ausführung von „map()“ gefolgt von „flat()“.

9. Array.prototype.at()

Diese neue Methode erleichtert den Zugriff auf Elemente vom Ende eines Arrays mithilfe negativer Indizes. Es ist viel intuitiver als die manuelle Berechnung des Index für das letzte Element.

Beispiel:

let message = 'Hello World, Welcome to the World!';
let updatedMessage = message.replaceAll('World', 'Universe');
console.log(updatedMessage);  // Hello Universe, Welcome to the Universe!

Es vereinfacht die Arbeit mit den letzten Elementen in einem Array.

10. Warten auf höchstem Niveau

In JavaScript mussten wir „await“ immer innerhalb einer asynchronen Funktion verwenden. Aber mit Top-Level-Await können Sie Wait jetzt direkt auf der obersten Ebene von Modulen verwenden, wodurch Ihr asynchroner Code einfacher wird.

Beispiel:

let count = 0;
count ||= 10;  // count is now 10, because it was falsy
console.log(count);  // 10
let name = null;
name ??= 'Anonymous';  // name is now 'Anonymous'
console.log(name);  // Anonymous

Dies macht die Arbeit mit asynchronem Code in modernem JavaScript viel einfacher.

11. Private Klassenfelder

Wenn Sie schon immer Variablen in JavaScript-Klassen privat machen wollten, sind private Klassenfelder jetzt möglich. Sie können jetzt Variablen definieren, auf die von außerhalb der Klasse nicht zugegriffen werden kann, indem Sie das #-Symbol verwenden.

Beispiel:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

12. Stabile Sortierung (Array.prototype.sort())

Zuvor war die Methode sort() von JavaScript nicht stabil, was bedeutete, dass gleiche Elemente möglicherweise auf unvorhersehbare Weise gemischt wurden. Jetzt stellt JavaScript sicher, dass Elemente mit demselben Wert ihre ursprüngliche Reihenfolge im Array beibehalten.

Beispiel:

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

Dies gewährleistet ein vorhersehbareres und konsistenteres Verhalten.

Abschluss

JavaScript entwickelt sich ständig weiter und diese Funktionen bieten Entwicklern sowohl Komfort als auch Leistung. Unabhängig davon, ob Sie mit asynchronem Code arbeiten, große Zahlen verarbeiten oder einfach nur Ihre Objekt- und Array-Manipulationen bereinigen, können diese neuen Funktionen Ihnen helfen, saubereren und effizienteren Code zu schreiben. Wenn Sie es noch nicht getan haben, experimentieren Sie in Ihren Projekten damit und sehen Sie, wie sie Ihren Arbeitsablauf reibungsloser gestalten können.

Viel Spaß beim Codieren! ?

Bitte folgen Sie mir, um weitere wertvolle Inhalte zu erhalten

Das obige ist der detaillierte Inhalt vonNeue JavaScript-Funktionen, die jeder Entwickler kennen sollte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!