web-dev-qa-db-fra.com

Que signifient les parenthèses enveloppant l'objet littéral dans une fonction flèche?

J'ai vu du code JavaScript comme celui-ci:

let a = () => ({ id: 'abc', name: 'xyz' })

Que font les parenthèses ( … ) envelopper l'objet auquel se référer dans ce cas? Est-ce un raccourci pour return?

javascriptecmascript-6arrow-functions
26
Stanley

Non. Ces parenthèses produisent un objet littéral. Les fonctions fléchées ont de nombreuses syntaxes, dont l'une est:

( … ) => expression

Cela renverra implicitement une expression, par exemple:

() => 1 + 1

Cette fonction renverra implicitement 1 + 1, lequel est 2. Un autre est le suivant:

( … ) => { … }

Cela créera un bloc pour héberger plusieurs instructions si vous ne voulez pas renvoyer implicitement une expression, et si vous voulez faire des calculs intermédiaires ou ne pas retourner du tout de valeur. Par exemple:

() => {
  const user = getUserFromDatabase();
  console.log(user.firstName, user.lastName);
}

Le problème survient lorsque vous souhaitez renvoyer implicitement un objet littéral. Vous ne pouvez pas utiliser ( … ) => { … } car il sera interprété comme un bloc. La solution consiste à utiliser des parenthèses.

Les parenthèses sont là pour le { … } pour être interprété comme un objet littéral, pas un bloc. Dans opérateur de regroupement , ( … ), seules les expressions peuvent exister en leur sein. Les blocs ne sont pas des expressions mais les littéraux d'objet le sont , donc un littéral d'objet est supposé. Ainsi, au lieu de créer un bloc, il utilisera cette syntaxe:

( … ) => expression

Et renvoyer implicitement un objet littéral. Sans les parenthèses, il sera interprété comme labels et des chaînes, pas des clés et des valeurs d'un objet littéral.

let a = () => { 
  id: 'abc', //interpreted as label with string then comma operator
  name: 'xyz' // interpreted as label (throws syntax error)
}

La virgule ici serait interprétée comme opérateur virgule , et puisque les opérandes doivent être des expressions , et que les étiquettes sont des instructions, il va lancer une erreur de syntaxe.

40
Li357

Il vous permet de créer un expression, donc

let a = () => ({ id: 'abc', name: 'xyz' })

spécifie que a lorsqu'il est invoqué, retourne l'objet inclus

Si vous supprimez le () Dans ce cas, il générera une erreur car ce n'est pas une instruction de corps de fonction valide, car les {} Dans let a = () => { id: 'abc', name: 'xyz' } sont interprétés comme les limites d'une déclaration, mais le contenu à l'intérieur n'est pas valide si vous le regardez.

let a = () => {
    id: 'abc',    /* Not valid JS syntax */
    name: 'xyz'
}
8
Teedeez