Maison > interface Web > js tutoriel > Différence entre ( )=>{ } et ( )=>( ) fonction aéro en JavaScript (JS)

Différence entre ( )=>{ } et ( )=>( ) fonction aéro en JavaScript (JS)

Susan Sarandon
Libérer: 2024-12-25 13:51:14
original
113 Les gens l'ont consulté

Difference between ( )=>{ } et ( )=>( ) fonction aéro en JavaScript (JS){ } et ( )=>( ) fonction aéro en JavaScript (JS)" />

La différence entre ()=>{} et ()=>() réside dans la façon dont ils gèrent les corps de fonction et relevés de retour en JavaScript. Les deux sont des fonctions fléchées, mais elles se comportent légèrement différemment selon la syntaxe utilisée.


1. ()=>{} (Avec accolades)

  • Syntaxe : Lorsque vous utilisez des accolades {} après la flèche (=>), cela définit un corps de fonction.
  • Si vous souhaitez renvoyer une valeur, vous devez utiliser explicitement le mot-clé return.
  • Sans retour, la fonction ne renvoie rien (c'est-à-dire qu'elle renvoie implicitement undéfini).

Exemple :

const add = (a, b) => {
  return a + b; // Explicit return
};

console.log(add(2, 3)); // Output: 5
Copier après la connexion
Copier après la connexion

Points clés :

  • Les accolades indiquent un corps pleinement fonctionnel.
  • Le mot-clé return doit être explicitement utilisé pour renvoyer une valeur.

2. ()=>() (Avec parenthèses)

  • Syntaxe : Lorsque vous utilisez des parenthèses () après la flèche (=>), cela définit un retour implicite.
  • Il s'agit d'un raccourci pour renvoyer directement une seule expression.
  • Le mot-clé return n'est pas nécessaire et aucune accolade n'est utilisée.

Exemple :

const add = (a, b) => a + b; // Implicit return

console.log(add(2, 3)); // Output: 5
Copier après la connexion

Points clés :

  • Les parenthèses indiquent un retour implicite de l'expression unique à l'intérieur.
  • Pas besoin d'utiliser le mot-clé return.

Quand utiliser lequel ?

Utilisez ()=>{} Quand :

  1. La fonction a plusieurs instructions ou une logique complexe.
  2. Vous devez contrôler explicitement ce qui est renvoyé.

Exemple :

const processNumbers = (a, b) => {
  const sum = a + b;
  const product = a * b;
  return sum + product; // Explicitly return the result
};

console.log(processNumbers(2, 3)); // Output: 11
Copier après la connexion

Utilisez ()=>() Quand :

  1. La fonction est une expression sur une seule ligne qui doit renvoyer une valeur.
  2. Vous souhaitez garder la syntaxe concise.

Exemple :

const square = (x) => x * x; // Implicit return

console.log(square(4)); // Output: 16
Copier après la connexion

Cas délicats

Renvoyer un objet littéral

Si vous souhaitez renvoyer un objet littéral en utilisant un retour implicite, vous devez le mettre entre parenthèses. Sinon, JavaScript interprète le {} comme un corps de fonction.

Exemple :

const add = (a, b) => {
  return a + b; // Explicit return
};

console.log(add(2, 3)); // Output: 5
Copier après la connexion
Copier après la connexion

Tableau récapitulatif

Syntax Behavior Example
()=>{} Full function body, explicit return const add = (a, b) => { return a b; };
()=>() Single-line implicit return const add = (a, b) => a b;

Choisissez entre les deux en fonction de votre cas d'utilisation : clarté pour les fonctions complexes (()=>{}) ou syntaxe concise pour les fonctions simples (()=>()).

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal