JavaScript でのオブジェクトの分割を見てみましょう

分割とは、データ型の 1 つを分解し、その個々の属性を変数に割り当てる概念です。これは、記事「5 一般的な JavaScript 分割割り当てのシナリオと例 」で紹介されました。今日はそれを確認しましょう。 。 一度。

基本的な分割

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, lastName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(lastName); // Tang

上記のコード スニペットに見られるように、分割構文では、firstName オブジェクト プロパティが分解され、式で定義された変数に割り当てられます。側。上記のシナリオでは、オブジェクトのプロパティ名は、左側の式で定義された変数と一致する必要があります。他の変数名を定義すると、次のような望ましい値が得られません。

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, trueName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(trueName); // undefined

fullName には属性 trueName がないため、次のように初期化されます。 ＃ ＃＃未定義＃＃＃。 エイリアスの構造化

一貫性のない属性名を持つ変数名にオブジェクト属性を割り当てる必要がある場合は、次のコードを使用して実装できます:

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang

デフォルト値の構造化

上記のコードでわかるように、オブジェクト内の特定の属性の構造化はありません。通常、値は

未定義

に割り当てられます。 # にしたくない場合は、 ##unnamed には、次のようにデフォルト値を設定できます:

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 18

age

属性の下の結果を見てみましょう:

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 30

REST 分解

オブジェクトから属性を分解する場合、残りの属性構造は次のような別の変数になります。

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { age, ...username } = fullName; // 解构语法
console.log(username); // { firstName: 'Quintion', lastName: 'Tang' }
console.log(age); // 30

上記のコード スニペットでは、

username

属性は変数に割り当てられ、

rest## を使用します。 # 演算子 (...) は、変数の残りのプロパティを別のオブジェクトに割り当てます。 推奨学習: 「JavaScript ビデオ チュートリアル 」

以上がJavaScript でのオブジェクトの分割を見てみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。