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

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

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

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

1. 为什么需要对象？

现实场景：

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

js 复制代码

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

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

对象解决方案：

js 复制代码

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

2. 对象的组成

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

js 复制代码

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

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

js 复制代码

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

二、对象的"四大操作"

1. 创建对象

① 字面量创建（推荐）

js 复制代码

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

② 构造函数创建

js 复制代码

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

2. 访问属性

点运算符

javascript 复制代码

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

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

js 复制代码

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

3. 修改/添加属性

js 复制代码

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

4. 删除属性

js 复制代码

delete student.graduated;  // 删除属性

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

1. 现实类比

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

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

2. 基本语法

js 复制代码

 // 定义手机类
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. 完整代码

js 复制代码

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.5
        console.log(findStudent("2024001"));  // 显示张三对象

3. 代码解析

用对象数组结构化存储数据
for 循环计算平均分
find() 方法实现条件查询（后面会详细讲解）

下节预告

第 6 课：DOM 操作进阶------网页的"变形术"

动态创建/删除元素
元素样式的高级操作
实战：开发「待办事项列表」！

关注公众号，回复【JS】获取本课源码+工具包！