ES6/Next: объект уничтожения того с остальными - группировка

Question

у меня есть:

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

Я destructure его:

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

у меня будет три переменные сейчас:

• галерея = []
• выберите = () => null
• другие = {one: 1,two: 2}

Можно ли destucture к группировке уточнить?

Нечто подобное (это не будет работать, но я надеюсь, что это ясно видеть, что я пытаюсь сделать):

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

Так у меня будет 2 переменные:

• удельная = {gallery: [], select:() => null}
• другой = {one: 1,two: 2}

я мог бы решить на более высоком уровне и строить подпорки таким образом:

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

Но я просто интересно, если это возможно с деструктуризации.

Answer 1

Что относительно этого? others содержит также данные specific, и я должен сначала получить доступ к props (возможно, это может быть улучшено), но я думаю, что он в основном группируется во время деструктурирования. Это работает, потому что вы можете присвоить значение по умолчанию, если атрибут не существует:

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

Вы также можете изменить

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

с:

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

если вы хотите его в одной строке.

Кроме того, maioman's answer решает проблему, о которой я упоминал, с others, содержащую данные specific и не имеющий прямого доступа к реквизитам.

Answer 2

Растяжение синтаксис (и читаемость) до предела вы могли бы сделать это:

(пояснения к коду в комментариях)

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

В конце концов, мы получаем a gallery и объект select, но нам удалось сделать их также свойствами нового объекта specific.

Использование предупреждение: распространение объекта по-прежнему предложение