嵌套对象和数组解构

she*_*nku 10 javascript arrays typescript ecmascript-6

我试图使用解构将对象转换为更精简的版本.

我的对象包括一个嵌套数组,它也包含对象,从这个数组我只想要几个字段.

我可以做嵌套对象解构很好,并且数组解构很好但不在一起吗?

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

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);
}
Run Code Online (Sandbox Code Playgroud)

但是得到一条消息说 innerData is not defined.

我希望的结果可能是:

{
    title: "title1",
    innerData: [
       {
        title: "inner-title1"
       },
       {
        title: "inner-title2"
       }
    ]
};
Run Code Online (Sandbox Code Playgroud)

log*_*yth 7

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

var { title, innerData: [ { title} ] } = data;
Run Code Online (Sandbox Code Playgroud)

是(基本上)等价于

var title = data.title;
var title = data.innerData[0].title;
Run Code Online (Sandbox Code Playgroud)

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


gue*_*314 7

您可以将变量名称调整为除 defined 之外的标识符innerData;使用.map()or JSON.stringify(),从对象中JSON.parse()过滤title属性innerData

var {title, titles = data.innerData.map(o => ({title:o.title}))} = data;
Run Code Online (Sandbox Code Playgroud)

要维护innerData变量名称,您可以使用对象的数组解构

var [title, innerData] = [data.title, data.innerData.map(o => ({title:o.title}))];
Run Code Online (Sandbox Code Playgroud)

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

var [title, innerData] = JSON.parse(JSON.stringify([data.title, data.innerData], ["title"]));
Run Code Online (Sandbox Code Playgroud)

编辑

如果需要创建一个包含所有title属性的数组,data您可以使用JSON.stringify()替换数组设置为["title"], JSON.parse(), spread 元素

var {title, titles = data.innerData.map(o => ({title:o.title}))} = data;
Run Code Online (Sandbox Code Playgroud)