通过解构从数组对象中获取数组值 javascript

Question

我有以下对象数组：

const obj = [
 0:{
  "content": {
    "tabs": [
      {
        "name": "Overview",
        "id": 1,      
        "sections":[           
          {"event_description":"Event Description"},
          {"photos":"Photos"},
          {"reference_documents":"Reference Documents"},
          {"discussion":"Discussion"}

        ]
      },{...},{..}
     ]
   }
 },
 1:{}
]

如何通过解构从 obj 中获取 sections 数组？我试过这些东西：

const [{content={}}] = obj;
const [{content{tabs={}}]=obj;
const [{content{tabs[0]{sections}}}]=obj;

还有sections应该改成另一个变量名。

Answer 1

您可以使用适当的索引作为键来解构对象并获取 computed property name.

如有必要，添加一些默认值。

const
    obj = [{ content: { tabs: [{ name: "Overview", id: 1, sections: [{ event_description: "Event Description" }, { photos: "Photos" }, { reference_documents: "Reference Documents" }, { discussion: "Discussion" }] }] } }],
    key = 'sections',
    { 0: { content: { tabs: { 0: { [key]: value } } } } }= obj;

console.log(value);

Answer 2

您可以使用 [] 解构到 tabs 数组，然后从该数组中取出第一个对象的 section 属性，如下所示：

const obj = [{ "content": { "tabs": [{ "name": "Overview", "id": 1, "sections": [{ "event_description": "Event Description" }, { "photos": "Photos" }, { "reference_documents": "Reference Documents" }, { "discussion": "Discussion" } ] }] } }];

const [{content: {tabs: [{sections: foo}]}}] = obj;
console.log(foo); // here `foo` refers to sections

.as-console-wrapper { max-height: 100% !important;} /* ignore */

解构语法模仿对象文字语法，因此格式化后可能更容易理解。这是解构语法和您拥有的对象数组的并排比较：

// Desctructuing:       Actual object/array:
const [{                // [{
  content: {            //   "content": {             
    tabs: [{            //     "tabs": [{
      sections: foo     //       "name": "Overview", "id": 1, "sections": {...}
    }]                  //     }, ...]
  }                     //   }
}] = obj;               // }, ...]

Answer 3

这样做

const obj ={
  "content": {
    "tabs": [
      {
        "name": "Overview",
        "id": 1,      
        "sections":[           
          {"event_description":"Event Description"},
          {"photos":"Photos"},
          {"reference_documents":"Reference Documents"},
          {"discussion":"Discussion"}

        ]
      }
     ]
   }
};

const { content: { tabs } } = obj;

const sections = tabs.map(tab => tab.sections)

console.log(sections)

Answer 4

基本上你真的很接近，这里有一个工作示例，并且还添加了默认值以防万一:)

const obj = {
  content: {
    tabs: [{
      name: "Overview",
      id: 1,
      sections: [{
        event_description: "Event Description"
      }, {
        photos: "Photos"
      }, {
        reference_documents: "Reference Documents"
      }, {
        discussion: "Discussion"
      }]
    }]
  }
};

const { content: { tabs: { 0: { sections = [] } = {} } = {} } = {} } = obj;

console.log(sections);

Answer 5

您可以通过一次进入一个或使用键解构来做到这一点。

const obj ={
  "content": {
    "tabs": [
      {
        "name": "Overview",
        "id": 1,      
        "sections":[           
          {"event_description":"Event Description"},
          {"photos":"Photos"},
          {"reference_documents":"Reference Documents"},
          {"discussion":"Discussion"}

        ]
      },
     ]


  }
}
//do the following
const {content} = obj;
const {tabs} = obj["content"} //or const {tabs} = content

自始至终都是如此。

通过解构从数组对象中获取数组值 javascript

take a array value from and array object with destructuring javascript

javascript

destructuring

ecmascript-6