JavaScript オブジェクトの構造化

オブジェクトの構造化

配列の分割と同様に、オブジェクトの分割も役立ち、コードがよりクリーンで優れたものになりますが、配列の分割とは異なります。その方法は次のとおりです。

• まず、説明全体としてこのオブジェクトが必要になります。私はオブジェクト ?? にスポンジ ボブの例えを使いました。それで、それを見て少し分析してください。

let heightInCm = 4;
const obj = {
  personName: 'spongeBob',
  personAge: 37,
  personAddress: '124 Conch Street, Bikini Bottom, Pacific Ocean',
  heightInCm: 10,
  personHobbies: [
    'Jellyfishing',
    'Cooking Krabby Patties',
    'Blowing Bubbles',
    'Karate',
  ],
  home: {
    type: 'pineapple',
    location: 'bikini bottom',
    details: {
      rooms: 3,
      uniqueFeature: "it's underwater and shaped like a pineapple!",
    },
  },
};

• 次に、オブジェクトから 2 つのプロパティを破棄しましょう。

const { personName, personAge } = obj;
console.log(personName, personAge); // spongeBob 37

• ご覧のとおり、オブジェクトを破棄するには、{中括弧} を使用し、その中にオブジェクト内で取得したいプロパティ名とまったく同じ変数名を記述する必要があります。

*コロンの後に新しい変数名を入力するだけで、プロパティ名とは異なる変数名を作成することもできます。

const { personName: name, personAge: age } = obj;
console.log(name, age); // spongeBob 37

• ご覧のとおり、personName を名前に、personAge を年齢に変更しました。

*デフォルト値:

• オブジェクトに存在しないプロパティにアクセスしようとする場合に備えて、デフォルト値を設定することもできます。例:

const { DriversLicense = ['no'] } = obj;
console.log(DriversLicense);  // ['no']
// DriversLicense does not exist in obj, so the default value will be used.

* オブジェクトの構造化中に変数を変更する:

({ heightInCm } = obj);
console.log(heightInCm); // 10

• この例では、振り返ってみるとオブジェクトの外側で heightInCm = 4 であることがわかります。オブジェクト内の値を外側の heightInCm に代入したかったので、通常の構造化と同じように行いましたが、JavaScript はこれを期待しています。関数の外で { } で始まる場合はコード ブロックになるため、ステートメントを括弧で囲んで有効にします。

*ネストされたオブジェクトの構造化:

// firstway:  Extracting the Entire Nested Object 

const { details } = obj.home;
console.log(details); // { rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// second way: Extracting Specific Properties
const {
  home: { details }} = obj;

console.log(details); // {rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// third way
const {details: { rooms, uniqueFeature }} = obj.home;

console.log(rooms, uniqueFeature); // 3 "it's underwater and shaped like a pineapple!"

• 明確さ に最適: 大きなオブジェクトを操作していて、最初にオブジェクト全体を抽出することで物事を明確に保ちたい場合は、最初の方法の方が適しています。
• 効率に最適: 深くネストされたオブジェクトの特定のプロパティのみに興味がある場合は、多くの場合 3 番目の方法が最適です。簡潔であり、不必要な変数の作成を避けます。

*お読みいただきありがとうございます。すべてご理解いただければ幸いです。ご質問がございましたら、お気軽にお問い合わせください?

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