Que font les accolades à l'intérieur des listes de paramètres de fonction dans es6?

122

Je continue de voir des fonctions qui ressemblent à ceci dans une base de code sur laquelle je travaille:

const func = ({ param1, param2 }) => {
  //do stuff
}

Qu'est-ce que cela fait exactement? J'ai du mal à le trouver sur Google, car je ne sais même pas comment cela s'appelle, ni comment le décrire dans une recherche Google.

javascript ecmascript-6

— Nathan
source

duplication possible de la syntaxe des paramètres d'objet pour les fonctions javascript?

— Bergi

117

Il est déstructurant , mais contenu dans les paramètres. L'équivalent sans la déstructuration serait:

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}

— James Thorpe
source

12

Juste pour être sûr que je comprends bien, cela signifie essentiellement qu'un objet contenant ces propriétés serait passé dans la fonction, puis dans la fonction, les propriétés sont automatiquement accessibles en utilisant simplement leur nom?

— Nathan

7

@Nathan Oui, voir spécifiquement la section sur la déstructuration d'objets . Notez cependant que les mises à jour des variables ne mettront pas à jour les propriétés de l'objet d'origine - ce n'est pas comme si elle créait une référence à la valeur d'origine.

— James Thorpe

@JamesThorpe, il serait préférable de

— créer un

11

Cela passe un objet en tant que propriété.

C'est essentiellement un raccourci pour

let param1 = someObject.param1
let param2 = someObject.param2

Une autre façon d'utiliser cette technique sans paramètres est la suivante, considérons alors pendant une seconde que someObject contient ces propriétés.

let {param1, param2} = someObject;

— Oz Lodriguez
source

3

C'est une affectation de déstructuration d'objet. Comme moi, vous avez peut-être trouvé cela surprenant car la syntaxe de déstructuration d'objets ES6 ressemble, mais ne se comporte PAS comme une construction littérale d'objet.

Il prend en charge la forme très concise que vous avez rencontrée, ainsi que le changement de nom des champs et des arguments par défaut:

Il s'agit essentiellement de {oldkeyname: newkeyname = defaultvalue, ...}. ':' n'est PAS le séparateur clé / valeur; '=' est.

Certaines retombées de cette décision de conception de langage sont que vous devrez peut-être faire des choses comme

; ({a, b} = un_objet);

Les parenthèses supplémentaires empêchent l'analyse des accolades gauches en tant que bloc, et le point-virgule de tête empêche les parenthèses d'être analysées comme un appel de fonction à une fonction sur la ligne précédente.

Pour plus d'informations, voir: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Attention, les erreurs clés lors de l'affectation de déstructuration d'objet ne sont PAS générées; vous vous retrouvez juste avec des valeurs "indéfinies", que ce soit une erreur de clé ou une autre erreur qui a été propagée silencieusement comme "non définie".

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>

— Andrew Wagner
source