プロパティへのアクセス - 詳細-jsチュートリアル-php.cn

Access to Properties-deep dive

JavaScript は、Web 開発で広く使用されている多用途で強力なプログラミング言語です。その重要な機能の 1 つは、プロパティとメソッドをカプセル化できるオブジェクトを定義する機能です。これらのオブジェクトと対話するさまざまな方法の中で、アクセサーは重要な役割を果たします。

JavaScript でのプロパティへのアクセスについて詳しく見てみましょう。

JavaScript オブジェクトを使用したキャロットケーキのレシピ

キャロットケーキのレシピを表す JavaScript オブジェクトを作成しましょう。ドット表記と括弧表記の両方を使用してプロパティにアクセスします。

ステップ 1: キャロットケーキオブジェクトを定義する

材料、焼き時間、手順などのプロパティを含むオブジェクトを定義します。

const carrotCake = {
    name: 'Carrot Cake',
    ingredients: {
        flour: '2 cups',
        sugar: '1 cup',
        carrots: '2 cups grated',
        eggs: '3 large',
        oil: '1 cup',
        bakingPowder: '2 tsp',
        cinnamon: '1 tsp',
        salt: '1/2 tsp'
    },
    bakingTime: '45 minutes',
    instructions: [
        'Preheat the oven to 350°F (175°C).',
        'In a bowl, mix flour, sugar, baking powder, cinnamon, and salt.',
        'In another bowl, whisk eggs and oil together.',
        'Combine the wet and dry ingredients, then fold in grated carrots.',
        'Pour the batter into a greased cake pan.',
        'Bake for 45 minutes or until a toothpick comes out clean.',
        'Let cool before serving.'
    ]
};

ログイン後にコピー

ステップ 2: ドット表記を使用してプロパティにアクセスする

ドット表記を使用して、キャロットケーキオブジェクトのプロパティにアクセスできます。

console.log(carrotCake.name); // Outputs: Carrot Cake
console.log(carrotCake.bakingTime); // Outputs: 45 minutes
console.log(carrotCake.ingredients.flour); // Outputs: 2 cups

ログイン後にコピー

ステップ 3: 括弧表記を使用してプロパティにアクセスする

括弧表記を使用することもできます。これは、スペースを含むプロパティや動的キーを使用する場合に特に便利です。

console.log(carrotCake['name']); // Outputs: Carrot Cake
console.log(carrotCake['bakingTime']); // Outputs: 45 minutes
console.log(carrotCake['ingredients']['sugar']); // Outputs: 1 cup

ログイン後にコピー

ステップ 4: 材料をループする

for...in ループを使用して材料をループし、すべての材料を表示できます。

for (const ingredient in carrotCake.ingredients) {
    console.log(`${ingredient}: ${carrotCake.ingredients[ingredient]}`);
}

ログイン後にコピー

これは出力します:

flour: 2 cups
sugar: 1 cup
carrots: 2 cups grated
eggs: 3 large
oil: 1 cup
bakingPowder: 2 tsp
cinnamon: 1 tsp
salt: 1/2 tsp

ログイン後にコピー

JavaScript オブジェクトアクセサとは何ですか?

アクセサ は、オブジェクトのプロパティの値を get または set するメソッドです。これらには、ゲッターとセッターの 2 つの形式があります。

Getters: プロパティの値を取得するメソッド。

Setters: プロパティの値を設定するメソッド。

これらのアクセサーは、プロパティへのアクセスおよび変更方法を制御する方法を提供します。これは、データの検証、カプセル化、計算されたプロパティの提供に役立ちます。

ゲッターとセッターの定義

JavaScript では、オブジェクトリテラル内で、または Object.defineProperty メソッドを使用してゲッターとセッターを定義できます。

オブジェクトリテラルの使用

オブジェクトリテラルでゲッターとセッターを定義する方法の例を次に示します。

let person = {
    firstName: "Irena",
    lastName: "Doe",
    get fullName() {
        return `${this.firstName} ${this.lastName}`; // Returns full name
    },
    set fullName(name) {
        let parts = name.split(' '); // Splits the name into parts
        this.firstName = parts[0]; // Sets first name
        this.lastName = parts[1]; // Sets last name
    }
};

console.log(person.fullName); // Outputs: Irena Doe
person.fullName = "Jane Smith"; // Updates first and last name
console.log(person.firstName); // Outputs: Jane
console.log(person.lastName); // Outputs: Smith

ログイン後にコピー

オブジェクト定義: firstName と lastName のプロパティを持つ person という名前のオブジェクトを定義しました。

