ES6/suivant: objet déstructurer avec le reste - le regroupement

Question

je:

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

je peux déstructurer avec:

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

Je vais avoir trois variables maintenant:

• galerie = []
• sélectionnez = () => null
• autres = {one: 1,two: 2}

Est-il possible de destucture à un regroupement spécifions?

Quelque chose comme ça (cela ne va pas travailler, mais je l'espère, il est clair pour voir ce que je suis en train de faire):

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

Je vais donc avoir 2 variables:

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

je pouvais résoudre au plus haut niveau et de construire les accessoires de cette façon:

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

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

Answer 1

Que pensez-vous de cela? others contient également les données specific et je dois d'abord accéder à la props (peut-être que cela pourrait être amélioré), mais je pense qu'il regroupe en gros tout en se déstructurant. Cela fonctionne parce que 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);

EDIT

Vous pouvez également modifier

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 souhaitez en une ligne.

En outre, maioman's answer résout le problème que j'ai mentionné avec others contenant les données specific et n'accède pas directement aux accessoires.

Answer 2

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

(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 objet select dans la portée mais nous avons réussi à les rendre également propriétés d'un nouvel objet specific.

avertissement Utilisation: propagation objet est encore une proposition