Master summarizes how to use object destructuring in JavaScript-JS Tutorial-php.cn

JavaScript column introduces how to use object deconstruction

Master summarizes how to use object destructuring in JavaScript

##Related free learning recommendations: javascript (Video)

Object destructuring is a useful JavaScript feature that can extract properties from an object and bind them to variables.

Even better, object destructuring can extract multiple properties in a single statement, properties can be accessed from nested objects, and a default value can be set if the property does not exist.

In this article, I will explain how to use object decomposition in JavaScript.

Directory

1.Require object decomposition

2.Extract attributes
3.Extract multiple attributes
4.Default value
5.Alias
6. Extract attributes from nested objects
7. Extract dynamic name attributes
8. Destroyed objects
9. Common use cases
10. Summary

1. Require objects Decomposition

Suppose you want to extract some properties of an object. In a pre-ES2015 environment, you would need to write the following code:

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

var name     = hero.name;var realName = hero.realName;
name;     // => 'Batman',
realName; // => 'Bruce Wayne'

Copy after login

Property

hero.nameThe value is assigned to the variable name. Assign the same hero.realName value to realName.

This method of accessing a property and assigning it to a variable requires boilerplate code. By writing

var name = hero.name, you have to mention name twice in the binding, for the same realName.

This is where object destructuring syntax is useful: you can read a property and assign its value to a variable without repeating the property name. Not only that, you can read multiple properties of the same object in one statement!

Let's refactor the above script and apply object decomposition to access properties

name and realName:

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

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

Copy after login

const { name , realName } = hero is the object destruction and allocation. This statement defines the variables name and realName, and then assigns to their attribute values hero.name and hero.realNamecorrespondigly.

Compare the two methods of accessing object properties:

const name     = hero.name;
const realName = hero.realName;

// is equivalent to:

const { name, realName } = hero;

Copy after login

It can be seen that since the property names and object variables are not repeated, the decomposition of the object is more convenient.

2. Extract attributes

The basic syntax for object destructuring is very simple:

const { identifier } = expression;

Copy after login

where

identifier is the name of the property to be accessed, expression Should evaluate to an object. After destruction, the variable identifier contains the attribute value.

This is the equivalent code using property accessors:

const identifier = expression.identifier;

Copy after login

Let's try object decomposition in practice:

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

const { name } = hero;
name; // => 'Batman'

Copy after login

The statement

const { name } = herodefines the variable name and initializes it with the value of hero.nameproperty.

3. Extract multiple properties

To break the object into multiple properties, enumerate any number of properties and

,add commas in between:

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

Copy after login

where

identifier1,...identifierN are the names of the properties to be accessed and the expression should evaluate to objects. After destruction, the variables identifier1…identifierN contain the corresponding attribute values.

Here is the equivalent code:

const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;

Copy after login

Let’s look at the example from the first part again, where 2 properties are extracted:

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

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

Copy after login

const { name, realName } = hero Create 2 variables name and realName assign the corresponding attributes hero.name and the value of hero.realName.

4.Default value

If the destructured object does not have the properties specified in the destructuring assignment, the variable is assigned to

undefined. Let's see how it happens:

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

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

Copy after login

The destructured variable

enemies is undefined because the property enemies is not in the object hero exists.

Fortunately, if the property does not exist in the destructured object, you can set a default value. The basic syntax is as follows:

const { identifier = defaultValue } = expression;

Copy after login

where

identifier is the name of the property to be accessed and expression should evaluate to an object. After destruction, the variable identifier contains the attribute value, or defaultValue is assigned to the variable if the identifier attribute does not exist.

This is the equivalent code:

const identifier = expression.identifier === undefined ? 
        defaultValue : expression.identifier;

Copy after login

Let’s change the previous code example and use the default value function:

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

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

Copy after login

Now,

undefined The variable enemies defaults to ['Joker'].

5. Alias

