Was ist neu in JavaScript: ECMAScript Edition-js-Tutorial-php.cn

What’s New in JavaScript: ECMAScript Edition

TL;DR: Entdecken Sie die bahnbrechenden Funktionen von JavaScript ECMAScript 2024. In diesem Leitfaden werden die neuesten Innovationen vorgestellt, die Ihr Programmiererlebnis verändern sollen. Von der neuen Groupby-Methode für müheloses Gruppieren von Daten bis hin zur bahnbrechenden Temporal API, die die Datums- und Zeitverwaltung vereinfacht, ist ECMAScript 2024 vollgepackt mit Tools, die die Effizienz und Präzision steigern.

ECMAScript ist eine grundlegende Komponente von JavaScript. Seit Mitte der 1990er Jahre hat sich ECMAScript weiterentwickelt, um Entwicklern neue Funktionen zu bieten und die Dynamik und Benutzerfreundlichkeit von Web-Erlebnissen zu bereichern. Von einfachen Skripten bis hin zu komplizierten Frameworks beeinflusst es die digitale Landschaft und fördert Kreativität und Innovation in der Webentwicklung.

Im Laufe der Jahre wurden zahlreiche Editionen von ECMAScript veröffentlicht, die jeweils neue Funktionen und Verbesserungen mit sich bringen. In diesem Leitfaden erkläre ich, was im neuesten ECMAScript 2024 (Edition 15) neu ist. Machen Sie sich bereit, die neuesten Funktionen zu entdecken, die die Art und Weise, wie wir programmieren, revolutionieren werden!

Gruppieren synchroner Iterables mit der Methode „groupBy“.

JavaScript-Entwickler müssen Daten häufig anhand bestimmter Kriterien in Gruppen organisieren. Die neue Methode groupBy in ECMAScript 2024 macht diese Aufgabe zum Kinderspiel. Stellen Sie sich vor, Sie haben eine Sammlung von Elementen und möchten diese nach einer bestimmten Eigenschaft gruppieren – groupBy ist dafür Ihr Werkzeug der Wahl!

Was ist GroupBy?

Die groupBy-Methode ist eine statische Methode, die für Object und Map verfügbar ist. Damit können Sie Elemente in einer Sammlung schnell und effizient auf der Grundlage eines von jedem Element abgeleiteten Schlüssels gruppieren. Das Ergebnis ist ein neues Objekt, bei dem jeder Schlüssel einer Gruppe entspricht und der Wert ein Array von Elementen ist, die zu dieser Gruppe gehören.

Angenommen, Sie haben eine Reihe von Personen und möchten diese nach ihrem Alter gruppieren. Hier erfahren Sie, wie Sie dies mit der Methode groupBy tun können.

const people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 25 },
  { name: "David", age: 30 },
  { name: "Eve", age: 35 }
];
const groupedByAge = Object.groupBy(people, person => person.age);
console.log(groupedByAge);

Nach dem Login kopieren

Ausgabe

{
  "25": [
    { "name": "Alice", "age": 25 },
    { "name": "Charlie", "age": 25 }
  ],
  "30": [
    { "name": "Bob", "age": 30 },
    { "name": "David", "age": 30 }
  ],
  "35": [
    { "name": "Eve", "age": 35 }
  ]
}

Nach dem Login kopieren

Promise.withResolvers()

JavaScript-Versprechen waren schon immer unsere treuen Begleiter bei der Verwaltung asynchroner Vorgänge. Aber mit ECMAScript 2024 gibt es ein neues Tool: Promise.withResolvers(). Diese leistungsstarke statische Methode gibt Ihnen den Schlüssel zur vollständigen Kontrolle des Schicksals eines Versprechens direkt aus externem Code, unabhängig davon, ob es aufgelöst oder abgelehnt wird.

Diese Funktion Promise.withResolvers() gibt ein Objekt mit drei Eigenschaften zurück: ein neues Versprechen mit den Funktionen resolve und reject damit verbunden.

Angenommen, Sie verwalten eine Aufgabe, die basierend auf Benutzereingaben abgeschlossen oder abgebrochen werden kann. So können Sie die Funktion Promise.withResolvers() verwenden.

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

  // Simulate an async task.
  setTimeout(() => {
    console.log("Task is pending...");
  }, 1000);

  return { promise, resolve, reject };
}

const { promise, resolve, reject } = createControllablePromise();

// Somewhere in your code, you can resolve or reject the promise.
setTimeout(() => {
  resolve("Task completed successfully!");
  // or if something goes wrong.
  reject("Task failed due to an error.");
}, 3000);

promise
  .then(result => console.log(result))
  .catch(error => console.error(error));

Nach dem Login kopieren

Zeitlich

Hatten Sie jemals Probleme mit der Datums-API von JavaScript? Es kann ziemlich herausfordernd sein.

In ECMAScript 2024 wurde eine moderne und leistungsstarke API namens Temporal entwickelt, um die Arbeit mit Datums- und Uhrzeitangaben einfacher, intuitiver und genauer zu machen. Diese bahnbrechende API behebt die Macken des alten Date-Objekts und bringt eine Vielzahl neuer Funktionen.

Die Temporal API ist JavaScripts neue Art, mit Datums- und Uhrzeitangaben umzugehen. Im Gegensatz zur alten Date-API, die umständlich und fehleranfällig sein kann, bietet Temporal einen präziseren und flexibleren Ansatz.

Wenn Sie beispielsweise einen Projekttermin in 90 Tagen ab heute planen, können Sie mit Temporal ganz einfach das genaue Datum berechnen.

Siehe das folgende Codebeispiel.

// Getting the current date in ISO format.
const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // Output: "2024-07-02"

