JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptオブジェクトのプロパティの追加・アクセス・削除方法を徹底解説

JavaScriptでは、オブジェクトのプロパティに対して追加・アクセス・削除といった操作を簡単に行うことができます。本記事では、それぞれの操作方法をサンプルコードとともにわかりやすく解説します。

JavaScriptオブジェクトのプロパティ操作の基本

JavaScriptオブジェクトのプロパティは、主に以下の方法で操作します。

  • プロパティの追加： ドット記法（obj.プロパティ名 = 値;）またはブラケット記法（obj["プロパティ名"] = 値;）を使用します。存在しないプロパティに値を代入すると、自動的に新しいプロパティが作成されます。
  • プロパティへのアクセス： ドット記法（obj.プロパティ名）で値を取得できます。
  • プロパティの削除： delete 演算子（delete obj.プロパティ名;）を使用します。削除されたプロパティにアクセスすると undefined が返されます。

サンプルコード

以下は、JavaScriptオブジェクトのプロパティを追加・アクセス・削除する完全なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptオブジェクトのプロパティ操作</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptオブジェクトのプロパティの追加・アクセス・削除</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CHECK</button>
<h3>
上のボタンをクリックすると、プロパティの追加・アクセス・削除が実行されます。
</h3>
<script>
    let resEle = document.querySelector(".result");
    let obj = {
        firstName: 'Rohan',
        lastName: 'Sharma',
        Age: '22',
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        // プロパティの追加
        obj.school = 'Ryan International';
        resEle.innerHTML = '追加したプロパティ school : ' + obj.school + '<br>';
        // プロパティへのアクセス
        resEle.innerHTML += 'プロパティへのアクセス : obj.firstName = ' + obj.firstName + '<br>';
        // プロパティの削除
        delete obj.firstName;
        resEle.innerHTML += '削除後の firstName : ' + obj.firstName + '<br>';
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず次のような画面が表示されます。

JavaScriptオブジェクトのプロパティの追加・アクセス・削除方法を徹底解説

「CHECK」ボタンをクリックした場合

「CHECK」ボタンをクリックすると、以下のように処理結果が出力されます。

  • school プロパティの追加： obj.school = 'Ryan International' により、新しいプロパティが追加され、その値が表示されます。
  • firstName プロパティへのアクセス： obj.firstName の値「Rohan」が表示されます。
  • firstName プロパティの削除： delete obj.firstName を実行した後は、該当プロパティが存在しないため undefined が返されます。

JavaScriptオブジェクトのプロパティの追加・アクセス・削除方法を徹底解説

まとめ

JavaScriptのオブジェクトは非常に柔軟なデータ構造です。ドット記法を使えば直感的にプロパティを追加・参照でき、delete 演算子を使えば不要になったプロパティを簡単に取り除けます。これらの基本操作は、日常的なフロントエンド開発において頻繁に登場するため、しっかりと理解しておきましょう。

  1. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座

  2. JavaScriptで既存のオブジェクトにプロパティとメソッドを追加する方法

    JavaScriptのオブジェクトは動的な性質を持っており、一度作成した後でも、いつでも新しいプロパティやメソッドを追加できます。最もシンプルな方法は、ドット記法（オブジェクト名.プロパティ名）を使って値を代入することです。プロパティに関数を代入すれば、それがそのままメソッドとして機能します。 基本的な書き方 object.newProperty = value; object.newMethod = function() {   // 処理 }; サンプルコード 以下は、既存の student オブジェクトにプロパティとメソッドを追加し、その内容を画面に表示する完全な例で