尽管在这种情况下，我们想要提取的是 对象属性的值 (如：我们从 { prop: value } 中提取 value)。相应地，我们的对象模式必须有一个变量，这个变量的位置要跟我们即将提取的属性值所在的位置一致。
简单示例
提取一个简单的对象属性值
我们可以这样做，来将对象 { ironMan: 'Tony Stark' } 的属性 ironMan 的值 'Tony Stark' 赋值给变量 a：
//解构对象的属性值，赋给单个变量 `a`: const { ironMan: a } = { ironMan: 'Tony Stark' }; // 输出 a: a; // a = 'Tony Stark '
提取多个属性值
我们只要拓展相同的模式，就可以从一个对象中提取多个属性值，如下：
// Setup our object const avengers = { ironMan: 'Tony Stark', cap: 'Steve Rogers', blackWidow: 'Natasha Romanoff' }; // Destructure object to individual variables const { ironMan: a, cap: b, blackWidow: c } = avengers; // a = 'Tony Stark ' // b = 'Steve Rogers' // c ='Natasha Romanoff' // Output a: a;
观察一下这个解构模式是怎么确切地匹配 被解构对象 的。
嵌套的对象解构
像解构嵌套数组一样，我们可以对嵌套对象进行解构，不管它的层级多深。
// Setup our object const avengers = { blackWidow: 'Natasha Romanoff', ironManCharacters: { couple: { ironMan: 'Tony Stark', hera: 'Pepper Potts', }, partner: { warMachine: 'James Brodie' } }, capCharacters: { cap: 'Steve Rogers', partner: { falcon: 'Sam Wilson' } } }; // Destructure object to individual variables const { blackWidow: a, ironManCharacters: { couple: { ironMan: b, hera: c }, partner: { warMachine: d } }, capCharacters: { cap: e, partner: { falcon: f } } } = avengers; // a = 'Natasha Romanoff' // b = 'Tony Stark ' // c = 'Pepper Potts' // d = 'James Brodie' // e = 'Steve Rogers' // f = 'Sam Wilson' // Output a: a;
给赋值的变量命名
当然，把变量名设为诸如 a, b, c 之类，是很糟糕的，变量名称应该是有意义的。
冗长式命名
// Setup our object const avengers = { ironMan: 'Tony Stark', cap: 'Steve Rogers', blackWidow: 'Natasha Romanoff' }; // Destructure object to individual variables with meaningful names const { ironMan: ironMan, cap: cap, blackWidow: blackWidow } = avengers; // blackWidow = 'Natasha Romanoff' // ironMan = 'Tony Stark ' // cap = 'Steve Rogers' // Output blackWidow: blackWidow;
这种做法比上面用 a,b,c 命名好，但是仍然可以完善。 { ironMan: ironMan } 看起来有点丑而且不直观。
语法上命名捷径
如果你要把一个对象的属性值赋给一个变量，该变量的名称跟对象的属性名称一样，那么在 = 左侧的赋值模式里面，你只需要简单地写属性名即可，如下：
// Setup our object const avenger = { ironMan: 'Tony Stark' }; // Destructure object to individual variables with meaningful names const { ironMan // equivalent to 'ironMan: ironMan' } = avenger; // ironMan = 'Tony Stark ' // Output ironMan: ironMan;
由于 被解构的对象属性名称 跟 被赋值的变量名称 相同，我们只需要把名称列出来一次即可。
语法简洁
我们稍微重新修整下前面的代码，就可以使它们看起来更加简洁明了：
// Setup our object const avengers = { ironMan: 'Tony Stark', cap: 'Steve Rogers', blackWidow: 'Natasha Romanoff' }; // Destructure object to individual variables with meaningful names const { ironMan, cap, blackWidow } = avengers; // Output ironMan: ironMan;
从对象中提取一个深层嵌套的属性
当我们要提取一个深层嵌套的对象属性时，事情就更有趣了：
// Setup our object const avengers = { blackWidow: 'Natasha Romanoff', ironManCharacters: { couple: { ironMan: 'Tony Stark', hera: 'Pepper Potts', }, partner: { warMachine: 'James Brodie' } }, capCharacters: { cap: 'Steve Rogers', partner: { falcon: 'Sam Wilson' } } }; // Destructure a deeply nested object const { ironManCharacters: { couple } } = avengers; // couple = { // ironMan: 'Tony Stark', // hera: 'Pepper Potts', // } // Output couple: couple;
等等，你是怎么阅读这段代码的？couple 这个变量又是怎么被定义的呢？
通过这样拆分，我们就可以看出赋值运算符 = 左侧是被解构对象的一个映射：
const avengers = { ironManCharacters: { couple: { ironMan: 'Tony Stark', hera: 'Pepper Potts', } } }; const { ironManCharacters: { couple } } = avengers; // Output couple: couple;