如何在 JavaScript 中使用对象解构

对象解构是一个有用的 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.namenamehero.realNamerealName

这种访问属性并将其分配给变量的方法需要样板代码。通过编写，您必须提及绑定2次，并且对于.var name = hero.namenamerealName

这就是对象析构语法很有用的地方：您可以读取属性并将其值分配给变量，而无需复制属性名称。不仅如此，您只需一个语句即可从同一对象读取多个属性！

让我们重构上面的脚本，并应用对象析构来访问属性和：namerealName

const hero = {

name: 'Batman',

realName: 'Bruce Wayne'

};

const { name, realName } = hero;

name; // => 'Batman',

realName; // => 'Bruce Wayne'

const { name, realName } = hero是对象解构赋值。此语句定义变量，然后为它们分配属性值和相应的值。namerealNamehero.namehero.realName

比较访问对象属性的 2 种方法：

const name = hero.name;

const realName = hero.realName;

// is equivalent to:

const { name, realName } = hero;

很明显，对象解构更方便，因为属性名称和对象变量都不重复。

2. 提取属性

对象解构的基本语法非常简单：

const { identifier } = expression;

where 是要访问的属性的名称，应计算为对象。解构后，变量包含属性值。identifierexpressionidentifier

下面是使用属性访问器的等效代码：

const identifier = expression.identifier;

让我们在实践中尝试对象解构：

const hero = {

name: 'Batman',

realName: 'Bruce Wayne'

};

const { name } = hero;

name; // => 'Batman'

该语句定义变量并使用属性值对其进行初始化。const { name } = heronamehero.name

3. 提取多个属性

要将对象分解为多个属性，请枚举任意多个属性，并在其间添加逗号：,

const { identifier1, identifier2, ..., identifierN } = expression;

其中，...是要访问的属性的名称，应计算为对象。解构后，变量 ... 包含相应的属性值。identifier1identifierNexpressionidentifier1identifierN

下面是等效代码：

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 个变量，并分配相应属性和的值。namerealNamehero.namehero.realName

4. 默认值

如果非结构化对象没有在解构赋值中指定的属性，则变量将赋值为。让我们看看它是如何发生的：undefined

const hero = {

name: 'Batman',

realName: 'Bruce Wayne'

};

const { enemies } = hero;

enemies; // => undefined

解构变量后，是因为该属性在对象中不存在。enemiesundefinedenemieshero

幸运的是，如果取消结构化对象中不存在该属性，则可以设置默认值。以下是基本语法：

const { identifier = defaultValue } = expression;

where 是要访问的属性的名称，应计算为对象。解构后，变量包含属性值，如果属性不存在，则与变量一起赋值。identifierexpressionidentifierdefaultValueidentifier

下面是等效代码：

const identifier = expression.identifier === undefined ?

defaultValue : expression.identifier;

让我们更改前面的代码示例，并使用默认值功能：

const hero = {

name: 'Batman',

realName: 'Bruce Wayne'

};

const { enemies = ['Joker'] } = hero;

enemies; // => ['Joker']

现在，该变量默认为。undefinedenemies['Joker']

5. 别名

如果要创建与属性名称不同的变量，则可以使用对象解构的别名功能。

const { identifier: aliasIdentifier } = expression;

identifier是要访问的属性的名称，是变量名称，应计算为对象。解构后，变量包含属性值。aliasIdentifierexpressionaliasIdentifier

等效代码：

const aliasIdentifier = expression.identifier;

下面是对象解构别名功能的示例：

const hero = {

name: 'Batman',

realName: 'Bruce Wayne'

};

const { realName: secretName } = hero;

secretName; // => 'Bruce Wayne'

查看，推断定义了一个新变量（别名变量），并为其赋值。const { realName: secretName } = herosecretNamehero.realName

6. 从嵌套对象中提取属性

在前面的示例中，对象是普通的：属性具有基元数据类型（例如字符串）。

通常，对象可以嵌套在其他对象中。换句话说，某些属性可以包含对象。

在这种情况下，您仍然可以使用对象解构并从深层访问属性。以下是基本语法：

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp是保存嵌套对象的属性的名称。是要从嵌套对象访问的属性名称。应计算为已分解的对象。identifierexpression

解构后，变量包含嵌套对象的属性值。identifier

上述语法等效于：

const identifier = expression.nestedObjectProp.identifier;

可以从中提取属性的嵌套级别是无限的。如果要从 deep 中提取属性，只需添加更多嵌套大括号：

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 } } = herocity

7. 提取动态名称属性

您可以使用动态名称提取到变量属性（属性名称在运行时已知）：

const { [propName]: identifier } = expression;

propName表达式的计算结果应为属性名称（通常是字符串），并且应指示在析构后创建的变量名称。第二个应该计算到您要取消结构的对象。identifierexpression

不带对象解构的等效代码：

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是一个对象解构，它为变量赋值，其中是一个保存属性名称的变量。namehero[prop]prop

8. 解构后的静止对象

其余语法对于在析构后收集其余属性非常有用：

const { identifier, ...rest } = expression;

where 是要访问的属性的名称，应计算为对象。identifierexpression

解构后，变量包含属性值。变量是具有其余属性的普通对象。identifierrest

例如，让我们提取属性，但保留其余属性：name

const hero = {

name: 'Batman',

realName: 'Bruce Wayne'

};

const { name, ...realHero } = hero;

realHero; // => { realName: 'Bruce Wayne' }

解构将提取属性。const { name, ...realHero } = heroname

同时，剩余的属性（在本例中）被收集到变量：。realNamerealHero{ realName: 'Bruce Wayne' }

9. 常见使用案例

9.1 将属性绑定到变量

如前面的许多示例所示，对象解构将属性值绑定到变量。

对象解构可以将值赋给使用和声明的变量。甚至分配给已经存在的变量。constletvar

例如，下面介绍如何使用语句进行分解：let

// let

const hero = {

name: 'Batman',

};

let { name } = hero;

name; // => 'Batman'

如何使用语句进行分解：var

// var

const hero = {

name: 'Batman',

};

var { name } = hero;

name; // => 'Batman'

以及如何分解为已声明的变量：

// existing variable

let 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 })取消函数参数的结构，创建一个保存属性值的变量。namename

10. 总结

对象解构是一项强大的功能，允许您从对象中提取属性并将这些值绑定到变量。

我特别喜欢对象解构是简洁的语法和在一个语句中提取多个变量的能力。