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'
属性hero.name値が変数名に割り当てられました。同じhero.realName値をrealNameに割り当てます。
プロパティにアクセスして変数に割り当てるこの方法には、定型コードが必要です。var name = hero.nameと書くと、同じrealNameに対して、名前を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;
識別子がアクセスされる属性の名前である場合、式はオブジェクトとして評価される必要があります。破棄後、変数識別子には属性値が含まれます。
これは、プロパティアクセサーを使用した同等のコードです。
const identifier = expression.identifier;
実際にオブジェクト分解を試してみましょう。
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const {
name } = hero;
name; // => 'Batman'
ステートメントconst {name} = heroは変数名を定義し、それをhero.namepropertyの値で初期化します。
3.複数の属性
を抽出するオブジェクトを複数の属性に分解するには、任意の数の属性を列挙し、それらの間にコンマを追加してください。
const {
identifier1, identifier2, ..., identifierN } = expression;
ここで、identifier1、... identityerNはアクセスする属性の名前であり、式はオブジェクトとして評価する必要があります。破棄後、変数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がオブジェクトに存在しないため、分解後の可変敵は未定義です。
幸い、分解されたオブジェクトにプロパティが存在しない場合は、デフォルト値を設定できます。基本的な構文は次のとおりです。
const {
identifier = defaultValue } = expression;
識別子がアクセスされる属性の名前である場合、式はオブジェクトとして評価される必要があります。破棄後、変数識別子には属性値が含まれます。識別子属性が存在しない場合は、defaultValueが変数に割り当てられます。
これは同等のコードです：
const identifier = expression.identifier === undefined ?
defaultValue : expression.identifier;
前のコード例を変更して、デフォルト値関数を使用してみましょう。
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const {
enemies = ['Joker'] } = hero;
enemies; // => ['Joker']
現在、変数の敵はデフォルトで['Joker']ではなくundefinedになっています。
5.エイリアス
異なる名前と属性で変数を作成する場合は、オブジェクト分解のエイリアス機能を使用できます。
const {
identifier: aliasIdentifier } = expression;
識別子はアクセスされる属性の名前であり、aliasIdentifierは変数の名前であり、式はオブジェクトとして評価される必要があります。破棄後、変数aliasIdentifierには属性値が含まれます。
同等のコード：
const aliasIdentifier = expression.identifier;
これは、オブジェクト分解エイリアス関数の例です。
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const {
realName: secretName } = hero;
secretName; // => 'Bruce Wayne'
const {realName：secretName} = heroを見てください。Destructuringは新しい変数secretName（エイリアス変数）を定義し、それに値hero.realNameを割り当てます。
6.ネストされたオブジェクトから属性を抽出
する前の例では、オブジェクトは単純です。属性にはプリミティブデータ型（文字列など）があります。
通常、オブジェクトは他のオブジェクトにネストできます。つまり、特定のプロパティにオブジェクトを含めることができます。
この場合でも、オブジェクト分解を使用して、深いところからプロパティにアクセスできます。基本的な構文は次のとおりです。
const {
nestedObjectProp: {
identifier } } = expression;
nestedObjectPropは、ネストされたオブジェクトを保持するプロパティの名前です。識別子は、ネストされたオブジェクトからアクセスされる属性の名前です。式は、変形されたオブジェクトを評価する必要があります。
破棄後、変数識別子にはネストされたオブジェクトのプロパティ値が含まれます。
上記の構文は次と同等です。
const identifier = expression.nestedObjectProp.identifier;
属性を抽出できるネストレベルは無制限です。ディープから属性を抽出する場合は、ネストされた中括弧を追加するだけです。
const {
propA: {
propB: {
propC: {
.... } } } } = object;
たとえば、オブジェクトヒーローにはネストされたオブジェクト{city： 'Gotham'}が含まれています。
const hero = {
name: 'Batman',
realName: 'Bruce Wayne',
address: {
city: 'Gotham'
}
};
// Object destructuring:
const {
address: {
city } } = hero;
city; // => 'Gotham'
オブジェクトの破棄を使用すると、const {address：{city}} = heroは、ネストされたオブジェクトから都市のプロパティにアクセスできます。
7.動的な名前属性の抽出動的な名前を持つ属性
を変数に抽出できます（属性名は実行時に認識されます）。
const {
[propName]: identifier } = expression;
propNameexpressionは、プロパティ名（通常は文字列）として計算する必要があり、識別子は、破棄後に作成された変数の名前を示す必要があります。2番目の式は、分解するオブジェクトを評価する必要があります。
オブジェクト分解に相当するコードはありません。
const identifier = expression[propName];
小道具にプロパティの名前が含まれている例を見てみましょう。
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.破棄されたオブジェクトの
残りの文法は、破棄後に残りのプロパティを収集するのに役立ちます。
```bash
const { identifier, ...rest } = expression;
哪里identifier是要访问的属性名称，expression应评估为一个对象。
销毁后，变量identifier包含属性值。rest变量是具有其余属性的普通对象。
例如，让我们提取属性name，但保留其余属性：
const hero = {
名前：「バットマン」、
realName： 'ブルースウェイン'
};
const {name、…realHero} =ヒーロー;
realHero; // => {realName： 'ブルースウェイン'}
const {name、…realHero} =ヒーロー抽出プロパティ名を破棄します。
同时，剩余的属性（realName在这种情况下）被收集到变量realHero：中{ realName: 'Bruce Wayne' }。
**9.常见用例**
9.1将属性绑定到变量
如之前的许多示例所示，对象解构将属性值绑定到变量。
对象解构可以给变量赋值使用声明const，let和var。甚至分配给一个已经存在的变量。
例如，以下是使用let语句解构的方法：
//
const hero = {
名前：「バットマン」、
};
{名前} =ヒーロー;
名前; // => 'バットマン'
如何使用var语句来破坏结构：
// どこ
const hero = {
名前：「バットマン」、
};
var {name} =ヒーロー;
名前; // => 'バットマン'
以及如何解构为已声明的变量：
//既存の変数
名前を付けましょう。
const hero = {
名前：「バットマン」、
};
（{名前} =ヒーロー）;
名前; // => 'バットマン'
我发现将for..of循环与对象解构相结合以立即提取属性是令人满意的：
const heroes = [
{名前： 'バットマン'}、
{名前： 'ジョーカー'}
];
for（const {name} of heroes）{console.log（name）; //「バットマン」、「ジョーカー」をログに記録します
}
9.2功能参数解构
通常，对象分解可以放置在发生分配的任何位置。
例如，您可以在函数的参数列表内破坏对象：
const heroes = [
{名前： 'バットマン'}、
{名前： 'ジョーカー'}
];
const names = heroes.map（
function（{name}）{return name;
}
）;
名前; // => ['バットマン'、 'ジョーカー']
function（{name}）は、関数パラメーターを分解し、nameがname属性の値を保持する変数を作成します。
**10.总结**
对象解构是一项强大的功能，可让您从对象中提取属性并将这些值绑定到变量。
我特别喜欢对象分解的简洁语法和在一条语句中提取多个变量的能力。
希望我的帖子对您了解对象分解的有用！
本文来自PHP中文网：[javascript](https://www.php.cn/course/list/17.html)栏目[https://www.php.cn/course/list/17.html](https://www.php.cn/course/list/17.html)