Moderne JavaScript-Funktionen: Was ist neu in ES3?

JavaScript entwickelt sich ständig weiter und bringt jedes Jahr eine Reihe neuer Funktionen mit sich, die das Leben von Entwicklern einfacher machen sollen. ES2023, das neueste Update, ist vollgepackt mit neuen Tools, die die Art und Weise verbessern, wie wir Code schreiben, lesen und verwalten. Lassen Sie uns auf einige der herausragenden Funktionen eingehen, die Sie in Ihren Projekten verwenden möchten.

1. Array findLast und findLastIndex

Mussten Sie jemals ein Element in einem Array beginnend am Ende finden? ES2023 führt findLast und findLastIndex ein, die genau das tun.

• findLast: Diese Methode findet das letzte Element in einem Array, das eine angegebene Bedingung erfüllt.

  const numbers = [1, 2, 3, 4, 5];
  const lastEven = numbers.findLast(num => num % 2 === 0); // 4

  // Find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findLast(user => user.age === 18);

• findLastIndex: Diese Methode gibt den Index des letzten Elements zurück.

  const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); // 3

Diese Methoden eignen sich hervorragend für Situationen, in denen Sie Ihre Suchlogik umkehren müssen, um Ihren Code klarer und potenziell effizienter zu machen.

2. Hashbangs (#!) in JavaScript-Dateien

Wenn Sie Befehlszeilentools in JavaScript schreiben, werden Sie die neue Unterstützung für Hashbangs zu schätzen wissen. Durch Hinzufügen eines #! Am Anfang Ihrer Datei können Sie den Interpreter direkt angeben und so Ihr Skript ausführbar machen, ohne dass ein externer Befehl erforderlich ist.

#!/usr/bin/env node

console.log("Hello, world!");

Dies ist eine kleine, aber praktische Funktion, insbesondere für diejenigen, die CLI-Tools in Node.js erstellen.

3. Symbole als WeakMap-Schlüssel

Früher konnten in WeakMap nur Objekte als Schlüssel verwendet werden, aber ES2023 ändert dies, indem es auch Symbole zulässt.

const wm = new WeakMap();
const sym = Symbol('key');
wm.set(sym, 'value');

console.log(wm.get(sym)); // 'value'

// Storing hidden game data that players can't easily access, such as secret unlock codes:
const secretCode = Symbol('vc-cheat-code');
const gameData = new WeakMap();
gameData.set(secretCode, 'PANZER-ASPIRINE-BIGBANG-PRECIOUSPROTECTION'); 

Diese Erweiterung macht WeakMap noch vielseitiger, insbesondere wenn Sie einzigartige, kollisionsfreie Schlüssel benötigen, die Symbole bereitstellen.

4. Array-Gruppierung nach Methode

Das Gruppieren von Array-Elementen ist mit der neuen Gruppenmethode viel einfacher geworden.

• Gruppe: Diese Methode organisiert Ihr Array in einem Objekt, mit Schlüsseln, die durch eine von Ihnen bereitgestellte Funktion bestimmt werden, und Werten als Arrays von Elementen, die jedem Schlüssel entsprechen.

  const animals = [
    { type: 'mammal', name: 'dog' },
    { type: 'bird', name: 'sparrow' },
    { type: 'mammal', name: 'cat' },
  ];

  const grouped = animals.group(({ type }) => type);
  console.log(grouped);
  // {
  //   mammal: [{ type: 'mammal', name: 'dog' }, { type: 'mammal', name: 'cat' }],
  //   bird: [{ type: 'bird', name: 'sparrow' }]
  // }

Diese Funktion eignet sich perfekt für Szenarien, in denen Sie Daten schnell und effizient kategorisieren müssen.

5. Array.prototype.toSorted und Array.prototype.toReversed()

Das Sortieren von Arrays ist mit toSorted jetzt viel sauberer geworden. Im Gegensatz zu sort, das das ursprüngliche Array ändert, gibt toSorted ein neues sortiertes Array und toReversed ein neues umgekehrtes Array zurück, wobei das Original unberührt bleibt.

const arr = [3, 1, 4, 1, 5];
const sortedArr = arr.toSorted();
console.log(sortedArr); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]

