ES6/Next: Objekt mit Rest Destrukturierung - Gruppierung

Question

ich habe:

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

ich es mit destrukturiert kann:

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

ich drei Variablen jetzt haben:

• Galerie = []
• wählen = () => null
• andere = {one: 1,two: 2}

Ist es möglich, eine Gruppierung angeben destucture?

Etwas Ähnliches (dies ist nicht zur Arbeit gehen, aber ich hoffe, es ist klar zu sehen, was ich zu tun versuchen):

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

So muss ich zwei Variablen:

• spezifische = {gallery: [], select:() => null}
• andere = {one: 1,two: 2}

ich es auf der höheren Ebene lösen könnte und die Requisiten auf diese Weise bauen:

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

Aber ich frage mich nur, wenn dies mit Destrukturierung möglich ist.

Answer 1

Was ist damit? others enthält auch die specific Daten und ich muss zuerst auf die props zugreifen (vielleicht könnte dies verbessert werden), aber ich denke, dass es im Grunde Gruppen beim Destrukturieren gruppiert. Es funktioniert, weil Sie einen Standardwert zuweisen kann, wenn das Attribut nicht existiert:

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

Sie können auch

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

mit ändern:

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

wenn Sie es in einer Zeile möchten.

Auch maioman's answer löst das Problem, das ich erwähnte mit others enthält die specific Daten und nicht direkt auf Requisiten zugreifen.

Answer 2

Stretching Syntax (und Lesbarkeit) bis an die Grenze Sie dies tun könnte:

(Erklärung zu dem Code in den Kommentaren)

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);

Am Ende bekommen wir ein gallery und ein select Objekt im Bereich, aber es ist uns gelungen, sie auch Eigenschaften eines neuen specific Objekts zu machen.

Nutzungs Warnung: Objekt Ausbreitung ist noch ein Vorschlag