对象解构是一个有用的JavaScript函数，可以从对象中提取属性，并将它们绑定到变量。 更好的是，对象解构可以在一个语句中提取多个属性，从嵌套对象中访问属性，并设置默认值(如果属性不存在)。 在本文中，我将解释如何在JavaScript中使用对象分解。 1.目录需要对象分解2。提取属性3。提取多个属性4。默认值为5。别名6。从嵌套对象中提取属性7。提取动态名称属性8。被摧毁的物体。常见使用案例10。总结1。需要对象分解。假设你想提取对象的一些属性。 在ES2015之前的环境下，你需要写以下代码:var hero = {name:'蝙蝠侠'，真名:'布鲁斯·韦恩' }；var name = hero.namevar real name = hero . real name；姓名；//= & gt；‘蝙蝠侠’，实名；//= & gt；“Bruce Wayne”属性hero.name的值已分配给变量名。 将相同的hero.realName值赋给realName。 这种访问属性并将它们赋给变量的方法需要模板代码。 通过编写var name = hero.name，对于同一个realName，您必须提到名称绑定两次 这就是对象解构语法有用的地方:您可以读取属性并将它们的值赋给变量，而无需重复属性名。 不仅如此，你还可以在一个语句中读取同一个对象的多个属性！让我们重构上面的脚本，应用对象分解来访问属性name和real name:const hero = { name:' Batman '，real name:' Bruce Wayne ' }；const { name，realName } = hero姓名；//= & gt；‘蝙蝠侠’，实名；//= & gt；布鲁斯·韦恩的const {name，real name} = hero是对象销毁分配。 该语句定义变量name和realName，然后为它们分配属性值hero.name和hero . realName corresponding ly。 比较两种访问对象属性的方法:const name = hero.nameconst realName = hero.realName//相当于:const { name，realName } = hero正如您所看到的，因为属性名和对象变量没有重复，所以分解对象更加方便。 2.提取属性对象解构的基本语法很简单:const { identifier } = expression其中identifier是要访问的属性的名称，expression应作为对象进行计算。 销毁后，变量标识符包含属性值。 这是使用属性访问器的等效代码:constituentifier = expression . identifier；我们在实践中试试对象分解:consthero = {name:'蝙蝠侠'，真名:'布鲁斯·韦恩' }；const { name } = hero姓名；//= & gt；' Batman '这个语句const {name} = hero定义了变量名，并用hero.nameproperty的值初始化它 3.提取多个属性。若要将一个对象分解为多个属性，请枚举任意数量的属性，并在属性之间添加逗号:const {identifier1，identifier2，...，identifiern} =表达式；其中identifier1，…identifierN是要访问的属性的名称，expression应作为对象进行计算。 销毁后，变量identifier1…identifierN包含相应的属性值。 这是等价的代码:constitidentifier 1 = expression . identifier 1；const identifier 2 = expression . identifier 2；// ...const identifier n = expression . identifier n；我们再来看第一部分的例子，其中提取了2个属性:consthero = {name:'蝙蝠侠'，真名:'布鲁斯·韦恩' }；const { name，realName } = hero姓名；//= & gt；‘蝙蝠侠’，实名；//= & gt；Bruce Wayne的const {name，realName} = Hero创建了两个变量name和realName，并分配了相应的属性hero.name和值hero.realName 4.默认值如果解构对象没有解构分配中指定的属性，变量将被分配给未定义。 我们来看看是怎么发生的:consthero = {name:'蝙蝠侠'，真名:'布鲁斯·韦恩' }；const {敌人} =英雄；敌人；//= & gt；未定义的解构变量敌人是未定义的，因为这个属性敌人在英雄对象中不存在。 幸运的是，如果这个属性在解构的对象中不存在，您可以设置默认值。 基本语法如下:const { identifier = default value } = expression；其中identifier是要访问的属性的名称，expression应作为对象进行计算。 销毁后，变量标识符包含属性值，如果标识符属性不存在，则将defaultValue赋给变量。 这是等价的代码:constitidentifier = expression . identifier = = undefined？default value:expression . identifier；让我们改变前面的代码示例，使用默认函数:consthero = {name:'蝙蝠侠'，真实姓名:'布鲁斯·韦恩' }；const { answers =[' Joker ']} = hero；敌人；//= & gt；['Joker']现在，undefined这个变量的敌人默认为而不是['Joker'] 5.Alias如果想创建不同名称和属性的变量，可以使用对象分解的alias函数。 const { identifier:alias identifier } = expression；Identifier是要访问的属性的名称，aliasIdentifier是变量的名称，expression应该作为对象计算。 销毁后，变量aliasIdentifier包含属性值。 等价代码:const alias identifier = expression . identifier；这是一个物体分解别名函数的例子:consthero = {name:'蝙蝠侠'，真名:'布鲁斯·韦恩' }；const { real name:secret name } = hero；secretName//= & gt；Bruce Wayne ' look const { real name:secretName } = hero，解构定义一个新的变量secret name(别名变量)，赋给它值hero.realName 6.从嵌套对象中提取属性。在前面的示例中，对象很简单:属性具有原始数据类型(例如字符串) 通常，对象可以嵌套在其他对象中。 换句话说，一些属性可以包含对象。 在这种情况下，您仍然可以使用对象分解并从深层访问属性。 基本语法如下:const { nestedobjectprop:{ identifier } } = expression；NestedObjectProp是保存嵌套对象的属性的名称。 标识符是要从嵌套对象中访问的属性的名称。 表达式应该计算变形的对象。 销毁后，变量标识符包含嵌套对象的属性值。 上述语法相当于:constitidentifier = expression . nestedobjectprop . identifier；可以从中提取属性的嵌套级别没有限制。 如果想从深处提取属性，只需多加几个嵌套的花括号:const {propa: {propb: {propc: {...}}} =对象；例如，对象hero包含一个嵌套对象{city: 'Gotham'} const hero = { name:'蝙蝠侠'，realName:'布鲁斯·韦恩'，地址:{ city:'哥谭' } }；//Object destructing:const { address:{ city } } = hero；城市；//= & gt；“Gotham”通过对象解构，const {address: {city}} = hero您可以访问城市中嵌套对象的属性。 7.提取动态名属性可以将带有动态名的属性提取到变量中(属性名在运行时已知):const {[propname]:identifier } = expression；PropNameexpression应该作为属性名(通常是字符串)求值，identifier应该表示解构后创建的变量名。 第二个表达式应该计算要分解的对象。 没有用于对象分解的等效代码:constitidentifier = expression[propname]；让我们看一个prop包含属性名的例子:consthero = {name:' Batman '，真名:' Bruce Wayne ' }；const prop = ' nameconst {[prop]:name } = hero；姓名；//= & gt；蝙蝠侠' const {[prop]: name} = hero是一个对象分解，将一个变量赋给namevalue hero[prop]，其中prop是保存属性名称的变量。 8.销毁对象的rest语法对于收集解构后的其他属性很有用:const {identifier，...rest} =表达式；其中identifier是要访问的属性的名称，expression应作为对象进行计算。 销毁后，变量标识符包含属性值。 rest变量是一个具有其他属性的普通对象。 比如我们提取属性名，但是保留其他属性:consthero = {name:'蝙蝠侠'，真名:'布鲁斯·韦恩' }；const { name，...realHero } =英雄；realHero//= & gt；{realName:'布鲁斯·韦恩' }摧毁const {name，...英雄提取属性名 同时，剩余的属性(本例中为realName)收集在变量realHero中:{realName: 'Bruce Wayne'} 9.常见用例9.1将属性绑定到变量如前面很多例子所示，对象解构将属性值绑定到变量。 对象解构可以使用声明const，let和var给变量赋值。 甚至赋给一个现有的变量。 比如下面用let语句解构一下://let consthero = {name:'蝙蝠侠'，}；let { name } = hero姓名；//= & gt；'蝙蝠侠'如何用var语句破坏结构://var consthero = {name:'蝙蝠侠'，}；var { name } = hero姓名；//= & gt；‘蝙蝠侠’以及如何将其解构为一个已公布的变量://existing variable let name；const hero = { name:'蝙蝠侠'，}；({姓名} =英雄)；姓名；//= & gt；《蝙蝠侠》我觉得把这两者结合起来很令人满意..用对象解构的of循环立即提取属性:constheroes = [{name:' Batman'}，{ name:' Joker ' }]；for(const { name } of heroes){ console . log(name)；// logs 'Batman '，' Joker'}9.2功能参数的解构一般来说，对象分解可以放在任何发生分配的地方。 比如你可以摧毁一个函数的参数列表中的一个对象:const heroes = [{name:'蝙蝠侠' }，{name:'小丑' }]；const names = heroes . map(function({ name }){ return name；});姓名；//= & gt；['Batman '，' Joker']函数({name})解构函数参数并创建一个名为的变量来保存name属性的值。 10.摘要对象解构是一个强大的功能，允许您从对象中提取属性，并将这些值绑定到变量。 我特别喜欢对象分解的简洁语法和在一个语句中提取多个变量的能力。 希望我的帖子对你理解对象分解有用！最后说个题外话，我平时有整理面试问题的习惯，随时准备跳出自己的舒适区。不知不觉整理了229页，在此供大家参考。如有需要，点击此处免费获取标题+分析PDF篇幅有限，仅展示部分截图，仅展示部分截图。