オブジェクト分割は、オブジェクトからプロパティを抽出し、変数にバインドするための便利なJavaScript機能です。
何より良いのは、オブジェクトの分割は、一つのステートメントで複数のプロパティを抽出することができ、ネストされたオブジェクトからプロパテ
この記事では、JavaScriptでオブジェクトの破壊を使用する方法を説明します。
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バインディングを2回言及し、realNameについても同じことを言及する必要があります。
これは、オブジェクト分割構文が便利な場所です：プロパティ名を複製せずにプロパティを読み取り、その値を変数に割り当てることができます。 それ以上に、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.nameプロパティの値で初期化します。
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 対応するプロパティhero.nameおよびhero.realNameの値を割り当てた2つの変数nameおよびrealNameを作成します。
4. デフォルト値
破壊されたオブジェクトに破壊の割り当てで指定されたプロパティがない場合、変数にはundefinedが割り当てられます。 それがどのように起こるか見てみましょう:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefinedプロパティenemiesがオブジェクトheroに存在しないため、変数enemiesはundefinedになります。
幸いなことに、プロパティが破壊されたオブジェクトに存在しない場合は、デフォルト値を設定することができます。 基本的な構文は次のとおりです:
const { identifier = defaultValue } = expression;ここで、identifierはアクセスするプロパティの名前で、expressionはオブジェクトに評価する必要があります。 破壊後、変数identifierにはプロパティ値が含まれているか、identifierプロパティが存在しない場合はdefaultValueが割り当てられます。
これは同等のコードです:
const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;前のコードサンプルを変更して、既定値機能を使用しましょう:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => ここで、undefinedではなく、変数enemiesのデフォルトはになります。
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を見ると、destucturingは新しい変数secretName(別名変数)を定義し、それに値hero.realNameを割り当てます。
6. ネストされたオブジェクトからのプロパティの抽出
前の例では、オブジェクトはプレーンでした。
多くの場合、オブジェクトは他のオブジェクトにネストできます。 つまり、一部のプロパティにはオブジェクトを含めることができます。
このような場合でも、オブジェクトの破壊とdeepからのアクセスプロパティを使用できます。 基本的な構文は次のとおりです:
const { nestedObjectProp: { identifier } } = expression;nestedObjectProp 入れ子になったオブジェクトを保持するプロパティの名前を指定します。 identifierは、ネストされたオブジェクトからアクセスするプロパティ名です。 expressionは、破壊されたオブジェクトに評価されます。
分割後、変数identifierにはネストされたオブジェクトのプロパティ値が含まれます。
上記の構文は次のようになります:
const identifier = expression.nestedObjectProp.identifier;プロパティを抽出できる入れ子のレベルは無制限です。 Deepからプロパティを抽出する場合は、入れ子になった中括弧を追加するだけです:
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 { : identifier } = expression;propName expressionはプロパティ名(通常は文字列)に評価され、identifierは破壊後に作成された変数名を示す必要があります。 2番目のexpressionは、破壊したいオブジェクトに評価する必要があります。
オブジェクトの破壊を行わない同等のコード:
const identifier = expression;propがプロパティ名を保持している例を見てみましょう:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'const { : name } = hero 変数nameに値heroを代入するオブジェクトの破壊です。propはプロパティ名を保持する変数です。
8. Destructuring後のRestオブジェクト
rest構文は、destructuring後の残りのプロパティを収集するのに便利です:
const { identifier, ...rest } = expression;ここで、identifierはアクセスするプロパティの名前で、expressionはオブジェクトに評価する必要があります。
破壊後、変数identifierにはプロパティ値が含まれます。 rest変数は、残りのプロパティを持つプレーンなオブジェクトです。
たとえば、プロパティnameを抽出しますが、残りのプロパティは保持します:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }destructuringconst { name, ...realHero } = heroは、プロパティnameを抽出します。
同時に、残りのプロパティ(この場合はrealName)は変数realHero:{ realName: 'Bruce Wayne' }に収集されます。
9. 一般的な使用例
9.1プロパティを変数にバインドする
前の多くの例に見られるように、オブジェクト分割はプロパティ値を変数にバインドします。
オブジェクトの破壊は、const、let、varを使用して宣言された変数に値を割り当てることができます。 または、既存の変数に代入することさえできます。
たとえば、letステートメントを使用して破壊する方法は次のとおりです:
// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'varステートメントを使用して破棄する方法:
// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'そして、すでに宣言された変数に破壊する方法は:
// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'私はそれがすぐにプロパティを抽出するために、オブジェクトの破壊とfor..ofサイクルを組み合わせることが満足していることがわかります:
const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}9.2 Function parameter destructuring
一般に、オブジェクトのdestructuringは、代入が行われる場所のどこにでも置くことができます。
たとえば、関数のparametersリスト内のオブジェクトを破棄することができます:
const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => function({ name }) 関数パラメータを破壊し、nameプロパティの値を保持する変数nameを作成します。
10. 概要
オブジェクトの分割は、オブジェクトからプロパティを抽出し、これらの値を変数にバインドできる強力な機能です。
私は特にオブジェクトの破壊について好きです簡潔な構文と一つの文で複数の変数を抽出する機能です。
うまくいけば、私の投稿はあなたがオブジェクトの破壊がいかに有用であるかを見るのを助けました！
