##関連する無料学習の推奨事項:さらに良いことに、オブジェクトの構造化により 1 つのステートメントで複数のプロパティを抽出でき、ネストされたオブジェクトからプロパティにアクセスでき、プロパティが存在しない場合はデフォルト値を設定できます。 この記事では、JavaScript でオブジェクトの分解を使用する方法を説明します。 ディレクトリ1.オブジェクトの分解が必要#javascript (ビデオ) オブジェクトの構造化は、オブジェクトからプロパティを抽出して変数にバインドできる便利な JavaScript 機能です。
4.デフォルト値
5.エイリアス
6 . ネストされたオブジェクトから属性を抽出する
7. 動的名前属性を抽出する
8. 破棄されたオブジェクト
9. 一般的な使用例
10. 概要
1. オブジェクトの分解を必要とする
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
realName に対して name を 2 回言及する必要があります。 ここでオブジェクト分割構文が役立ちます。プロパティ名を繰り返すことなく、プロパティを読み取り、その値を変数に割り当てることができます。それだけでなく、1 つのステートメントで同じオブジェクトの複数のプロパティを読み取ることができます。
name
およびrealName にアクセスしましょう:
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
name; // => 'Batman',
realName; // => 'Bruce Wayne'name と realName を定義し、それらの属性値 hero.name と hero.realName を対応して割り当てます。 。 オブジェクト プロパティにアクセスする 2 つの方法を比較します。
const name = hero.name;
const realName = hero.realName;
// is equivalent to:
const { name, realName } = hero;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;
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.デフォルト値分割されたオブジェクトに分割代入で指定されたプロパティがない場合、変数は
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { enemies } = hero;
enemies; // => undefinedプロパティ enemies がオブジェクト
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> ここで、
はアクセスするプロパティの名前であり、
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;はアクセスするプロパティの名前、
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。
在前面的示例中，对象很简单：属性具有原始数据类型（例如字符串）。
通常，对象可以嵌套在其他对象中。换句话说，某些属性可以包含对象。
在这种情况下，您仍然可以从深处使用对象分解和访问属性。基本语法如下：
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从嵌套对象访问属性。
您可以将具有动态名称的属性提取到变量中（属性名称在运行时是已知的）：
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是一个保存属性名称的变量。
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' }。
如之前的许多示例所示，对象解构将属性值绑定到变量。
对象解构可以给变量赋值使用声明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'
}通常，对象分解可以放置在发生分配的任何位置。
例如，您可以在函数的参数列表内破坏对象：
const heroes = [
{ name: 'Batman' },
{ name: 'Joker' }
];
const names = heroes.map(
function({ name }) { return name;
}
);
names; // => ['Batman', 'Joker']function({ name })解构函数参数，创建一个name保存name属性值的变量。
对象解构是一项强大的功能，可让您从对象中提取属性并将这些值绑定到变量。
我特别喜欢对象分解的简洁语法和在一条语句中提取多个变量的能力。
希望我的帖子对您了解对象分解的有用！
以上がJavaScript でのオブジェクト分割の使い方をマスターがまとめていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
