嵌套对象和数组解构

Question

我正在尝试使用解构将一个对象转换为一个更简洁的版本。

我的对象包含一个嵌套数组，该数组还包含对象，我只需要其中的几个字段。

我可以很好地进行嵌套对象解构和数组解构，但是不能同时进行？

我目前的尝试看起来像这样：

var data = {
    title: "title1",
    bar: "asdf",
    innerData: [
       {
        title: "inner-title1",
        foo: "asdf"
       },
       {
        title: "inner-title2",
        foo: "asdf"
       }
    ]
};

var { title, innerData: [ { title} ] } = data;

console.log(title);

for (var { title} of innerData) {
  console.log(title);
}

但是收到这样的消息: innerData未定义。

我希望得到的结果可能是:

{
    title: "title1",
    innerData: [
       {
        title: "inner-title1"
       },
       {
        title: "inner-title2"
       }
    ]
};

- shenku

---

只需执行 var { title, innerData } = data; 即可将 innerData 数组存储在变量中。 - Bergi

Answer 1

你可以将变量名调整为除 innerData 以外的标识符，使用 .map() 或者 JSON.stringify(), JSON.parse() 方法来筛选出 innerData 对象中的 title 属性。

var {title, titles = data.innerData.map(o => ({title:o.title}))} = data;

为了保留 innerData 变量名，您可以使用对象的数组解构。

var [title, innerData] = [data.title, data.innerData.map(o => ({title:o.title}))];

使用 JSON.stringify(), JSON.parse()

var [title, innerData] = JSON.parse(JSON.stringify([data.title, data.innerData], ["title"]));

---

编辑

如果要创建一个包含 data 中所有 title 属性的数组，可以使用设置为 ["title"] 的替换器数组，JSON.stringify()，JSON.parse() 和扩展语法。

var data = {
    title: "title1",
    bar: "asdf",
    innerData: [
       {
        title: "inner-title1",
        foo: "asdf"
       },
       {
        title: "inner-title2",
        foo: "asdf"
       }
    ]
};

var innerData = JSON.parse(JSON.stringify([data, ...data.innerData], ["title"]))
                                                                      
console.log(innerData);

- guest271314

Answer 2

你的解构并不像你想的那样运行。

var { title, innerData: [ { title} ] } = data;

基本上等价于

var title = data.title;
var title = data.innerData[0].title;

解构可以提取单个值，但它不会自动映射整个数组。如果你需要这样做，你需要手动进行映射。

- loganfsmyth

---

我发现也许有一种方法可以在一步中迭代它们。谢谢。 - shenku

Answer 3

根据@loganfsmyth的建议，我将分两步进行。

var { title } = data;

for (var { title } of data.innerData) {
  console.log( title );
}

编辑：我从旧对象构建新的json对象的最终解决方案

const request = { innerData: [] };

({ title } = this.data);

for (const { title} of this.data.innerData) {
    request.innerData.push({
        title
    });
}

- shenku

---

请注意，答案中的 data 与问题中的 data 不同；data.innerData 中不存在 foo 属性。要求将 title 分配给 data.title，将 innerData 分配为值数组，对应于 data.innerData 的 title 值，但不包括 foo 属性。 - guest271314