关于javascript:阿里大牛最佳总结如何在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.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 语句解构的办法：

// 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})解构函数参数，创立一个 name 保留 name 属性值的变量。

10. 总结

对象解构是一项弱小的性能，可让您从对象中提取属性并将这些值绑定到变量。

我特地喜爱对象合成的简洁语法和在一条语句中提取多个变量的能力。

心愿我的帖子对您理解对象合成的有用！

最初，说个题外话，我平时始终有整顿面试题的习惯，有随时跳出舒服圈的筹备，人不知; 鬼不觉整顿了 229 页了，在这里分享给大家，有须要的 点击这里收费支付题目 + 解析 PDF