在 JavaScript 中建立物件列表
Muhammad Muzammil Hussain
2023年10月12日
本文將演示在 JavaScript 中建立物件列表及其屬性和方法。
在 JavaScript 中建立物件列表
JavaScript 是一種物件導向的程式語言，在任何物件導向的程式語言中，一切都被視為物件。
物件是具有狀態和行為的現實世界實體 - 例如，汽車。汽車具有狀態（顏色）和行為（速度、加速度等）。
通常，一個物件伴隨著其他程式語言中的一個類，而類定義了一個物件的藍圖。但是 JavaScript 不需要類來建立物件，因為它純粹基於模板。
語法：
const object = {
// object's different member's names & values
name1: value1,
name2: value2,
name3: value3
};
注意
物件成員的值可以是數字、字串、陣列，甚至是函式。
讓我們看一個簡單的 JavaScript 演示。
const employee = {
id: 541,
company: ['Delft', 'Stack'],
details: function() {
document.write(
'I work for ${this.name[0]} ${this.name[1]} with employee id ${this.id}');
// I work for DelftStack with employee id 541
}
};
上述員工物件的前兩個成員是資料項，我們通常稱它們為物件的屬性/狀態。第三項是允許物件對資料做某事的函式，我們通常稱它為物件的方法/行為。
JavaScript 中的物件屬性
簡單來說，物件就是屬性的集合。JavaScript 物件中的資料項或值稱為其屬性。
除了只讀屬性，我們還可以新增、更新和刪除屬性。
在下面的程式碼中，我們解釋了訪問物件屬性的不同方法。
var student = {
rollNo: 'BSE541',
name: 'Joe Burns',
age: 23,
degree: 'Computer Science',
};
student.age; // accessing object using object.property
student[age]; // accessing object using object[property]
x = 'age';
student[x]; // using variable to access object's property
JavaScript 中的物件方法
簡單來說，JavaScript 物件可以執行的操作稱為方法。
var student = {
rollNo: 'BSE541',
name: 'Joe Burns',
age: 23,
degree: 'Computer Science',
};
document.getElementById('demo').innerHTML = 'Hi ' + student.name;
// print "Hi Joe Burns"
下面是演示 JavaScript 物件屬性和方法的完整 HTML 示例。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects Example</h2>
<p id="object"> </p>
<script>
const company = {
name:"DelftStack",
id:571,
location:"USA"
};
document.getElementById("object").innerHTML = company.name + " is a technology company registered in the " + company.location + " with id: " + company.id;
</script>
</body>
</html>
輸出：
JavaScript Objects Example
DelftStack is a technology company registered in the USA with id: 571