第5课：对象与类——JS的“信息收纳盒”

生活从不会亏待每一个努力向上的人，愿你带着满腔热忱，无畏前行，用汗水书写青春的华章，用拼搏铸就人生的辉煌，今日的每一份付出，都将是未来成功的基石！

欢迎来到「JavaScript 魔法学院」第 5 课！前几课我们学会了用变量存储零散数据，但如果要管理 一个人的完整信息（姓名+年龄+爱好），该怎么做呢？今天的主角对象（Object） 就是为这种场景而生！最后带大家用对象开发学生信息管理系统，Let’s go!

一、对象：数据的“收纳大师”

1. 为什么需要对象？

现实场景：

用普通变量存储用户信息：

const userName = "小明";
const userAge = 18;
const userHobby = ["篮球", "音乐"];

缺点： 变量散落，难以关联和管理

对象解决方案：

const user = {name: "小明",age: 18,hobby: ["篮球", "音乐"]
};

2. 对象的组成

属性： 键值对（key-value）的集合

const phone = {brand: "华为",  // brand 是键，"华为" 是值price: 3999,is5G: true
};

方法： 值为函数的属性（对象能执行的“动作”）

const dog = {name: "旺财",bark: function() {console.log("汪汪汪汪汪汪！");}
};
dog.bark();  // 调用方法

二、对象的“四大操作”

1. 创建对象

① 字面量创建（推荐）

const student = {name: "李雷",score: 95,study: function() {console.log("学习中...");}
};

② 构造函数创建

const student = new Object();
student.name = "李雷";
student.score = 95;

2. 访问属性

点运算符

console.log(student.name);  // "李雷"
方括号（适合动态属性名）

方括号（适合动态属性名）

const key = "score";
console.log(student[key]);  // 95

3. 修改/添加属性

student.age = 18;          // 添加新属性
student.score = 100;       // 修改已有属性
student["graduated"] = false; // 方括号方式

4. 删除属性

delete student.graduated;  // 删除属性

四、类：对象的“批量生产模具”

1. 现实类比

对象： 一部具体的手机(如“华为 Mate60”)

类： 手机的设计图纸，规定了所有手机的共同特征（品牌、型号、开机方法）

2. 基本语法

 // 定义手机类
class Phone {// 构造函数：设置初始属性constructor(brand, model) {this.brand = brand;  // this指向新创建的对象this.model = model;}// 方法：所有手机共享的功能powerOn() {console.log(`${this.brand} ${this.model} 已开机！`);}
}
// 通过类创建对象
const myPhone1 = new Phone("华为", "Mate60");
const myPhone2 = new Phone("苹果", "iPhone16");
myPhone1.powerOn();  // 华为 Mate60 已开机！
myPhone2.powerOn();  // 苹果 iPhone16 已开机！

关键结论： class 是语法糖，本质仍是原型继承（后续课程详解）

五、实战：学生信息管理系统

1. 功能需求

• 添加学生信息（姓名、学号、成绩）
• 显示所有学生平均分
• 根据学号查找学生

2. 完整代码

const students = [];  // 存储所有学生对象// 添加学生function addStudent(name, id, score) {students.push({name: name,id: id,score: score});}// 计算平均分function getAverage() {let total = 0;for (let i = 0; i < students.length; i++) {total += students[i].score;}return total / students.length;}// 根据学号查找function findStudent(id) {return students.find(stu => stu.id === id);}// 测试功能addStudent("张三", "2024001", 85);addStudent("李四", "2024002", 92);console.log(getAverage());  // 88.5console.log(findStudent("2024001"));  // 显示张三对象

3. 代码解析

• 用 对象数组 结构化存储数据

• for 循环计算平均分

• find() 方法实现条件查询（后面会详细讲解）

下节预告

第 6 课：DOM 操作进阶——网页的“变形术”

• 动态创建/删除元素

• 元素样式的高级操作

• 实战：开发「待办事项列表」！

回复【JS】获取本课源码+工具包！