Quoi de neuf dans JavaScript : édition ECMAScript

TL;DR : Découvrez les fonctionnalités révolutionnaires de JavaScript ECMAScript 2024. Ce guide explore les dernières innovations conçues pour transformer votre expérience de codage. De la nouvelle méthode groupby pour un regroupement de données sans effort à l'API temporelle révolutionnaire qui simplifie la gestion de la date et de l'heure, ECMAScript 2024 regorge d'outils qui améliorent l'efficacité et la précision.

ECMAScript est un composant fondamental de JavaScript. Depuis le milieu des années 1990, ECMAScript a évolué pour offrir aux développeurs de nouvelles fonctionnalités, enrichissant ainsi la nature dynamique et conviviale des expériences Web. Des scripts simples aux frameworks complexes, ils influencent le paysage numérique et alimentent la créativité et l'innovation dans le développement Web.

Au fil des années, de nombreuses éditions d'ECMAScript ont été publiées, chacune apportant de nouvelles fonctionnalités et améliorations. Dans ce guide, j'expliquerai les nouveautés du dernier ECMAScript 2024 (édition 15). Préparez-vous à explorer les dernières fonctionnalités qui vont révolutionner notre façon de coder !

Regroupement d'Itérables synchrones avec la méthode groupBy

Les développeurs JavaScript doivent souvent organiser les données en groupes en fonction de critères spécifiques. La nouvelle méthode groupBy dans ECMAScript 2024 rend cette tâche un jeu d'enfant. Imaginez que vous ayez une collection d'éléments et que vous souhaitiez les regrouper selon une propriété spécifique – groupBy est votre outil incontournable pour cela !

Qu’est-ce que groupBy ?

La méthode groupBy est une méthode statique disponible sur Object et Map. Il vous permet de regrouper rapidement et efficacement des éléments dans une collection en fonction d'une clé dérivée de chaque élément. Le résultat est un nouvel objet où chaque clé correspond à un groupe et la valeur est un tableau d'éléments appartenant à ce groupe.

Disons que vous avez un large éventail de personnes et que vous souhaitez les regrouper par âge. Voici comment procéder en utilisant la méthode groupBy.

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);

Sortie

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

Promesse.withResolvers()

Les promesses JavaScript ont toujours été nos fidèles compagnons pour gérer les opérations asynchrones. Mais avec ECMAScript 2024, il y a un nouvel outil en ville : Promise.withResolvers(). Cette puissante méthode statique vous donne les clés pour contrôler totalement le sort d’une promesse directement depuis le code externe, qu’elle soit résolue ou rejetée.

Cette fonction Promise.withResolvers() renvoie un objet avec trois propriétés : une nouvelle promise avec les fonctions resolve et reject qui y est associé.

Disons que vous gérez une tâche qui peut être terminée ou annulée en fonction de la saisie de l'utilisateur. Voici comment utiliser la fonction Promise.withResolvers().

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));

Temporel

Avez-vous déjà eu des difficultés avec l'API Date de JavaScript ? Cela peut être assez difficile.

Dans ECMAScript 2024, une API moderne et puissante appelée Temporal est conçue pour rendre le travail avec les dates et les heures plus facile, plus intuitif et plus précis. Cette API révolutionnaire corrige les bizarreries de l'ancien objet Date et apporte une foule de nouvelles fonctionnalités.

L'API Temporelle est la nouvelle façon de JavaScript de gérer les dates et les heures. Contrairement à l'ancienne API Date, qui peut être lourde et sujette aux erreurs, Temporal offre une approche plus précise et flexible.

Par exemple, si vous prévoyez une date limite de projet dans 90 jours à compter d'aujourd'hui, Temporal simplifie le calcul de la date exacte.

Référez-vous à l'exemple de code suivant.

// 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"

Cet exemple montre comment Temporal peut simplifier les tâches de planification, ce qui en fait un outil essentiel pour tout développeur JavaScript traitant d'opérations basées sur le temps.

Expression régulière contre drapeau

ECMAScript 2024 introduit une nouvelle amélioration des expressions régulières : le v flag. Cet ajout permet une correspondance de modèles et une manipulation de chaînes plus sophistiquées, donnant aux développeurs un meilleur contrôle sur la gestion des tâches complexes de traitement de texte.

Le v flag est avant tout une question de précision et d'expressivité dans les expressions régulières. Il introduit la notation ensembliste, qui facilite la définition de modèles correspondant à des groupes spécifiques de caractères, en particulier ceux dotés de propriétés Unicode particulières. Cela signifie que vous pouvez créer des modèles d'expressions régulières plus précis et plus lisibles.

Explorons comment le v flag peut être utilisé dans une expression régulière pour faire correspondre un ensemble de caractères en fonction de leurs propriétés Unicode.

// 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", "Ω", "Ω", "ß", "漢", "字"]

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

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!'

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!

Blogs connexes

• Comment joindre deux tables à l'aide du générateur de requêtes JavaScript ?
• Créez des applications Web statiques Azure évolutives pour gérer les sites Web à fort trafic
• Optimiser la gestion de la mémoire dans le tableau croisé dynamique JavaScript : bonnes pratiques et astuces
• Créez facilement des diagrammes de planificateur d'étage interactifs à l'aide de la bibliothèque de diagrammes JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!