2016-11-04 108 views
1

借助ES6解构,是否有任何方式在赋值时解构嵌套对象?对象分配的嵌套解构

下面是一个简单的代码示例来说明我的意思:

let node = { 
    ItemTitle: 'Title', 
    ItemId: 5, 
    Menu: {Item: [{ItemId: 579}] 
} 

// my attempts 
    let { 
     ItemId: id, 
     ItemTitle: title, 
     Menu['Item']: subItems 
    } = node 

    let { 
     ItemId: id, 
     ItemTitle: title, 
     Menu.Item: subItems 
    } = node 

回答

1

您可以重复刚才的嵌套级别相同的语法与解构顶级:

编辑根据您的评论

我需要阵列内的对象

let node = { 
 
    ItemTitle: 'Title', 
 
    ItemId: 5, 
 
    Menu: {Item: [{ItemId: 579}]} 
 
} 
 

 
let { 
 
    ItemId: id,  // extract `node.ItemId` into a variable called `id` 
 
    ItemTitle: title, // extract `node.ItemTitle` into a variable called `title` 
 
    Menu: { 
 
    Item: [obj]  // extract `node.Menu.Item[0]` into a variable called obj 
 
    } 
 
} = node; 
 

 
console.log('id =', id); 
 
console.log('title =', title); 
 
console.log('obj =', obj);

预编辑:提取嵌套阵列内的对象的id。

let node = { 
 
    ItemTitle: 'Title', 
 
    ItemId: 5, 
 
    Menu: {Item: [{ItemId: 579}]} 
 
} 
 

 
let { 
 
    ItemId: id,   // extract `node.ItemId` into a variable called `id` 
 
    ItemTitle: title,  // extract `node.ItemTitle` into a variable called `title` 
 
    Menu: { 
 
    Item: [{ 
 
     ItemId: subItemId // extract `node.Menu.Item[0].ItemId` into a variable called `subItemId` 
 
    }] 
 
    } 
 
} = node; 
 

 
console.log('id =', id); 
 
console.log('title =', title); 
 
console.log('subItemId =', subItemId);

+0

感谢您的回答,我现在好理解。如果你检查我的例子,node.Menu.Item是一个数组。如何解构对象的数组属性? –

+0

你需要数组的哪一部分,数组中的对象还是该对象的'ItemId'属性? – nem035

+0

谢谢,我需要数组中的对象。 –

1

是的,你可以做嵌套的解构与ES6。 MDN gives you a nice example

let node = { 
 
    ItemTitle: 'Title', 
 
    ItemId: 5, 
 
    Menu: { 
 
    Item: [{ 
 
     ItemId: 579 
 
    }] 
 
    } 
 
} 
 

 
let { Menu: { Item: [{ ItemId }] } } = node 
 

 
console.log(ItemId) // 579