ECMAScript 2024
Nouvelles fonctionnalités en JavaScript 2024
| Fonctionnalité | Description | |
|---|---|---|
| Object.groupBy() | Regroupe les éléments d'un objet selon les valeurs retournées par une fonction de rappel. | |
| Map.groupBy() | Regroupe les éléments d'une carte selon les valeurs retournées par une fonction de rappel. | |
| String isWellFormed() | Renvoie vrai si une chaîne est bien formée. | |
| String.toWellFormed() | Renvoie une nouvelle chaîne où les "surrogates isolés" sont remplacés par le caractère Unicode U+FFFD. | |
| Promise.withResolvers() | ||
| Atomics waitAsync |
Avertissement
Ces fonctionnalités sont relativement nouvelles.
Les anciens navigateurs peuvent nécessiter un code alternatif (Polyfill).
JavaScript Object.groupBy()
Exemple
// Créer un tableau
const fruits = [
{name:"apples", quantity:300},
{name:"bananas", quantity:500},
{name:"oranges", quantity:200},
{name:"kiwi", quantity:150}
];
// Fonction de rappel pour regrouper les éléments
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// Regrouper par quantité
const result = Object.groupBy(fruits, myCallback);
Description
La méthode Object.groupBy() regroupe les éléments d'un objet selon les valeurs de chaîne retournées par une fonction de rappel.
La méthode Object.groupBy() renvoie un nouvel objet.
La méthode Object.groupBy() ne modifie pas l'objet original.
Remarque :
Les éléments dans l'objet original et dans l'objet retourné sont les mêmes.
Les modifications futures seront reflétées à la fois dans l'objet original et dans l'objet retourné.
JavaScript Map.groupBy()
Exemple
// Créer une carte
const fruits = [
{name:"apples", quantity:300},
{name:"bananas", quantity:500},
{name:"oranges", quantity:200},
{name:"kiwi", quantity:150}
];
// Fonction de rappel pour regrouper les éléments
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// Regrouper par quantité
const result = Map.groupBy(fruits, myCallback);
Description
La méthode Map.groupBy() regroupe les éléments d'une carte selon les valeurs de chaîne retournées par une fonction de rappel.
La méthode Map.groupBy() renvoie une nouvelle carte.
La méthode Map.groupBy() ne modifie pas l'objet original.
Remarque :
Les éléments dans l'objet original et dans l'objet retourné sont les mêmes.
Les modifications futures seront reflétées à la fois dans l'objet original et dans l'objet retourné.
Object.groupBy() vs Map.groupBy()
La différence entre Object.groupBy() et Map.groupBy() est :
Object.groupBy() regroupe les éléments dans un objet JavaScript.
Map.groupBy() regroupe les éléments dans un objet Map.
JavaScript String isWellFormed()
La méthode isWellFormed() renvoie true si une chaîne est bien formée.
Sinon, elle renvoie false .
Une chaîne n'est pas bien formée si elle contient des surrogates isolés .
Exemples
let text = "Hello world!";
let result = text.isWellFormed(); let text = "Hello World \uD800";
let result = text.isWellFormed(); Surrogates isolés
Un surrogate isolé est un point de code de surrogate Unicode qui ne fait pas partie d'une paire de surrogates valide utilisée pour représenter des caractères dans l'encodage UTF-16.
JavaScript String toWellFormed()
La méthode String toWellFormed() renvoie une nouvelle chaîne où tous les "surrogates isolés" sont remplacés par le caractère de remplacement Unicode (U+FFFD).
Exemples
let text = "Hello World \uD800";
let result = text.toWellFormed(); JavaScript Promise.withResolvers()
Promise.withResolvers() est une méthode statique qui simplifie la création et la gestion des Promises.
Promise.withResolvers() fournit un moyen plus pratique d'accéder aux fonctions resolve et reject associées à une Promise en dehors de sa fonction exécuteur.
Au lieu du modèle traditionnel new Promise((resolve, reject) => { ... }) , Promise.withResolvers() renvoie un objet contenant :
- promise: L'instance de Promise nouvellement créée
- resolve: Une fonction pour remplir la promesse avec une valeur
- reject: Une fonction pour rejeter la promesse avec une raison (erreur)
Exemple
<p id="demo">En attente...</p>
<script>
const {promise, resolve, reject} = Promise.withResolvers();
// Vous pouvez maintenant utiliser 'resolve' et 'reject' n'importe où
// dans votre code pour contrôler l'état de 'promise'.
// Simuler un travail asynchrone
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Opération réussie !");
} else {
reject("Opération échouée !");
}
}, 1000);
// Mettre à jour l'interface utilisateur lorsque la promesse se termine
promise
.then((message) => {
document.getElementById("demo").innerHTML = message;
})
.catch((error) => {
document.getElementById("demo").innerHTML = error; ;
});
</script>
Exemple expliqué
- Le <p id="demo"> montre initialement "En attente..."
- Après 1 seconde, la promesse se résout ou se rejette
- Le résultat est écrit dans "demo"