嵌套对象和数组解构答案

【问题标题】：Nested object and array destructuring嵌套对象和数组解构
【发布时间】：2017-01-08 19:21:46
【问题描述】：

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

我的对象包含一个嵌套数组，其中也包含对象，我只想要这个数组中的几个字段。

我可以做嵌套对象解构很好，数组解构很好但不能一起？

我目前的尝试如下所示：

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 is not defined.

我想要的结果可能是：

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

【问题讨论】：

只有var { title, innerData } = data;才能得到变量中的innerData数组

标签： javascript arrays typescript ecmascript-6

【解决方案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 属性的数组，您可以使用JSON.stringify()，替换数组设置为["title"]、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);

【讨论】：

【解决方案2】：

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

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

（基本上）等价于

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

解构会提取单个值，它不会为您映射数组。如果这是您想要的，您需要手动执行此操作。

【讨论】：

我确实发现我认为也许有一种方法可以一步迭代它们。干杯。

【解决方案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
    });
}

【讨论】：

注意，data 在回答如果与data 在问题不同； foo 属性不存在于 data.innerData。是否需要将title 分配给data.title、innerData 作为与data.innerData 的title 的值相对应的值数组，而没有foo 属性？