ES6/Następna: obiekt demontażu struktury z resztą - grupowanie

Question

mam:

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

mogę destructure go:

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

będę miał trzy zmienne teraz:

• galeria = []
• wybrać = () => null
• inne = {one: 1,two: 2}

Czy możliwe jest destucture Do określ grupowania?

Coś takiego (to nie będzie działać, ale mam nadzieję, że jest oczywiste, aby zobaczyć, co staram się robić):

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

Więc mam 2 zmienne:

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

mogę go rozwiązać na poziomie wyższym i budować rekwizyty w ten sposób:

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

Ale ja po prostu zastanawiasz się, czy jest to możliwe ze rozpad.

Answer 1

Co z tym? others zawiera również dane specific i muszę najpierw uzyskać dostęp do props (może to można poprawić), ale myślę, że zasadniczo grupuje się podczas destrukturyzacji. To działa, ponieważ można przypisać wartość domyślną, gdy atrybut nie istnieje:

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

Można również zmienić

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

z:

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

jeśli chcesz go w jednym wierszu.

Również, maioman's answer rozwiązuje problem, o którym wspomniałem z others zawierający dane specific i nie ma bezpośredniego dostępu do rekwizytów.

Answer 2

Stretching składnia (i czytelność) do granicy można to zrobić:

(objaśnienie do kodu jest w komentarzach)

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

W końcu dojeżdżamy obiekt gallery i select w zakresie, ale udało nam się uczynić je również właściwościami nowego obiektu specific.

Wykorzystanie ostrzeżenie: obiekt spread jest jeszcze propozycja