Récemment, je cherchais un moyen de réécrire une instruction switch / case laide et suis tombé sur cet article Medium .
J'ai réécrit mon switch / case en une fonction es6 comme celle-ci:
const url = category => ({
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
})[category]
Quand j'appelle ceci fonction avec quelque chose comme const response = url (category); cela fonctionne, ce qui est génial! Mais ensuite, je me suis demandé ce que signifie exactement la [catégorie] à la fin de la fonction. Je pensais que c'était peut-être une fonction immédiatement appelée, mais cela ne me semblait pas non plus correct.
L'article mentionne que c'est un objet littéral, mais quand je suis allé aux documents MDN, je n'ai rien trouvé qui expliqué ce que c'est ou ce qu'il fait, ou même des exemples qui présentent la même chose.
Alors, que fait-il?
3 Réponses :
Ce n'est pas "après" la fonction, c'est dans le corps des fonctions. Il peut également être écrit comme suit:
const url = category => {
const obj = {
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
};
return obj[category];
};
Il s’agit donc simplement d’une recherche de propriété dynamique dans l’objet.
Ah ok ça a du sens. Je suppose que les crochets m'ont tout simplement dérouté parce que je suis tellement habitué à voir les fonctions IIFE. Merci d'avoir répondu!
Les notations abrégées JavaScript sont certainement mûres pour créer une syntaxe déroutante. Vous devez regarder attentivement pour dire que ce n'est pas une sorte d'IIFE.
@Barmar: Regarder l'AST peut aider, si on est à l'aise avec ça. Plug sans vergogne: astexplorer.net .
Ce raccourci équivaut à peu près à la syntaxe de fonction traditionnelle suivante:
function url(category) {
var obj = {
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
};
return obj[category];
}
Il est plus facile de voir ce qui se passe lorsque vous créez une variable nommée pour l'objet.
Le les parenthèses sont nécessaires autour de l'objet dans la fonction de flèche car si une fonction de flèche commence par {, elle est traitée comme un corps contenant des instructions, plutôt qu'une valeur à renvoyer.
mettez [category] immédiatement après le littéral de l'objet, plutôt qu'après la parenthèse fermée, cela aurait pu être plus clair.
Ce qui vous trouble ici, ce sont les accolades.
Imaginez que vous avez une expression d'objet et que vous utilisez un évaluateur de propriété sur la variable qui pointe vers l'objet.
function getUrl(category) {
return ({
'itemA': itemAService.getItemCategories(payload),
'itemB': itemBService.getItemCategories(payload),
})[category]
}
Maintenant, comment appelleriez-vous un évaluateur immobilier sur un objet littéral? Vous avez besoin d'accolades autour d'eux pour compléter la syntaxe abrégée.
return {foo: 1, bar: 2}["foo"]; // WRONG Syntax
return ({foo: 1, bar: 2})["foo"]; // CORRECT syntax
Ainsi, votre fonction peut être réécrite en utilisant la syntaxe traditionnelle suivante.
obj = {foo: 1, bar: 2}
return obj["foo"]; //returns 1
Identique à
objet [propriété]. Plus d'informations ici: MDN .C'est juste un accesseur clé. La fonction renvoie un objet, donc essentiellement il s'agit simplement d'assigner un objet, puis d'utiliser la notation entre crochets pour choisir l'objet passé