在 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