// Adding 90 days to the current date to calculate the deadline.
const deadline = today.add({ days: 90 });
console.log(deadline.toString()); // Output: "2024-09-30"

// Checking how many days remain until the deadline.
const daysUntilDeadline = deadline.since(today).days;
console.log(`Days until deadline: ${daysUntilDeadline}`); // Output: "Days until deadline: 90"

Nach dem Login kopieren

Dieses Beispiel zeigt, wie Temporal Planungsaufgaben vereinfachen kann und es zu einem unverzichtbaren Werkzeug für jeden JavaScript-Entwickler macht, der sich mit zeitbasierten Vorgängen befasst.

Flag für regulären Ausdruck v

ECMAScript 2024 führt eine neue Erweiterung für reguläre Ausdrücke ein: das v-Flag. Diese Ergänzung ermöglicht einen ausgefeilteren Mustervergleich und eine String-Manipulation und gibt Entwicklern eine größere Kontrolle über die Handhabung komplexer Textverarbeitungsaufgaben.

Bei der v-Flagge geht es um Präzision und Ausdruckskraft in regulären Ausdrücken. Es führt die Mengennotation ein, die es einfacher macht, Muster zu definieren, die bestimmten Gruppen von Zeichen entsprechen, insbesondere solchen mit bestimmten Unicode-Eigenschaften. Dies bedeutet, dass Sie Regex-Muster erstellen können, die genauer und lesbarer sind.

Lassen Sie uns untersuchen, wie das v-Flag in einem regulären Ausdruck verwendet werden kann, um eine Reihe von Zeichen basierend auf ihren Unicode-Eigenschaften abzugleichen.

// Regular expression to match any character with the Unicode property "Letter" (L).
const regex = /\p{L}/v;

// Test string containing various Unicode characters.
const testString = "abc123ΩΩß漢字";

// Matching all characters with the "Letter" property.
const matches = [...testString.matchAll(regex)];
console.log(matches.map(match => match[0])); // Output: ["a", "b", "c", "Ω", "Ω", "ß", "漢", "字"]

Nach dem Login kopieren

Simplifying asynchronous code with Top-Level Await

The JavaScript ECMAScript 2024 introduces Top-Level Await, a game-changer for handling asynchronous operations at the module level. This feature eliminates the need to wrap your code in an async function, making your code more straightforward and easier to maintain.

Traditionally, await could only be used inside async functions, which meant you had to create wrapper functions for any asynchronous operations. Top-Level Await changes that by allowing you to use await directly within the top-level scope of a module. This makes handling asynchronous tasks such as fetching data or loading resources much easier when your module is first loaded.

// data.js
const response = await fetch('https://api.example.com/data');
export const data = await response.json();

// main.js
import { data } from './data.js';
console.log(data); // Logs the fetched data

Nach dem Login kopieren

Well-formed methods

Handling Unicode strings is crucial in a globalized web environment where apps must support multiple languages and symbols. ECMAScript 2024 introduces the concept of Well-formed Unicode Strings, which ensures that JavaScript handles Unicode data consistently and reliably across different environments.

A well-formed Unicode string follows the proper encoding rules, ensuring characters are represented correctly. Previously, malformed Unicode strings—those with invalid sequences—could lead to unexpected behavior or errors in JavaScript. This new feature helps to identify and correct these issues, making your code more robust.

Let’s see how you can check if a string is well-formed and how to correct a malformed string.

// Example of a well-formed Unicode string.
const string1 = "Hello, InfoWorld!";

// Example of a malformed Unicode string.
const string2 = "Hello, \uD800world!"; // \uD800 is an unpaired surrogate

// Checking if strings are well-formed.
console.log(string1.isWellFormed()); // Output: true (well-formed)
console.log(string2.isWellFormed()); // Output: false (malformed)

// Correcting the malformed string.
console.log(string2.toWellFormed()); // Output: 'Hello, �world!'

Nach dem Login kopieren

In the above code example, we have used the following methods:

isWellFormed(): To check whether the string is properly encoded according to Unicode standards. If the string contains any invalid sequences, it returns false.
toWellFormed(): To return a new string where any malformed sequences are replaced with the Unicode replacement character � (Often referred to as the replacement character). This ensures the string is well-formed, even if it originally contained errors.

Conclusion

Thanks for reading! The ECMAScript 2024(Edition 15) introduces a range of powerful features that enhance JavaScript’s flexibility, reliability, and efficiency, making it even more equipped to handle modern web development challenges.

Grouping synchronous iterables with the groupBy method offers an elegant way to categorize and manage data collections, simplifying data processing tasks.
Promise.withResolvers method provides a more controlled and accessible way to handle asynchronous operations, offering developers a streamlined approach for managing promises in their code.
Temporal API revolutionizes managing dates and times in JavaScript, offering a modern, precise, and user-friendly alternative to the traditional Date object.
Top-Level Await simplifies asynchronous programming by allowing await to be used at the module level, making code cleaner and easier to understand.
Regular Expression v Flag introduces new possibilities for complex pattern matching and string manipulation, empowering developers with more expressive and powerful regular expressions.
Well-formed Unicode strings ensure that JavaScript handles text data consistently and accurately across different environments, safeguarding against data corruption and enhancing the reliability of internationalized apps.

These enhancements make JavaScript more robust and easier to use, positioning it as a more powerful tool for developing complex, modern web apps. By embracing these features, developers can write more maintainable, efficient, and error-resistant code, ensuring their apps are ready for the future of web development.

Syncfusion JavaScript UI components library is the only suite you will ever need to build an app. It contains over 85 high-performance, lightweight, modular, and responsive UI components in a single package.

If you are an existing customer, you can access the new version of Essential Studio from the License and Downloads page. For new customers, we offer a 30-day free trial so you can experience the full range of available features.

If you have questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!