Quand dois-je utiliser des parenthèses ou des accolades dans les fonctions fléchées JavaScript ?

Fonctions fléchées en détail

Les fonctions fléchées, introduites dans ES6, sont une syntaxe concise pour définir des fonctions. Ils apparaissent souvent avec des notations différentes, utilisant des accolades ou des parenthèses. Cet article approfondit les distinctions entre ces deux variantes.

Définition des fonctions fléchées

Les fonctions fléchées commencent par un ensemble de paramètres et une grosse flèche (=>). La valeur de retour est ensuite déterminée par le corps, entouré soit par :

• Parenthèses : Lorsque le corps est constitué d'une seule expression, des parenthèses sont utilisées, par exemple :

  const foo = (params) => (
  <span>
    <p>Content</p>
  </span>
  );

• Accolades : Si le corps s'étend sur plusieurs lignes ou contient plusieurs déclarations, des accolades sont requises, par exemple :

  const handleBar = (e) => {
  e.preventDefault();
  dispatch('logout');
  };

Comprendre les différences

La distinction réside dans la valeur de retour. Les Parenthèses indiquent qu'une seule valeur est renvoyée, tandis que les accolades signifient l'exécution de plusieurs lignes de code ou de plusieurs instructions.

JSX et parenthèses

En JavaScript XML (JSX), comme on le voit dans foo, le corps peut sembler s'étendre sur plusieurs lignes, mais il se compile en fait en un seul élément. C'est pourquoi les parenthèses sont utilisées dans ce cas.

Lignes et parenthèses multiples

Pour éviter toute confusion, voici des exemples de fonctions fléchées qui donnent toutes le même résultat :

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
};

Éviter le code Les blocs

Les parenthèses sont également utilisées autour des littéraux d'objet dans les fonctions fléchées pour éviter qu'ils ne soient interprétés comme des blocs de code, par exemple :

const x = () => {} // Does nothing
const y = () => ({}) // returns an object

En conclusion, le choix entre les accolades et Les parenthèses dans les fonctions fléchées dépendent de si vous souhaitez renvoyer une seule valeur ou exécuter plusieurs lignes de code. Comprendre les nuances de ces notations vous aidera à utiliser efficacement les fonctions fléchées dans votre code JavaScript.

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!