189 8069 5689

在JavaScript中使用对象解构的方法

这篇文章给大家分享的是有关在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

这就是对象解构语法有用的地方:您可以读取属性并将其值分配给变量,而无需重复属性名称。不仅如此,您还可以在一个语句中读取同一对象的多个属性!

让我们重构上面的脚本,并应用对象分解来访问属性namerealName

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, realName } = hero;
name;     // => 'Batman',
realName; // => 'Bruce Wayne'

const { name, realName } = hero是对象销毁分配。这个语句定义变量namerealName,然后分配给他们的属性值hero.namehero.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应评估为对象。销毁后,变量identifier1identifierN包含相应的属性值。

这是等效的代码:

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个变量namerealName分配相应属性hero.name和的值hero.realName

4.默认值

如果已解构的对象不具有在解构分配中指定的属性,则将变量分配给undefined。让我们看看它是如何发生的:

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { enemies } = hero;
enemies;     // => undefined

解构后的变量enemiesundefined因为该属性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是一个保存属性名称的变量。

8.销毁后的物体

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将属性绑定到变量

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

对象解构可以给变量赋值使用声明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 })解构函数参数,创建一个name保存name属性值的变量。

感谢各位的阅读!关于在JavaScript中使用对象解构的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


标题名称:在JavaScript中使用对象解构的方法
标题网址:http://cdxtjz.cn/article/gogjhi.html

其他资讯