对象解构是一种有用的JavaScript性能，能够从对象中提取属性并将其绑定到变量。
更好的是，对象解构能够在一个语句中提取多个属性，能够从嵌套对象拜访属性，并且能够设置默认值（如果该属性不存在）。
在这篇文章中，我将解释如何在JavaScript中应用对象合成。
目录
1.须要对象合成
2.提取属性
3.提取多个属性
4.默认值
5.别名
6.从嵌套对象中提取属性
7.提取动静名称属性
8.销毁后的物体
9.常见用例
10.总结
1.须要对象合成
假如您要提取对象的某些属性。在ES2015之前的环境中，您须要编写以下代码：
var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'属性hero.name值已调配给变量name。将雷同的hero.realName值调配给realName。
这种拜访属性并将其调配给变量的办法须要样板代码。通过编写var name = hero.name，您必须提及name两次绑定，对于雷同realName。
这就是对象解构语法有用的中央：您能够读取属性并将其值调配给变量，而无需反复属性名称。不仅如此，您还能够在一个语句中读取同一对象的多个属性！
让咱们重构下面的脚本，并利用对象合成来拜访属性name和realName：
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'const { name, realName } = hero是对象销毁调配。这个语句定义变量name和realName，而后调配给他们的属性值hero.name和hero.realNamecorrespondigly。
比拟两种拜访对象属性的办法：
const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;能够看到，因为属性名称和对象变量都没有反复，因而对象的合成更加不便。
2.提取属性
对象解构的根本语法非常简单：
const { identifier } = expression;哪里identifier是要拜访的属性名称，expression应评估为一个对象。销毁后，变量identifier蕴含属性值。
这是应用属性拜访器的等效代码：
const identifier = expression.identifier;让咱们在实践中尝试对象合成：
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'该语句const { name } = hero定义变量name，并应用hero.nameproperty的值对其进行初始化。
3.提取多个属性
要将对象合成为多个属性，请枚举任意数量的属性，并,在之间增加逗号：
const { identifier1, identifier2, ..., identifierN } = expression;其中identifier1，…identifierN是要拜访的属性的名称，expression应评估为对象。销毁后，变量identifier1…identifierN蕴含相应的属性值。
这是等效的代码：
const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;让咱们再次看一下第一局部中的示例，其中提取了2个属性：
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'const { name, realName } = hero创立2个变量name并realName调配相应属性hero.name和的值hero.realName。
4.默认值
如果已解构的对象不具备在解构调配中指定的属性，则将变量调配给undefined。让咱们看看它是如何产生的：
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined解构后的变量enemies是undefined因为该属性enemies在对象中不存在hero。
侥幸的是，如果该属性在解构对象中不存在，则能够设置默认值。根本语法如下：
const { identifier = defaultValue } = expression;哪里identifier是要拜访的属性名称，expression应评估为一个对象。销毁后，变量identifier蕴含属性值，或者defaultValue如果identifier属性不存在则调配给变量。
这是等效的代码：
const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;让咱们更改先前的代码示例，并应用默认值性能：
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = ['Joker'] } = hero;enemies; // => ['Joker']当初，undefined该变量enemies默认为，而不是['Joker']。
5.别名
如果要创立名称与属性不同的变量，则能够应用对象合成的别名性能。
const { identifier: aliasIdentifier } = expression;identifier是要拜访的属性的名称，aliasIdentifier是变量的名称，expression应评估为对象。销毁后，变量aliasIdentifier蕴含属性值。
等效代码：
const aliasIdentifier = expression.identifier;这是一个对象合成别名性能的示例：
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'看一下const { realName: secretName } = hero，解构定义了一个新变量secretName（别名变量），并为其调配了值hero.realName。
6.从嵌套对象中提取属性
在后面的示例中，对象很简略：属性具备原始数据类型（例如字符串）。
通常，对象能够嵌套在其余对象中。换句话说，某些属性能够蕴含对象。
在这种状况下，您依然能够从深处应用对象合成和拜访属性。根本语法如下：
const { nestedObjectProp: { identifier } } = expression;nestedObjectProp是保留嵌套对象的属性的名称。identifier是要从嵌套对象拜访的属性名称。expression应该评估变形后的对象。
销毁后，变量identifier蕴含嵌套对象的属性值。
下面的语法等效于：
const identifier = expression.nestedObjectProp.identifier;您能够从中提取属性的嵌套级别不受限制。如果要从深处提取属性，只需增加更多嵌套的花括号：
const { propA: { propB: { propC: { .... } } } } = object;例如，对象hero蕴含一个嵌套对象{ city: 'Gotham'}。
const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'通过对象解构，const { address: { city } } = hero您能够city从嵌套对象拜访属性。
7.提取动静名称属性
您能够将具备动静名称的属性提取到变量中（属性名称在运行时是已知的）：
const { [propName]: identifier } = expression;propNameexpression应该计算为属性名称（通常是字符串），并且identifier应该批示在解构之后创立的变量名称。第二个expression应该评估要合成的对象。
没有对象合成的等效代码：
const identifier = expression[propName];让咱们看一个prop蕴含属性名称的示例：
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { [prop]: name } = hero;name; // => 'Batman'const { [prop]: name } = hero是一个对象合成，将变量赋给namevalue hero[prop]，其中prop是一个保留属性名称的变量。
[](https://dmitripavlutin.com/ja...
rest语法对于在解构之后收集其余属性很有用：
const { identifier, ...rest } = expression;哪里identifier是要拜访的属性名称，expression应评估为一个对象。
销毁后，变量identifier蕴含属性值。rest变量是具备其余属性的一般对象。
例如，让咱们提取属性name，但保留其余属性：
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }毁坏const { name, ...realHero } = hero提取财产name。
同时，残余的属性（realName在这种状况下）被收集到变量realHero：中{ realName: 'Bruce Wayne' }。
9.常见用例
9.1将属性绑定到变量
如之前的许多示例所示，对象解构将属性值绑定到变量。
对象解构能够给变量赋值应用申明const，let和var。甚至调配给一个曾经存在的变量。
例如，以下是应用let语句解构的办法：
// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'如何应用var语句来毁坏构造：
// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'以及如何解构为已申明的变量：
// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'我发现将for..of循环与对象解构相结合以立刻提取属性是令人满意的：
const heroes = [ { name: 'Batman' }, { name: 'Joker' }];for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}9.2性能参数解构
通常，对象合成能够搁置在产生调配的任何地位。
例如，您能够在函数的参数列表内毁坏对象：
const heroes = [ { name: 'Batman' }, { name: 'Joker' }];const names = heroes.map( function({ name }) { return name; });names; // => ['Batman', 'Joker']function({ name })解构函数参数，创立一个name保留name属性值的变量。
10.总结
对象解构是一项弱小的性能，可让您从对象中提取属性并将这些值绑定到变量。
我特地喜爱对象合成的简洁语法和在一条语句中提取多个变量的能力。
心愿我的帖子对您理解对象合成的有用！