↩ プログラミング言語 Web関連 javascript JS オブジェクトの作成と使用

JS オブジェクトの作成と使用

JavaScript はオブジェクト指向プログラミング言語であり、JavaScript のほとんどすべてがオブジェクトです。したがって、JavaScript を効果的に使用するには、まずオブジェクトがどのように機能するか、およびそれらの作成方法と使用方法を理解する必要があります。

オブジェクトは、名前と値 (キーと値のペア) を持つプロパティの順序付けられていないコレクションと考えることができます。「 JSData のタイプ」のセクションから、配列は値のコレクションであり、各値には数値インデックス (ゼロから始まり、順番に増加する) があることがわかります。オブジェクトは配列に似ていますが、名前 (name)、年齢 (age)、性別 (sex) など、オブジェクト内のインデックスがカスタマイズされている点が異なります。

コンテンツ 表示

JS はオブジェクトを作成します

中かっこ{ }を使用してオブジェクトを作成できます。 { }は、オブジェクトのプロパティを定義するために使用されます。プロパティは键:值のペアの組み合わせであり、キー (プロパティ名) は常に文字列型であり、値 (プロパティ値) は文字列、配列、関数、その他のオブジェクトなど、任意の型にすることができます。異なる属性はカンマで区切ります。サンプルコードは次のとおりです。

 var person = {
    name: "ピーター",
    age: 28,
    gender: "男性",
    displayName: function() {
        document.write(this.name);
    }
};

ヒント: オブジェクトで定義された関数は、メソッドと呼ばれることがよくあります。

上記の例では、3 つの属性 name、age、gender、およびメソッド displayName() を含む person という名前のオブジェクトが作成されます。 displayName() メソッドの this.name は、JavaScript によって person.name として解析される現在のオブジェクトの name 属性にアクセスすることを意味します。

オブジェクトを定義する場合、属性名は文字列型ですが、通常は引用符で定義する必要はありませんが、次の 3 つの状況では、属性名に引用符を追加する必要があります。

プロパティ名は JavaScript の予約語です。
属性名には、スペースまたは特殊文字 (文字、数字、_ および $ を除く任意の文字) が含まれています。
プロパティ名は数字で始まります。

サンプルコードは次のとおりです。

 let person = {
    "first name": "Peter",
    "current age": 28,
    gender: "男性"
};

オブジェクトのプロパティにアクセスする

プロパティの値にアクセスまたは取得するには、次の例に示すように、对象名.属性名または对象名["属性名"]の形式を使用できます。

 var person = {
    name: "ピーター",
    age: 28,
    gender: "男性",
    displayName: function() {
        document.write(this.name);
    }
}

document.write("名前：" + person.name + "<br>");   // 出力：名前：ピーター
document.write("年齢：" + person["age"]);          // 出力：年齢：28

オブジェクトプロパティにアクセスする場合、对象名.属性名の形式を使用してコードを記述する方が簡単ですが、すべての場合に使用できるわけではありません。プロパティ名にスペースまたは特殊文字が含まれている場合、对象名.属性名の形式を使用してオブジェクトプロパティにアクセスすることはできません。次の例に示すように、对象名["属性名"]の形式を使用する必要があります。

 var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

document.write(person["first name"]);   // 出力：Peter
document.write(person.current age);     // エラー：引数リストの後に ) がありません

Object["attribute_name"]の形式を使用してオブジェクトのプロパティにアクセスする方法は比較的柔軟です. プロパティ名を介してプロパティに直接アクセスするだけでなく, プロパティ名を変数に割り当ててから, この変数を使用してプロパティ値にアクセスすることもできます.示されている:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var key = "age";
document.write(person[key]); // 出力：28

変更されたオブジェクトのプロパティを設定する

Object.attributeまたはobject["attribute"]の形式を使用すると、オブジェクトのプロパティ値を取得できるだけでなく、オブジェクトのプロパティ値を設定または変更するためにも使用できます。例：

var person = {
    name：「Peter」、
    age：28、
    gender：「男性」
};

person.phone =「15012345678」;
person.age = 20;
person [「name」] =「Peter Parker」;

for(var key in person){
    document.write(key +「：」+ person [key] +「<br>」）
}

出力は次のとおりです。

name：Peter Parker
age: 20
gender: 男性
phone: 15012345678

JSはオブジェクトのプロパティを削除します

次の例に示すように、delete ステートメントを使用して、オブジェクトからプロパティを削除できます。

 var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    phone: "15012345678"
};

delete person.gender;
delete person["phone"];

for (var key in person) {
    document.write(key + "：" + person[key] + "<br>")
}

出力は次のとおりです。

name: Peter
age: 28

ヒント: delete ステートメントは、指定されたプロパティをオブジェクトから削除する唯一の方法ですが、プロパティ値を未定義または null に設定すると、プロパティの値が変更されるだけで、オブジェクトから削除されません。

次の例に示すように、オブジェクトのプロパティであるかのように、オブジェクトのメソッドを呼び出すことができます。

 var person = {
    name: "Peter",
    age: 28,
    gender: "男性",
    displayName: function() {
        document.write(this.name);
    }
};

person.displayName();       // 出力：Peter
person["displayName"]();    // 出力：Peter