Question ES6 / Next: déstructuration d'objets avec repos - regroupement


J'ai:

const props = {
  gallery: [],
  select: () => null,
  one: 1,
  two: 2,
}

Je peux le déstructurer avec:

const {gallery, select, ...other} = props

Je vais avoir trois variables maintenant:

  • Galerie = []
  • sélectionner = () => null
  • autre = {one: 1,two: 2}

Est-il possible de déstabiliser un groupe spécifique?

Quelque chose comme ça (ça ne va pas marcher mais j'espère que c'est clair pour voir ce que j'essaie de faire):

const {{gallery, select}: specific, ...other} = props

Donc j'aurai 2 variables:

  • spécifique = {gallery: [], select: () => null}
  • autre = {one: 1,two: 2}

Je pourrais le résoudre au niveau supérieur et construire les accessoires de cette manière:

const props = {
  specific: {
    gallery: [],
    select: () => null,
  },
  other: {
    one: 1,
    two: 2,
  }
}

Mais je me demande si cela est possible avec la déstructuration.


13
2017-11-03 10:22


origine


Réponses:


Et ça? others contient aussi le specific données et je dois d'abord accéder à la props (peut-être que cela pourrait être amélioré), mais je pense que cela se résume essentiellement en déstructurant. Cela fonctionne car vous pouvez attribuer une valeur par défaut lorsque l'attribut n'existe pas:

const props = {
  gallery: [],
  select: () => null,
  one: 1,
  two: 2,
}

const {gallery : gal, select : sel} = props;
const {specific: specific={gallery: gal, select: sel}, ...others} = props;

console.log(specific);
console.log(others);

MODIFIER

Vous pouvez également changer

const {gallery : gal, select : sel} = props;
const {specific: specific={gallery: gal, select: sel}, ...others} = props;

avec:

const {specific: specific={gallery: props.gallery, select: props.select}, ...others} = props;

si vous le voulez dans une ligne.

Aussi, réponse de maioman résout le problème que j'ai mentionné avec others contenant le specific données et n’accède pas directement aux accessoires.


8
2017-11-03 11:08



En étendant la syntaxe (et la lisibilité) à la limite, vous pouvez le faire:

(l'explication du code est dans les commentaires)

const props = {
  gallery: [],
  select: () => null,
  one: 1,
  two: 2,
}

/** destructuring assignment **/
const {
  gallery, //extract the gallery prop
  select, //extract the select prop
  specific: specific={gallery, select},
  // create `specific` setting gallery and select props through default value assignment 
  ...others // assign to others the rest of non extracted props properties
} = props;

console.log(specific);
console.log(others);

En fin de compte, nous obtenons un gallery et un select objet dans la portée, mais nous avons réussi à les rendre également propriétés d'un nouveau specific objet.

Avertissement d'utilisation: la propagation d'objets reste une proposition


5
2017-11-03 11:14