Nouvelles fonctionnalités JavaScript que tout développeur devrait connaître

JavaScript est en constante évolution et, à chaque nouvelle version, il introduit des fonctionnalités qui facilitent un peu notre vie de développeurs. Certaines de ces fonctionnalités changent la donne, améliorant la façon dont nous écrivons et gérons notre code. Si vous êtes un codeur quotidien, il est important de rester à jour avec ces nouvelles fonctionnalités. Dans cet article, je vais vous présenter certaines des dernières fonctionnalités JavaScript qui sont très utiles et devraient figurer dans votre boîte à outils.

1. Chaînage facultatif (?.)

L'une des fonctionnalités les plus utiles ajoutées dans les versions récentes de JavaScript est le chaînage facultatif. Cela nous permet d'accéder en toute sécurité aux propriétés profondément imbriquées dans les objets sans nous soucier de savoir si une propriété intermédiaire est nulle ou indéfinie.

Exemple:

Imaginez que vous ayez un objet utilisateur qui peut ou non avoir un profil :

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

Sans chaînage facultatif, vous devrez vérifier manuellement chaque propriété, ce qui peut rendre le code compliqué. Ce petit opérateur nous aide à éviter ces contrôles, rendant le code plus propre et plus facile à lire.

2. Opérateur de coalescence nul (??)

L'opérateur de fusion nul (??) est une autre fonctionnalité intéressante introduite pour aider à gérer les valeurs nulles ou non définies sans affecter d'autres valeurs fausses comme 0 ou faux.

Exemple

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

Contrairement au OU logique (||), qui traite une chaîne vide ("") ou 0 comme de fausses valeurs, ?? ne renverra l'opérande de droite que si la gauche est nulle ou indéfinie.

3. Promise.allSettled()

Si vous travaillez avec des promesses en JavaScript, vous avez probablement utilisé Promise.all(). Mais saviez-vous qu'il existe une version plus puissante appelée Promise.allSettled() ? Cette méthode attend que toutes les promesses soient réglées, qu'elles aient été tenues ou rejetées. C’est super pratique quand on a besoin de connaître le résultat de toutes les promesses, même si certaines échouent.

Exemple:

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

C'est un excellent moyen de gérer plusieurs opérations asynchrones lorsque vous ne voulez pas qu'un seul échec interrompe l'ensemble du processus.

4. BigInt pour les grands nombres

Nous avons tous été confrontés à ce problème de dépassement des limites du type Number de JavaScript. Les nombres JavaScript sont limités aux valeurs comprises entre -(2^53 - 1) et (2^53 - 1). Si vous devez travailler avec des nombres plus grands que cela, BigInt est votre ami.

Exemple:

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

Cela vous donnera la possibilité de travailler avec des entiers arbitrairement grands sans vous soucier des erreurs de précision.

5. String.prototype.replaceAll()

Si vous avez déjà essayé de remplacer toutes les occurrences d'une sous-chaîne dans une chaîne, vous avez probablement utilisé une expression régulière avec la méthode replace(). Avec replaceAll(), c'est beaucoup plus simple. Cette méthode remplace toutes les occurrences d'une sous-chaîne et vous n'avez pas à vous soucier des indicateurs d'expression régulière globale.

Exemple:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

C'est simple, plus propre et élimine le besoin d'expressions régulières.

6. Opérateurs d'affectation logique (&&=, ||=, ??=)

Ces nouveaux opérateurs fournissent un raccourci pour combiner des opérateurs logiques avec des affectations. C'est un excellent moyen d'écrire du code plus concis.

• &&= : attribue la valeur uniquement si la valeur de gauche est véridique.
• ||= : Attribue la valeur uniquement si la valeur de gauche est fausse.
• ??= : Attribue la valeur uniquement si la valeur de gauche est nulle ou indéfinie.

Exemple:

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

Ces raccourcis vous aident à réduire la verbosité de votre code.

7. Objet.fromEntries()

Si vous avez déjà eu besoin de convertir une liste de paires clé-valeur en un objet, Object.fromEntries() vous facilite la tâche. C'est particulièrement utile lorsque vous travaillez avec des objets Map ou des tableaux de tuples.

Exemple:

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

Cette méthode est une alternative plus propre et plus lisible à la construction manuelle d'objets.

8. Array.prototype.flatMap()

Cette méthode est une combinaison de map() suivi de flat(). Il vous permet à la fois de mapper et d'aplatir les résultats en une seule étape, ce qui peut être très utile lorsque vous travaillez avec des tableaux de tableaux.

Exemple:

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

C'est plus propre que d'effectuer un map() suivi de flat() séparément.

9. Tableau.prototype.at()

Cette nouvelle méthode facilite l'accès aux éléments depuis la fin d'un tableau à l'aide d'index négatifs. C'est beaucoup plus intuitif que de calculer manuellement l'index du dernier élément.

Exemple:

let message = 'Hello World, Welcome to the World!';
let updatedMessage = message.replaceAll('World', 'Universe');
console.log(updatedMessage);  // Hello Universe, Welcome to the Universe!

Cela simplifie le travail avec les derniers éléments d'un tableau.

10. Attente de haut niveau

En JavaScript, nous avons toujours dû utiliser wait dans une fonction asynchrone. Mais avec wait de niveau supérieur, vous pouvez désormais utiliser wait directement au niveau supérieur des modules, ce qui rend votre code asynchrone plus simple.

Exemple:

let count = 0;
count ||= 10;  // count is now 10, because it was falsy
console.log(count);  // 10
let name = null;
name ??= 'Anonymous';  // name is now 'Anonymous'
console.log(name);  // Anonymous

Cela rend le travail avec du code asynchrone beaucoup plus simple dans le JavaScript moderne.

11. Champs de classe privée

Si vous avez toujours voulu rendre les variables privées dans les classes JavaScript, les champs de classe privés sont désormais possibles. Vous pouvez désormais définir des variables qui ne sont pas accessibles depuis l'extérieur de la classe, à l'aide du symbole #.

Exemple:

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

12. Tri stable (Array.prototype.sort())

Auparavant, la méthode sort() de JavaScript n'était pas stable, ce qui signifiait que des éléments égaux pouvaient être mélangés de manière imprévisible. Désormais, JavaScript garantit que les éléments ayant la même valeur conservent leur ordre d'origine dans le tableau.

Exemple:

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

Cela garantit un comportement plus prévisible et cohérent.

Conclusion

JavaScript continue d'évoluer et ces fonctionnalités apportent à la fois commodité et puissance aux développeurs. Que vous travailliez avec du code asynchrone, que vous traitiez de grands nombres ou que vous nettoyiez simplement vos manipulations d'objets et de tableaux, ces nouvelles fonctionnalités peuvent vous aider à écrire un code plus propre et plus efficace. Si vous ne l'avez pas déjà fait, commencez à les expérimenter dans vos projets et voyez comment ils peuvent rendre votre flux de travail plus fluide.

Bon codage ! ?

Veuillez me suivre pour obtenir un contenu plus précieux

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!