31 points par GN⁺ 2025-04-16 | 4 commentaires | Partager sur WhatsApp
  • JavaScript continue d’évoluer en 2025, et certaines fonctionnalités, peu connues, sont pourtant très utiles
  • Les nouvelles méthodes utilitaires d’Iterator fonctionnent de façon bien plus efficace en mémoire lors de transformations de grands volumes de données
  • Accès à la fin d’un tableau avec at(), usage simplifié de Promise.withResolvers(), copie profonde avec structuredClone(), etc.
  • Les opérations d’ensemble sur Set, les fonctions de tag de template strings et l’usage de WeakMap/WeakSet restent encore ignorés par beaucoup de développeurs

Méthodes utilitaires d’Iterator

  • Avec un chaînage classique comme arr.filter().map(), un nouveau tableau est créé à chaque étape, ce qui est inefficace
  • On peut améliorer cela avec un chaînage basé sur les itérateurs comme arr.values().drop(10).take(10).map(...).toArray()
  • Principales méthodes :
    • drop() : ignore les n premiers éléments
    • take() : ne prend que les n premiers éléments
    • filter(), map(), flatMap() : fonctionnent de manière similaire aux méthodes de tableau
    • reduce(), some(), every(), find() : prennent en charge les tests de condition et les calculs cumulés
    • toArray() : convertit le résultat final en tableau
  • Safari prend en charge ces méthodes depuis le 31 mars 2025, mais tous les navigateurs ne les supportent pas encore

Array.at()

  • arr.at(n) est similaire à arr[n], mais permet aussi l’indexation négative pour accéder depuis la fin
  • Exemple : [10, 20, 30].at(-1)30
  • Cela permet d’accéder au dernier élément sans passer par une écriture peu pratique comme arr[arr.length - 1]

Promise.withResolvers()

  • Ancienne approche : stocker resolve/reject à l’extérieur d’un new Promise((resolve, reject) => { ... })
  • Désormais : const { promise, resolve, reject } = Promise.withResolvers() permet un usage plus concis et plus intuitif

Utiliser un callback avec String.replace()

  • Le deuxième argument de replace() et replaceAll() peut être non seulement une chaîne, mais aussi une fonction callback
  • Exemple : "X, X, X".replaceAll("X", (match, i) => match + i)"X0, X3, X6"
  • Cela permet d’effectuer différents remplacements en une seule passe → plus efficace en performance et en mémoire

Échange de variables (swap)

  • Approche classique : utiliser une variable temp
  • Approche concise : [a, b] = [b, a], soit un échange de variables via la déstructuration de tableau

structuredClone()

  • À la place de JSON.stringify() + JSON.parse(), cette méthode fournit une copie profonde plus fiable et plus efficace
  • Avantages :
    • prise en charge de NaN, undefined, bigint, etc.
    • copie sûre même en présence de références circulaires
    • meilleure efficacité mémoire et vitesse sur de gros objets

Tagged Template Literals

  • Il est possible d’analyser une template string avec une fonction spécifique
  • Utile pour le post-traitement dynamique de chaînes, par exemple l’échappement HTML
  • Exemple :
    avec la fonction de tag escapeHtml, <br> ${'<br>'}<br> <br>

WeakMap / WeakSet

  • Similaires à Map et Set, mais avec deux différences :
    • seuls les objets peuvent servir de clé (pas les valeurs primitives)
    • les entrées sont supprimées automatiquement lorsqu’elles deviennent éligibles au GC
  • Adaptés aux cas où des références circulaires sont possibles ou lorsqu’il faut stocker des métadonnées d’objet sans effets de bord

Prise en charge des opérations d’ensemble sur Set

De nouvelles opérations logiques ont été ajoutées à l’objet Set en JavaScript :

  • difference() : différence (A - B)
  • intersection() : intersection (A ∩ B)
  • union() : union (A ∪ B)
  • symmetricDifference() : différence symétrique (A △ B)
  • isDisjointFrom() : vérifie l’absence d’éléments communs
  • isSubsetOf() : vérifie s’il s’agit d’un sous-ensemble
  • isSupersetOf() : vérifie s’il s’agit d’un sur-ensemble

4 commentaires

 
wfedev 2025-04-23

Il semble que le problème où, lors de l’analyse des littéraux, même les variables étaient converties en chaînes ait été résolu. Merci pour le partage.

 
pompapa 2025-04-17

Ex. : "X, X, X".replaceAll("X", (match, i) => match + i)"X0, X1, X2"

L’exemple est incorrect. i contient la position de la correspondance.
Donc la valeur obtenue est "X0, X3, X6".

 
xguru 2025-04-17

Ah oui, en effet. L’IA avait généré un exemple erroné. Je l’ai corrigé. Merci pour cette remarque pertinente !

 
click 2025-04-16

values donne une impression similaire à la Java Stream API, donc j’ai comparé : quand la taille du tableau est petite, faire un filter sans values est plus rapide. Comme c’est basé sur des itérateurs, on peut aussi imaginer que plus le chaînage augmente, plus le fait de passer une fois par values devient avantageux. Vous pouvez consulter le benchmark ici : https://jsperf.app/dixutu