ES6/Next: 对象解构与休息 - 分组

Question

我有：

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

我可以使用以下方法对其进行解构：

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

我现在将有三个变量：

• 图库 = []
• 选择 = () => null
• 其他 = {one: 1,two: 2}

是否可以分解为指定的分组？

类似这样的事情（这行不通，但我希望很清楚我正在尝试做什么）：

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

编辑

你也可以改变

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

将语法（和可读性）扩展到您可以做到的极限：

（对代码的解释在 cmets 中）

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

最后，我们在作用域中得到了一个gallery 和一个select 对象，但我们成功地使它们也成为了一个新的specific 对象的属性。

使用警告：对象传播仍然是一个提案