Fonctionnalités JavaScript modernes : nouveautés d'ES3

JavaScript évolue constamment et apporte chaque année un nouvel ensemble de fonctionnalités conçues pour faciliter la vie des développeurs. ES2023, la dernière mise à jour, regorge de nouveaux outils qui améliorent la façon dont nous écrivons, lisons et maintenons le code. Examinons quelques-unes des fonctionnalités exceptionnelles que vous souhaiterez commencer à utiliser dans vos projets.

1. Tableau findLast et findLastIndex

Avez-vous déjà eu besoin de rechercher un élément dans un tableau en commençant par la fin ? ES2023 introduit findLast et findLastIndex, qui font exactement cela.

• findLast : Cette méthode recherche le dernier élément d'un tableau qui répond à une condition spécifiée.

  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 : cette méthode renvoie l'index de ce dernier élément.

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

Ces méthodes sont idéales pour les situations où vous devez inverser votre logique de recherche, rendant votre code plus clair et potentiellement plus efficace.

2. Hashbangs (#!) dans les fichiers JavaScript

Si vous écrivez des outils de ligne de commande en JavaScript, vous apprécierez la nouvelle prise en charge des hashbangs. En ajoutant un #! en haut de votre fichier, vous pouvez spécifier directement l'interpréteur, rendant votre script exécutable sans avoir besoin d'une commande externe.

#!/usr/bin/env node

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

Il s'agit d'une fonctionnalité petite mais pratique, en particulier pour ceux qui créent des outils CLI dans Node.js.

3. Symboles comme clés WeakMap

Auparavant, seuls les objets pouvaient être utilisés comme clés dans WeakMap, mais ES2023 change cela en autorisant également les symboles.

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

Cette amélioration rend WeakMap encore plus polyvalent, en particulier lorsque vous avez besoin de clés uniques et sans collision fournies par les symboles.

4. Regroupement de tableaux par méthode

Le regroupement des éléments du tableau est devenu beaucoup plus facile avec la nouvelle méthode de groupe.

• group : Cette méthode organise votre tableau en un objet, avec des clés déterminées par une fonction que vous fournissez et des valeurs sous forme de tableaux d'éléments correspondant à chaque clé.

  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' }]
  // }

Cette fonctionnalité est parfaite pour les scénarios dans lesquels vous devez catégoriser les données rapidement et efficacement.

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

Le tri des tableaux est devenu beaucoup plus propre avec toSorted. Contrairement au tri, qui modifie le tableau d'origine, toSorted renvoie un nouveau tableau trié et toReversed renvoie un nouveau tableau inversé, laissant l'original intact.

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

Cette méthode est idéale lorsque vous devez conserver le tableau d'origine tout en travaillant avec une version triée.

6. Array.prototype.avec

La méthode with fournit un moyen simple de créer un nouveau tableau en remplaçant un élément à un index spécifique.

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

Cette méthode est parfaite lorsque vous souhaitez mettre à jour un tableau de manière immuable, ce qui facilite la gestion de l'état dans les modèles de programmation fonctionnelle.

7. Promesse.avecRésolveurs

Gérer les promesses n'a jamais été aussi simple, grâce à Promise.withResolvers. Cette nouvelle méthode vous permet de créer une promesse ainsi que ses fonctions de résolution et de rejet en une seule fois.

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

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

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

C'est une manière simple et concise de gérer les opérations asynchrones, en particulier lorsque vous devez contrôler le résultat de la promesse depuis l'extérieur de son constructeur.

Prise en charge du navigateur pour ES2023

ES2023, la dernière version de JavaScript, est assez nouvelle puisqu'elle vient d'être terminée en 2023. Cela signifie que tous les navigateurs Web ne peuvent pas encore utiliser ses nouvelles fonctionnalités, mais ils commencent à :

• Firefox, Chrome et Edge prennent en charge certaines fonctionnalités Array.prototype.findLast() et Array.prototype.findLastIndex()
• Safari ne prend encore en charge aucune de ces fonctionnalités.

• Node.js

  • Node.js version 19.0 et ultérieure peut utiliser :
    • Array.prototype.findLast()
    • Array.prototype.findLastIndex() Il est prévu d'ajouter davantage de fonctionnalités ES2023 dans les futures mises à jour.

Transpileurs :
Pour utiliser les nouvelles fonctionnalités ES2023 dès maintenant, les développeurs peuvent transformer le code ES2023 en une ancienne version que davantage de navigateurs comprennent, à l'aide d'outils appelés transpilateurs, comme Babel. De cette façon, vous pouvez commencer à utiliser les nouveautés même si les navigateurs ne sont pas encore prêts.

À l’heure actuelle, le soutien à l’ES2023 continue de croître. Les grands navigateurs comme Firefox et Chrome commencent à inclure certaines de ses fonctionnalités. Pour plus de détails sur ce qui est pris en charge et où, vous pouvez consulter Puis-je utiliser. L'utilisation de transpilateurs permet de rendre ces nouvelles fonctionnalités utilisables aujourd'hui, en attendant que les navigateurs rattrapent leur retard dans les années à venir.

Conclusion

ES2023 apporte une gamme de nouvelles fonctionnalités qui rendent JavaScript plus puissant et plus facile à utiliser. Des méthodes de tableau améliorées à une meilleure gestion des promesses, ces mises à jour visent à rendre votre code plus propre et plus efficace. À mesure que JavaScript continue de croître et d'évoluer, rester au courant de ces changements garantit que vous tirerez toujours le meilleur parti du langage.

Références :

1. Propositions TC39
2. Projet ECMA-262
3. MDN

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!