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

JavaScriptでオブジェクトに特定のプロパティが存在するか確認する方法

JavaScriptでオブジェクトのプロパティ存在を確認する方法

JavaScriptでは、オブジェクトに特定のプロパティが存在するかどうかを確認したい場面がよくあります。最も基本的な方法は、すべてのオブジェクトが持つhasOwnProperty()メソッドを使用することです。このメソッドは、指定したプロパティがオブジェクト自身に直接定義されている場合にtrueを返し、存在しない場合にはfalseを返します。

hasOwnProperty()メソッドの構文

object.hasOwnProperty(propertyName)
  • propertyName： 存在を確認したいプロパティ名（文字列またはシンボル）
  • 戻り値： プロパティが存在すれば true、なければ false

サンプルコード

以下は、hasOwnProperty()メソッドを使って、オブジェクト内に「firstName」プロパティが存在するかどうかをチェックする完全なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>オブジェクト内のプロパティを確認する</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、objオブジェクトにfirstNameプロパティが存在するかどうかを確認できます</h3>
<script>
    let resEle = document.querySelector(".result");
    let obj = { firstName: "Rohan", lastName: "Sharma", age: 21 };
    document.querySelector(".Btn").addEventListener("click", () => {
        if (obj.hasOwnProperty("firstName")) {
            resEle.innerHTML = "objオブジェクトにはfirstNameプロパティが存在します";
        } else {
            resEle.innerHTML = "objオブジェクトにはfirstNameプロパティが存在しません";
        }
    });
</script>
</body>
</html>

実行結果

JavaScriptでオブジェクトに特定のプロパティが存在するか確認する方法

「ここをクリック」ボタンを押すと、次のように判定結果が画面に表示されます。

JavaScriptでオブジェクトに特定のプロパティが存在するか確認する方法

この例では、「obj」オブジェクトに「firstName」プロパティが実際に存在するため、trueが返され、その旨のメッセージが表示されます。もし存在しないプロパティ名を指定した場合はfalseが返され、「プロパティが存在しません」というメッセージが表示される仕組みです。

補足：in演算子との違い

プロパティの存在確認には、in演算子を使う方法もあります。"firstName" in obj のように記述しますが、in演算子は継承されたプロパティ（プロトタイプチェーン上のプロパティ）も含めてチェックする点が、hasOwnProperty()と異なります。オブジェクト自身が直接持つプロパティのみを厳密に確認したい場合は、hasOwnProperty()を使うのが適切です。

  1. JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法

    JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。 以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta

  2. 【JavaScript】オブジェクトがクラスのインスタンスかどうかを判定する方法

    JavaScriptでは、instanceof 演算子を使うことで、あるオブジェクトが特定のクラス（コンストラクタ関数）のインスタンスであるかどうかを簡単に判定できます。instanceof 演算子とは？instanceof 演算子は、左辺のオブジェクトが右辺に指定したコンストラクタ関数のプロトタイプチェーン上に存在するかどうかを評価し、その結果を真偽値（true / false）として返します。この仕組みを利用することで、オブジェクトがどのクラスから生成されたものなのかを実行時に動的にチェックできます。コード例以下は、ボタンをクリックしたときに student1 オブジェクトが Studen