JavaScript物件增刪改查怎麼操作

JavaScript是一種廣泛用於Web前端開發的腳本語言，它簡單易學，與HTML、CSS結合緊密，被廣泛應用於網站與應用程式用戶端腳本編寫，使得網站呈現更加動態化、互動性更強。而在JavaScript中，物件是一種非常重要的資料類型，物件的增刪改查操作在前端開發中也是無所不在的。

一、JavaScript物件概述

1.定義

在JavaScript中，物件是一組無序的資料集合，由鍵值對(Key-value pair)組成，其中鍵值對的鍵為字串類型的屬性名稱，每個屬性都有一個唯一的鍵，而值可以是任何JavaScript物件或基本資料類型的值。

2.定義方式

JavaScript中定義物件可以透過以下兩種方式實作：

1）使用物件字面量(Object Literal)

物件字面量是一個用花括號{ }包起來的表達式。它是JavaScript中最常用且最簡單的物件建立方式。

例如：

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

2）使用建構子(Constructor)

在JavaScript中，建構子是一種特殊的函數，用來建立物件的模板，在建構函式中可以預設一些屬性或方法。透過使用 new 關鍵字，可以呼叫建構函式並建立新的物件實例。建立物件實例的過程通常稱為實例化。

例如：

function Person(name, age, sex) {  
 this.name = name;  
 this.age = age;  
#  this.sex = sexthis. ;  
}

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

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

二、JavaScript物件操作

#1.物件屬性的增加和修改

JavaScript中物件的屬性是動態新增的，可以在物件建立後任意新增、修改、刪除屬性。接下來，我們來看看在JavaScript中如何增加和修改物件屬性。

（1）使用點號.

可以使用點號.運算子來存取和修改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"] = "Beijing";

上述程式碼中，我們使用中括號[]運算符，可以存取我們希望使用的物件屬性的名稱。如果希望增加新屬性，可以透過這個方式實現，格式如下：

person["propertyName"] = propertyValue;

2.物件屬性的刪除

##JavaScript中物件的屬性也可以刪除。我們可以使用 delete 關鍵字來刪除不再需要的屬性。例如：

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

}

// 刪除屬性

delete person.sex;

上述程式碼中，我們使用delete 關鍵字，將person物件中的sex屬性刪除了。

3.物件屬性的存取

JavaScript中物件的屬性可以透過上述提到的兩種方式進行存取和查詢。下面我們將詳細介紹一下這兩種方式。

（1）使用點號.

我們可以使用點號.來存取物件的屬性，例如：

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

}

console.log(person.name); // 輸出"Tom"
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"]); // 輸出"20"

console.log(person["sex"]); // 輸出"male"

三、JavaScript物件案例

透過一個JavaScript物件案例，鞏固我們的理論知識。

// 定義學生物件

let student = {

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

};

// 存取與修改物件屬性
student.name = 'Jerry' ; // 修改name屬性
student.scores.english = 92; // 修改english屬性

student.scores['physics'] = 98; // 修改physics屬性###

// 刪除物件屬性
delete student['major']; // 刪除major屬性

// 新增屬性
student.gender = 'male'; // 新增gender屬性

// 輸出物件屬性
console.log(student.name); // 輸出"Jerry"
console.log(student.scores.math); // 輸出"100"
console.log(student.scores.english); // 輸出"92"
console.log(student.scores.physic); // 輸出"98"
console.log(student.gender ); // 輸出"male"

在上述案例中，我們建立一個名為「student」的JavaScript物件。我們首先使用點號和中括號運算子來存取和修改物件的屬性，也示範如何刪除一個物件屬性和為物件新增新的屬性。最後，我們輸出了物件中的幾個屬性值。

總結：

在JavaScript中，物件是一種非常重要的資料類型，物件的增刪改查操作在前端開發中也是無所不在的。我們可以使用點號.和中括號[]運算子來存取和修改JavaScript物件的屬性，也可以使用 delete 關鍵字來刪除我們不再需要的屬性。身為前端開發人員，我們要熟練JavaScript物件的操作，以便快速方便地開發Web應用程式。

以上是JavaScript物件增刪改查怎麼操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！