ゲッター: fullName ゲッターは、firstName と lastName を連結して、アクセス時にフルネームを返します。
セッター: fullName セッターは、指定されたフルネーム文字列を複数の部分に分割し、最初の部分を firstName に割り当て、2 番目の部分を lastName に割り当てます。使用法： person.fullName をログに記録すると、「Irena Doe」が正しく出力されます。 person.fullName を「Jane Smith」に設定すると、firstName プロパティと lastName プロパティがそれに応じて更新されます。

ゲッター/セッターとドット/括弧表記の違いを説明するために、キャロットケーキの例を拡張してみましょう。直接プロパティアクセスと、ゲッターとセッターを介したプロパティアクセスの両方を備えたオブジェクトを作成します。
ステップ 1: キャロットケーキオブジェクトを定義する
直接プロパティと特定のプロパティのゲッター/セッターの両方を使用するキャロットケーキオブジェクトを定義します。

const carrotCake = {
    name: 'Carrot Cake',
    ingredients: {
        flour: '2 cups',
        sugar: '1 cup',
        carrots: '2 cups grated',
        eggs: '3 large',
        oil: '1 cup',
        bakingPowder: '2 tsp',
        cinnamon: '1 tsp',
        salt: '1/2 tsp'
    },
    bakingTime: '45 minutes',
    instructions: [
        'Preheat the oven to 350°F (175°C).',
        'In a bowl, mix flour, sugar, baking powder, cinnamon, and salt.',
        'In another bowl, whisk eggs and oil together.',
        'Combine the wet and dry ingredients, then fold in grated carrots.',
        'Pour the batter into a greased cake pan.',
        'Bake for 45 minutes or until a toothpick comes out clean.',
        'Let cool before serving.'
    ]
};

ログイン後にコピー

ステップ 2: ドットと括弧表記を使用してプロパティにアクセスするドット表記を使用してプロパティに直接アクセスして変更してみましょう。

console.log(carrotCake.name); // Outputs: Carrot Cake
console.log(carrotCake.bakingTime); // Outputs: 45 minutes
console.log(carrotCake.ingredients.flour); // Outputs: 2 cups

ログイン後にコピー

ステップ 3: ゲッターとセッターを使用してプロパティにアクセスする次に、ゲッターとセッターを使用してプロパティにアクセスし、変更してみましょう。

console.log(carrotCake['name']); // Outputs: Carrot Cake
console.log(carrotCake['bakingTime']); // Outputs: 45 minutes
console.log(carrotCake['ingredients']['sugar']); // Outputs: 1 cup

ログイン後にコピー

ステップ 4: 材料を更新するメソッドを使用して成分を更新する:

for (const ingredient in carrotCake.ingredients) {
    console.log(`${ingredient}: ${carrotCake.ingredients[ingredient]}`);
}

ログイン後にコピー

違いをまとめてみましょう

ドット/括弧表記:

プロパティに直接アクセスまたは変更します。
検証やロジックは適用されません。たとえば、キャロットケーキ._name = ''; チェックなしで名前が上書きされます。 ###ゲッター/セッター:
プロパティにアクセスして変更するための制御された方法を提供します。
セッターでの検証などのカスタムロジックを含めることができます。例: キャロットケーキ.name = '';空の名前を設定できなくなります。

この例では、JavaScript オブジェクトで両方のアプローチを使用する方法を示し、ロジックをカプセル化し、データの整合性を確保するためのゲッターとセッターの利点を強調します。

アクセサーを使用する利点

カプセル化
アクセサーを使用すると、オブジェクトの内部表現を非表示にして、よりクリーンなインターフェイスを公開できます。これは、オブジェクト指向プログラミングにおけるカプセル化の基本原則です。
検証
セッターを使用すると、プロパティを更新する前にデータを検証できます。これにより、オブジェクトが有効な状態に保たれることが保証されます。

まとめ

この例では、キャロットケーキのレシピを表す単純な JavaScript オブジェクトを作成しました。ドット表記と括弧表記の両方を使用してそのプロパティにアクセスし、JavaScript でプロパティアクセサーがいかに多用途であるかを示しました。

JavaScript オブジェクトアクセサーは、オブジェクトプロパティの操作方法を強化する強力な機能です。ゲッターとセッターを使用すると、カプセル化、検証、計算プロパティ、読み取り専用プロパティをオブジェクトに追加できます。これらのアクセサーを理解して利用すると、より堅牢で保守しやすく、よりクリーンなコードが得られます。 JavaScript の探索と習得を続けると、アクセサーをオブジェクトに組み込むことが、プログラミングツールキットの貴重なツールになることは間違いありません。

以上がプロパティへのアクセス - 詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。