5
votes

Syntaxe JavaScript qui ressemble à la fonction Array: [variable] ({key}, arg) {}

On m'a demandé d'étudier le code de l'employeur, Dans le code, l'employeur a fait quelque chose comme ceci:

 [ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {

Maintenant, dans ce cas, je suis incapable de rectifier cette ligne de code

export const actions = {
  [ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {
    const type = payload

Comme est-ce une fonction ou quoi? Quelqu'un peut-il m'expliquer la syntaxe ci-dessus?


3 Réponses :


1
votes

Le nouveau JavaScript permet aux noms de propriétés dans les expressions littérales d'objet (ce que ce bloc {} d'initialisation des actions est appelé) à calculer les noms de propriété à partir d'expressions en autorisant [] pour les noms de propriétés au lieu des identifiants ou des constantes de chaîne comme par le passé.

Cela signifie donc que ACTIONS.ITEM_LIST.LOAD.name doit être évaluée, et la valeur de chaîne de tout ce qui finit par être est utilisée comme nom de la propriété de fonction de l'objet. (C'est aussi une nouvelle fonctionnalité du langage; auparavant, les propriétés devaient être strictement name: value ).

Maintenant, dans la liste de paramètres formels de cette fonction, {commit} est un paramètre formel de déstructuration . Cela signifie que la fonction s'attend à ce que le premier argument soit un objet, et donc à l'intérieur de la fonction, le paramètre (variable) commit doit être lié à la valeur de la propriété "commit" de cet objet (ou undefined s'il n'y a pas de telle propriété).

Donc, si nous supposons à des fins d'exemple que ACTIONS.ITEM_LIST.LOAD.name évalue à la chaîne " xyz ", alors on pourrait appeler:

var result = actions.xyz({ foo: "bar", commit: "everything" }, somePayload);

et dans la fonction la chaîne" tout "serait la valeur du paramètre commit .


0 commentaires

1
votes

Il utilise la syntaxe de l'objet méthode en combinaison avec noms de propriétés calculés et destructuring dans la liste des paramètres. ACTIONS.ITEM_LIST.LOAD évalue vraisemblablement à un objet: accéder à la propriété .name de l'objet équivaut probablement à une chaîne. Par exemple, si la chaîne est "foo", alors la ligne est équivalente à:

const actions = {
  'foo': function(arg1, payload) {
    let commit = arg1.commit; // using "let" because parameters can be reassigned
    const type = payload
    // ...
};
export actions;

(techniquement, ce n'est pas entièrement équivalent , mais c'est presque le cas - les méthodes objet ne peuvent pas être utilisées comme constructeurs.)


0 commentaires

0
votes

[ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {

se résoudra à la syntaxe de déclaration de fonction:

functionName (arguments) { déclarations }

Il y a plusieurs choses qui jouent ici. Premièrement, actions est un objet. Ensuite, il utilise une nouvelle syntaxe de nom de propriété calculée. c'est-à-dire que [ACTIONS.ITEM_LIST.LOAD.name] fournira une partie functionName de notre syntaxe. Notez que ce n'est pas un tableau, c'est une propriété calculée qui sera également une clé de notre dictionnaire d'actions. Enfin, il utilise la syntaxe des noms de méthodes abrégés pour créer une fonction dans l'objet actions sans l'écrire sous forme de notation "clé: valeur" . Ceci est également nouveau dans ECMAScript2015.

Ce lien ici vous donnera une idée claire si je ne dissipe pas tous vos doutes.


0 commentaires