对象解构是一个有用的JavaScript特性，它可以从对象中提取属性并将它们绑定到变量。更妙的是，对象解构可以在一条语句中提取多个属性，可以访问嵌套对象的属性，还可以在属性不存在的情况下设置默认值。在这篇文章中，我将解释如何在JavaScript中使用对象分解。内容1.需要对象分解2.提取属性3.提取多个属性4.默认值5.别名6.从嵌套对象中提取属性7.提取动态名称属性8.销毁对象9.常见用例10.总结1.需求对象分解假设你想提取一个对象的一些属性。在ES2015之前的环境中，您可以编写以下内容：varhero={name:'Batman',realName:'BruceWayne'};varname=hero.name;varrealName=hero.realName;name;//=>'蝙蝠侠',realName;//=>'BruceWayne'属性hero.name值已分配给变量名称。将相同的hero.realName值分配给realName。这种访问属性并将它们分配给变量的方法需要样板代码。通过编写varname=hero.name，您必须为同一个realName提及名称绑定两次。这就是对象解构语法有用的地方：您可以读取一个属性并将其值赋给一个变量，而无需重复属性名称。不仅如此，您还可以在一条语句中读取同一对象的多个属性！让我们重构上面的脚本并应用对象分解来访问属性name和realName：consthero={name:'Batman',realName:'BruceWayne'};const{name,realName}=hero;name;//=>'蝙蝠侠',realName;//=>'BruceWayne'const{name,realName}=hero是一个对象销毁赋值。这条语句定义了变量name和realName，然后给它们的属性值hero.name和hero.realName赋值。比较两种访问对象属性的方法：constname=hero.name;constrealName=hero.realName;//等同于：const{name,realName}=hero;可以看到，由于属性名和对象变量都不重复，所以对象的分解更方便。2.提取属性对象解构的基本语法很简单：const{identifier}=expression;其中identifier是要访问的属性的名称，expression的计算结果应该是一个对象。销毁后，变量标识符包含属性值。这是使用属性访问器的等效代码：constidentifier=expression.identifier;让我们在实践中尝试对象分解：consthero={name:'Batman',realName:'BruceWayne'};const{名字}=英雄；名字；//=>'Batman'语句const{name}=hero定义变量name并使用hero.name属性的值对其进行初始化。3.提取多个属性将一个对象分解为多个属性，枚举任意数量的属性，并在它们之间添加逗号：const{identifier1,identifier2,...,identifierN}=expression;其中identifier1,...identifierN是要访问的属性的名称，expression的计算结果应该是一个对象。销毁后，变量identifier1...identifierN包含相应的属性值。这是等效的代码：constidentifier1=expression.identifier1;constidentifier2=expression.identifier2;//...constidentifierN=expression.identifierN;让我们再次查看第一部分中的示例，其中提取了2个属性：consthero={name:'Batman',realName:'BruceWayne'};const{name,realName}=hero;name;//=>'蝙蝠侠',realName;//=>'BruceWayne'const{name,realName}=hero创建2个变量name和realName为对应属性hero.name和hero.realName赋值。4.默认值如果被解构的对象不具有解构赋值中指定的属性，则变量被赋值为undefined。让我们看看它是如何发生的：consthero={name:'Batman',realName:'BruceWayne'};const{敌人}=英雄；敌人；//=>undefined解构变量enemies未定义，因为hero对象中不存在enemies属性。幸运的是，如果该属性在解构对象中不存在，则可以设置默认值。基本语法如下：const{identifier=defaultValue}=expression;其中identifier是要访问的属性名称，expression的计算结果应该是一个对象。销毁后，变量标识符包含属性值，或者如果标识符属性不存在，则将defaultValue分配给变量。这是等效的代码：constidentifier=expression.identifier===undefined?默认值：表达式.标识符；让我们更改前面的代码示例并使用默认值函数：consthero={name:'Batman',realName:'BruceWayne'};const{enemies=['Joker']}=hero;enemies;//=>['Joker']现在，变量enemies默认为undefined而不是['Joker']。5.别名如果要创建一个与属性不同名称的变量，可以使用对象分解的别名功能。const{标识符：aliasIdentifier}=表达式；identifier是要访问的属性的名称，aliasIdentifier是变量的名称，expression应该计算为一个对象。销毁后，变量aliasIdentifier包含属性值。等效代码：constaliasIdentifier=expression.identifier;下面是对象分解别名功能的示例：consthero={name:'Batman',realName:'BruceWayne'};const{realName:secretName}=hero;secretName;//=>'BruceWayne'查看const{realName:secretName}=hero，解构定义了一个新的变量secretName（别名变量）并赋值hero.realName。6.从嵌套对象中提取属性在前面的示例中，对象很简单：属性具有原始数据类型（例如字符串）。通常，对象可以嵌套在其他对象中。换句话说，一些属性可以包含对象。在这种情况下，您仍然可以使用对象分解并从深处访问属性。基本语法如下：const{nestedObjectProp:{identifier}}=expression;nestedObjectProp是包含嵌套对象的属性的名称。标识符是要从嵌套对象访问的属性名称。expression应该评估变形的对象。销毁后，变量标识符包含嵌套对象的属性值。上面的语法等同于：constidentifier=expression.nestedObjectProp.identifier;您可以从中提取属性的嵌套级别没有限制。如果你想从深层提取属性，只需添加更多嵌套的花括号：const{propA:{propB:{propC:{....}}}}=object;例如，对象hero包含一个嵌套对象{city:'Gotham'}。consthero={name:'Batman',realName:'BruceWayne',address:{city:'Gotham'}};//对象解构：const{address:{city}}=hero;city;//=>'Gotham'通过对象解构，const{address:{city}}=hero您可以从嵌套对象访问city属性。7.提取动态名称属性您可以将具有动态名称的属性提取到变量中（属性名称在运行时已知）：const{[propName]:identifier}=expression;propName表达式应评估为属性名称（通常是字符串），标识符应指示解构后创建的变量名称。第二个表达式的计算结果应该是要分解的对象。没有对象分解的等效代码：constidentifier=expression[propName];让我们看一个prop包含属性名称的示例：consthero={name:'Batman',realName:'BruceWayne'};constprop='name';const{[prop]:name}=hero;name;//=>'Batman'const{[prop]:name}=hero是一个对象分解，将变量赋值给namevaluehero[prop]，其中prop是一个保存属性名称的变量。[](https://dmitripavlutin.com/ja...rest语法对于收集解构后的其余属性很有用：const{identifier,...rest}=expression;其中identifier是属性的名称访问和表达式应该作为对象求值。销毁后，变量标识符包含属性值。其余变量是具有其余属性的普通对象。例如，让我们提取属性名称，但保留其余部分：consthero={name:'Batman',realName:'BruceWayne'};const{name,...realHero}=hero;realHero;//=>{realName:'BruceWayne'}销毁const{name,...realHero}=hero提取属性名称。另外，剩余的属性（本例中为realName）被收集到变量realHero:{realName:'BruceWayne'}。9.常见用例9.1将属性绑定到变量中，如图所示前面很多例子，对象解构将属性值转换为Bindingtovariables。对象解构可以作为使用声明const、let和var将值赋给变量。甚至分配给一个已经存在的变量。例如，下面是如何使用let语句进行解构：//letconsthero={name:'Batman',};让{名字}=英雄；名字；//=>'Batman'如何使用var语句来破坏结构：//varconsthero={name:'Batman',};var{名字}=英雄；姓名;//=>'Batman'以及如何解构为声明的变量：//existingvariableletname;consthero={name:'蝙蝠侠',};({name}=hero);名字;//=>'Batman'我发现将for..of循环与对象解构相结合以立即提取属性是令人满意的：constheroes=[{name:'Batman'},{name:'Joker'}];for(const{name}ofheroes){console.log(name);//logs'Batman','Joker'}9.2通常函数参数解构，对象解析可以放在分配发生的地方。例如，您可以销毁函数参数列表中的对象：constheroes=[{name:'Batman'},{name:'Joker'}];constnames=heroes.map(function({name}){returnname;});名字;//=>['Batman','Joker']function({name})解构函数参数并创建一个变量，其名称保存name属性的值。10.总结对象解构是一个强大的特性，它允许你从对象中提取属性并将这些值绑定到变量。我特别喜欢对象分解的简洁语法以及在一个语句中提取多个变量的能力。我希望我的帖子对您??了解对象分解有用！最后说个题外话。我一直有整理面试题的习惯。我随时准备跳出我的舒适区。不知不觉中整理了229页。PDF
