JavaScript オブジェクトを追加、削除、変更、確認する方法

JavaScript は、Web フロントエンド開発で広く使用されているスクリプト言語です。シンプルで習得が簡単で、HTML および CSS と緊密に統合されています。Web サイトやアプリケーションのクライアント側のスクリプト作成、Web サイトの作成に広く使用されています。プレゼンテーションがよりダイナミックでインタラクティブになり、より強力になりました。 JavaScript では、オブジェクトは非常に重要なデータ型であり、オブジェクトの追加、削除、変更、クエリ操作もフロントエンド開発でよく使われます。

1. JavaScript オブジェクトの概要

1. 定義

JavaScript では、オブジェクトとは、キーと値のペアで構成される、順序付けられていないデータ コレクションのセットです。キーと値のペア。キーは文字列タイプのプロパティ名で、各プロパティには一意のキーがあり、値には任意の JavaScript オブジェクトまたは基本データ型の値を指定できます。

2. 定義方法

JavaScript でオブジェクトを定義するには、次の 2 つの方法があります:

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

オブジェクト リテラルは、中括弧 { } で囲まれた式。これは、JavaScript でオブジェクトを作成するために最も一般的に使用され、最も簡単な方法です。

例:

const person = {
名前: "トム",
年齢: 20,
性別: "男性"
}

2) コンストラクターを使用する (Constructor)

JavaScript では、コンストラクターはオブジェクトのテンプレートを作成するために使用される特別な関数であり、一部のプロパティまたはメソッドをコンストラクターに事前設定できます。 new キーワードを使用すると、コンストラクターを呼び出して新しいオブジェクト インスタンスを作成できます。オブジェクト インスタンスを作成するプロセスは、多くの場合、インスタンス化と呼ばれます。

例:

function person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex ;
}

const person = new Person("Tom", 20, "male");

2. JavaScript オブジェクトの操作

1. オブジェクトの属性追加と変更

JavaScript のオブジェクトのプロパティは動的に追加され、オブジェクトの作成後にプロパティを任意に追加、変更、または削除できます。次に、JavaScript でオブジェクトのプロパティを追加および変更する方法を見てみましょう。

(1) dot.を使用する

dot. 演算子を使用して、JavaScript オブジェクトのプロパティにアクセスし、変更することができます。例:

const person = {
name: "Tom",
age: 20,
sex: "male"
}

// 変更属性
person.name = "Jerry";
person.age = 30;
person.address = "Beijing";

上記のコードでは、ドットを使用しています。 person オブジェクト プロパティ名はオブジェクトのプロパティを操作するために使用されます。これにより、オブジェクト内のプロパティを変更したり、実行時に新しいプロパティを追加したりできます。

(2) 角かっこ []

角かっこ [] を使用して、JavaScript オブジェクトのプロパティにアクセスして変更することもできます。例:

const person = {
name: "Tom",
age: 20,
sex: "male"
}

// 変更属性
person["name"] = "Jerry";
person["age"] = 30;
person["address"] = "北京";

上記の場合コードでは、ブラケット [] 演算子を使用して、使用するオブジェクト プロパティの名前にアクセスします。新しいプロパティを追加したい場合は、この方法で行うことができます。形式は次のとおりです:

person["propertyName"] = propertyValue;

2. オブジェクト プロパティの削除

JavaScript では、オブジェクトのプロパティを削除することもできます。 delete キーワードを使用して、不要になった属性を削除できます。例:

const person = {
名前: "トム",
年齢: 20,
性別: "男性"
}

// 削除属性
delete person.sex;

上記のコードでは、delete キーワードを使用して person オブジェクトの性別属性を削除します。

3. オブジェクト プロパティへのアクセス

JavaScript のオブジェクトのプロパティには、上記の 2 つの方法でアクセスし、クエリを実行できます。以下では、これら 2 つの方法を詳しく紹介します。

(1) ドット表記を使用します。

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

const person = {
name : "トム ",
年齢: 20,
性別: "男性"
}

console.log(person.name); // "トム"
console を出力します。 log(person .age); // 出力 "20"
console.log(person.sex); // 出力 "male"

(2) 角括弧 []

## を使用します# 角かっこ [] を使用して、JavaScript オブジェクトのプロパティにアクセスすることもできます。例:

const person = {

name: "Tom",
age: 20,
sex: "male"
}

console.log(person["name"]); // 出力 "Tom"

console.log(person["age"]); // Output "20"
console.log(person["sex"]); // Output "male"

3. JavaScript オブジェクト case

JavaScript オブジェクトを通じて理論的な知識を統合します。場合。

// 学生オブジェクトを定義します

let Student = {

name: 'Tom',
id: 001,
major: 'Computer Science',
scores: {
    math: 100,
    english: 90,
    physics: 95
}

};

// オブジェクトのプロパティにアクセスして変更します

student.name = 'Jerry' ; // 名前属性を変更します
student.scores.english = 92; // 英語属性を変更します
student.scores['physics'] = 98; // 物理属性を変更します

// オブジェクト属性を削除
delete Student['major']; // 主要属性を削除

// 新しい属性を追加
student.gender = 'male'; // 性別を追加プロパティ

//出力オブジェクトプロパティ
console.log(student.name); //出力「ジェリー」
console.log(student.scores.math); //出力「100」
console.log(student.scores.english); // 出力 "92"
console.log(student.scores.physic); // 出力 "98"
console.log(student.gender ); // 出力「男性」

上記の例では、「student」という名前の JavaScript オブジェクトを作成します。最初に、ピリオド演算子と括弧演算子を使用してオブジェクトのプロパティにアクセスし、変更しました。また、オブジェクトのプロパティを削除し、新しいプロパティをオブジェクトに追加する方法も示しました。最後に、オブジェクト内のいくつかのプロパティ値を出力します。

概要:

JavaScript では、オブジェクトは非常に重要なデータ型であり、オブジェクトの追加、削除、変更、クエリ操作もフロントエンド開発で広く使われています。ドット . および括弧 [] 演算子を使用して JavaScript オブジェクトのプロパティにアクセスして変更することができ、また、delete キーワードを使用して不要になったプロパティを削除することもできます。フロントエンド開発者として、Web アプリケーションを迅速かつ簡単に開発するには、JavaScript オブジェクトの操作に習熟する必要があります。

以上がJavaScript オブジェクトを追加、削除、変更、確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。