JavaScript でのオブジェクト分割の使い方をマスターがまとめています

##JavaScript 列では、オブジェクトの分解の使用方法を紹介します

##関連する無料学習の推奨事項:

#javascript (ビデオ) オブジェクトの構造化は、オブジェクトからプロパティを抽出して変数にバインドできる便利な JavaScript 機能です。

さらに良いことに、オブジェクトの構造化により 1 つのステートメントで複数のプロパティを抽出でき、ネストされたオブジェクトからプロパティにアクセスでき、プロパティが存在しない場合はデフォルト値を設定できます。

この記事では、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'

Property

hero.name

値は変数

name に割り当てられます。同じ hero.realName 値を realName に割り当てます。 プロパティにアクセスして変数に割り当てるこの方法には、定型コードが必要です。 var name = hero.name

と記述すると、バインディング内で同じ

realName に対して name を 2 回言及する必要があります。 ここでオブジェクト分割構文が役立ちます。プロパティ名を繰り返すことなく、プロパティを読み取り、その値を変数に割り当てることができます。それだけでなく、1 つのステートメントで同じオブジェクトの複数のプロパティを読み取ることができます。

上記のスクリプトをリファクタリングし、オブジェクト分解を適用してプロパティ

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.realName を対応して割り当てます。 。 オブジェクト プロパティにアクセスする 2 つの方法を比較します。

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.デフォルト値分割されたオブジェクトに分割代入で指定されたプロパティがない場合、変数は

unknown

に割り当てられます。それがどのように起こるかを見てみましょう:

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

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

プロパティ enemies がオブジェクト

hero にないため、構造化された変数

enemies は 未定義です。 が存在します。 幸いなことに、非構造化オブジェクトにプロパティが存在しない場合は、デフォルト値を設定できます。基本的な構文は次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const { identifier = defaultValue } = expression;</pre><div class="contentsignin">ログイン後にコピー</div></div> ここで、

identifier

はアクセスするプロパティの名前であり、

expression

はオブジェクトとして評価される必要があります。破棄後、変数 identifier には属性値が含まれます。identifier 属性が存在しない場合は、変数に defaultValue が割り当てられます。 これは同等のコードです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const identifier = expression.identifier === undefined ?          defaultValue : expression.identifier;</pre><div class="contentsignin">ログイン後にコピー</div></div> 前のコード例を変更して、デフォルト値関数を使用してみましょう:

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

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

さて、

未定義

変数

enemies

のデフォルトは ['Joker'] です。 5. エイリアス属性とは異なる名前の変数を作成したい場合は、オブジェクト分解のエイリアス関数を使用できます。

const { identifier: aliasIdentifier } = expression;

identifier

はアクセスするプロパティの名前、

aliasIdentifier

は変数の名前、expression は次のように評価される必要があります。物体。破棄後、変数 aliasIdentifier に属性値が含まれます。 同等のコード: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const aliasIdentifier = expression.identifier;</pre><div class="contentsignin">ログイン後にコピー</div></div>これは、オブジェクト分解エイリアス機能の例です:

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

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

对象解构可以给变量赋值使用声明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.总结

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

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

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

以上がJavaScript でのオブジェクト分割の使い方をマスターがまとめていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。