If you want to create a variable with a different name than the attribute, you can use the alias function of object decomposition.

const { identifier: aliasIdentifier } = expression;

Copy after login

identifier is the name of the property to be accessed, aliasIdentifier is the name of the variable, and expression should evaluate to an object. After destruction, the variable aliasIdentifier contains the attribute value.

Equivalent code:

const aliasIdentifier = expression.identifier;

Copy after login

This is an example of object decomposition alias functionality:

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

const { realName: secretName } = hero;
secretName; // => 'Bruce Wayne'

Copy after login

看一下const { realName: secretName } = hero，解构定义了一个新变量secretName（别名变量），并为其分配了值hero.realName。

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

在前面的示例中，对象很简单：属性具有原始数据类型（例如字符串）。

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

在这种情况下，您仍然可以从深处使用对象分解和访问属性。基本语法如下：

const { nestedObjectProp: { identifier } } = expression;

Copy after login

nestedObjectProp是保存嵌套对象的属性的名称。identifier是要从嵌套对象访问的属性名称。expression应该评估变形后的对象。

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

上面的语法等效于：

const identifier = expression.nestedObjectProp.identifier;

Copy after login

您可以从中提取属性的嵌套级别不受限制。如果要从深处提取属性，只需添加更多嵌套的花括号：

const { propA: { propB: { propC: { .... } } } } = object;

Copy after login

例如，对象hero包含一个嵌套对象{ city: 'Gotham'}。

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

// Object destructuring:
const { address: { city } } = hero;
city; // => 'Gotham'

Copy after login

通过对象解构，const { address: { city } } = hero您可以city从嵌套对象访问属性。

7.提取动态名称属性

您可以将具有动态名称的属性提取到变量中（属性名称在运行时是已知的）：

const { [propName]: identifier } = expression;

Copy after login

propNameexpression应该计算为属性名称（通常是字符串），并且identifier应该指示在解构之后创建的变量名称。第二个expression应该评估要分解的对象。

没有对象分解的等效代码：

const identifier = expression[propName];

Copy after login

让我们看一个prop包含属性名称的示例：

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

const prop = 'name';
const { [prop]: name } = hero;
name; // => 'Batman'

Copy after login

const { [prop]: name } = hero是一个对象分解，将变量赋给namevalue hero[prop]，其中prop是一个保存属性名称的变量。

8.销毁后的物体

rest语法对于在解构之后收集其余属性很有用：

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

Copy after login

哪里identifier是要访问的属性名称，expression应评估为一个对象。

销毁后，变量identifier包含属性值。rest变量是具有其余属性的普通对象。

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

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

const { name, ...realHero } = hero;
realHero; // => { realName: 'Bruce Wayne' }

Copy after login

破坏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'

Copy after login

如何使用var语句来破坏结构：

// var
const hero = {
  name: 'Batman',
};

var { name } = hero;
name; // => 'Batman'

Copy after login

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

// existing variable
let name;

const hero = {
  name: 'Batman',
};

({ name } = hero);
name; // => 'Batman'

Copy after login

我发现将for..of循环与对象解构相结合以立即提取属性是令人满意的：

const heroes = [
  { name: 'Batman' },
  { name: 'Joker' }
];

for (const { name } of heroes) {  console.log(name); // logs 'Batman', 'Joker'
}

Copy after login

9.2功能参数解构

通常，对象分解可以放置在发生分配的任何位置。

例如，您可以在函数的参数列表内破坏对象：

const heroes = [
  { name: 'Batman' },
  { name: 'Joker' }
];

const names = heroes.map(
  function({ name }) {    return name;
  }
);

names; // => ['Batman', 'Joker']

Copy after login

function({ name })解构函数参数，创建一个name保存name属性值的变量。

10.总结

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

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

希望我的帖子对您了解对象分解的有用！

The above is the detailed content of Master summarizes how to use object destructuring in JavaScript. For more information, please follow other related articles on the PHP Chinese website!