let data = [/* important data that shouldn't be modified */];
let reversedData = data.toReversed(); // Safely reverse

Diese Methode eignet sich hervorragend, wenn Sie das ursprüngliche Array beibehalten müssen, während Sie mit einer sortierten Version arbeiten.

6. Array.prototype.with

Die with-Methode bietet eine einfache Möglichkeit, ein neues Array zu erstellen, indem ein Element an einem bestimmten Index ersetzt wird.

const numbers = [10, 20, 30, 40];
const newNumbers = numbers.with(2, 25); // [10, 20, 25, 40]

Diese Methode ist perfekt, wenn Sie ein Array unveränderlich aktualisieren möchten, wodurch es einfacher wird, den Status in funktionalen Programmiermustern zu verwalten.

7. Promise.withResolvers

Dank Promise.withResolvers war die Verwaltung von Versprechen noch nie so einfach. Mit dieser neuen Methode können Sie ein Versprechen zusammen mit seinen Auflösungs- und Ablehnungsfunktionen auf einmal erstellen.

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve("done"), 1000);

promise.then(console.log); // "done"

Es ist eine übersichtliche und übersichtliche Möglichkeit, asynchrone Vorgänge zu handhaben, insbesondere wenn Sie das Ergebnis des Versprechens von außerhalb seines Konstruktors steuern müssen.

Browserunterstützung für ES2023

ES2023, die neueste Version von JavaScript, ist ziemlich neu, da sie erst 2023 fertiggestellt wurde. Das bedeutet, dass noch nicht alle Webbrowser die neuen Funktionen nutzen können, aber sie beginnen:

• Firefox, Chrome und Edge unterstützen einige Funktionen Array.prototype.findLast() und Array.prototype.findLastIndex()
• Safari unterstützt noch keine dieser Funktionen.

• Node.js

  • Node.js Version 19.0 und höher kann Folgendes verwenden:
    • Array.prototype.findLast()
    • Array.prototype.findLastIndex() Es wird erwartet, dass in zukünftigen Updates weitere ES2023-Funktionen hinzugefügt werden.

Transpiler:
Um die neuen ES2023-Funktionen jetzt zu nutzen, können Entwickler ES2023-Code in eine ältere Version umwandeln, die von mehr Browsern verstanden wird, indem sie Tools namens Transpiler wie Babel verwenden. Auf diese Weise können Sie mit der Nutzung der neuen Inhalte beginnen, auch wenn die Browser noch nicht dafür bereit sind.

Derzeit wächst die Unterstützung für ES2023 immer noch. Große Browser wie Firefox und Chrome beginnen, einige seiner Funktionen zu integrieren. Einzelheiten dazu, was wo unterstützt wird, finden Sie unter „Kann ich verwenden“. Der Einsatz von Transpilern trägt dazu bei, diese neuen Funktionen heute nutzbar zu machen, während wir darauf warten, dass die Browser in den kommenden Jahren aufholen.

Abschluss

ES2023 bringt eine Reihe neuer Funktionen mit, die JavaScript leistungsfähiger und einfacher machen. Von verbesserten Array-Methoden bis hin zu einer besseren Handhabung von Versprechen – bei diesen Updates geht es darum, Ihren Code sauberer und effizienter zu machen. Da JavaScript immer weiter wächst und sich weiterentwickelt, stellen Sie sicher, dass Sie immer das Beste aus der Sprache herausholen, wenn Sie über diese Änderungen auf dem Laufenden bleiben.

Referenzen:

1. TC39-Vorschläge
2. Entwurf ECMA-262
3. MDN

Das obige ist der detaillierte Inhalt vonModerne JavaScript-Funktionen: Was ist neu in ES3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!