Fonctions fléchées dans ES6 : Parenthèses ou accolades – Quand utiliser lesquelles ?

Fonctions fléchées : parenthèses ou accolades

Les fonctions fléchées dans ES6 offrent une syntaxe concise pour définir les fonctions. Cependant, cela peut être déroutant lorsque vous rencontrez des fonctions fléchées avec des formats différents, certaines avec des accolades et d'autres avec des parenthèses.

Parenthèses : expression unique

Fonctions fléchées avec des parenthèses après la grosse flèche, renvoie une seule expression. L'exemple suivant renvoie un élément span :

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

Accolades : expressions multiples

En revanche, les fonctions fléchées avec des accolades exécutent plusieurs lignes de code. Ce format permet des opérations plus complexes, comme la mise à jour de l'état ou la gestion des événements :

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

JSX et lignes multiples

L'exemple avec foo peut paraître déroutant car il utilise JSX (JavaScript XML), qui représente les éléments HTML. Le code semble s'étendre sur plusieurs lignes, mais il est en fait compilé en un seul élément.

Exemples supplémentaires

Voici quelques exemples supplémentaires illustrant la différence :

const a = (who) => `hello ${who}!`; // Parentheses: Single expression
const b = (who) => (`hello ${who}!`); // Parentheses: Equivalent to (a)
const c = (who) => (...
  `hello ${who}!`...); // Curly braces: Multiple lines
const d = (who) => (
  `hello \
    ${who}!` // Curly braces: Multiple lines
);
const e = (who) => {
  return `hello ${who}!`; // Curly braces: Multiple lines with explicit return
};

Parenthèses autour des littéraux d'objet

Vous pouvez également rencontrez des parenthèses autour des littéraux d’objet. Cette pratique évite de confondre l'analyseur, qui pourrait autrement traiter un objet littéral comme un bloc de code :

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

En résumé, les fonctions fléchées avec parenthèses renvoient une seule expression, tandis que celles avec des accolades exécutent plusieurs lignes de code. . Comprendre cette distinction est crucial pour écrire du code ES6 efficace et lisible.

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!