嵌套对象和数组解构

Posted

技术标签:

【中文标题】嵌套对象和数组解构【英文标题】: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数组 【参考方案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.titleinnerData 作为与data.innerDatatitle 的值相对应的值数组,而没有foo 属性?

以上是关于嵌套对象和数组解构的主要内容,如果未能解决你的问题,请参考以下文章

... 语法记录

ECMAScript 6入门 - 变量的解构赋值

嵌套对象解构和重命名

如何为解构对象中的嵌套函数编写类型?

嵌套对象类型解构

ES6解构嵌套对象