Geogebra高级篇009—JavaScript中的对象与图书管理系统案例

在现代 JavaScript 开发中，对象是最基础也是最重要的组成部分之一。无论是用于存储数据、处理逻辑，还是构建复杂的应用程序，了解对象的特性和操作都是至关重要的。同时，ES6 引入的 Map 和 Set 作为新的数据结构，为开发者提供了更灵活和高效的方式来管理数据。在本篇博客中，我们将深入探讨 JavaScript 中对象的创建、操作和删除方法，以及如何将其与 Map 和 Set 进行对比。最后，我们还将通过一个综合案例，展示如何在实际应用中灵活运用这些概念，帮助您提升开发技能，构建更高效的 Geogebra应用。

---

一、JavaScript 对象

上一篇讲到了Set 和 Map，但技术交流群中有朋友反馈说JavaScript 对象还不懂。考虑到JavaScript 对象是JavaScript编程的基石，所以我单独写一篇博文来讲解一下JavaScript 对象，希望可以帮到你。（若需进技术交流群，欢迎在文末关注微信公众号，即可获取入群方式）。

1. 什么是JavaScript 对象

JavaScript 对象是存储一组相关数据和功能的集合，通常以键值对的形式表示。对象可以用来表示现实世界中的实体，比如用户、产品或任何其他需要存储多个属性的数据结构。

看到这里不懂没关系，毕竟概念性的东西确实不好理解。我们继续往下看：

2. 如何创建对象

(1) 使用对象字面量创建

const person = {
    name: 'Alice',
    age: 30,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

这里创建了一个人对象，里边分别有名字、年龄属性，并且还有打招呼的方法。注意这种语法结构，如果不认识的话可以先记下来，因为程序的格式是这样，也不太好过多的解释。（高级篇稍微需要一点编程基础，后续有时间我出一个B站教学视频）

(2) 使用 new Object（）创建

const person = new Object();
person.name = 'Alice';
person.age = 30;

(3) 使用构造函数创建

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}

const alice = new Person('Alice', 30);

(4) 使用 class 语法（ES6）创建

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const alice = new Person('Alice', 30);

因为对象是一个数据结构，既然创建那肯定是要使用的，接下来我们看下怎么使用。

3. 如何使用对象

(1) 访问属性

console.log(person.name); // 'Alice'
console.log(person['age']); // 30

为什么要访问对象？比如在Geogebra中我创建了一个点对象，对象里包含了这个点的绝对位置、相对位置，那么我在得到这个对象后就可以了调整两个位置参数，从而让这个对象完成某种动画。

(2) 修改属性

person.age = 31;

(3) 添加属性

person.gender = 'female';

注意，这个点后如果写了一个对象没有的键，编译器会默认是你要给对象添加属性，所以程序没有按照逻辑运行时，一定要检查下是否多属性了。这个地方很容易出问题。

(4) 删除属性

delete person.age;

(5) 遍历属性

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}

(6) 获取所有的属性名和属性值

const keys = Object.keys(person); // 获取所有属性名
const values = Object.values(person); // 获取所有属性值

二、与 Set 和 Map 的对比

1. 对象（Object）

1. 主要用于存储键值对，键只能是字符串或 Symbol。
2. 不保证键的顺序。

2. Map

1. 可以使用任意类型的值作为键。
2. 保持插入的顺序，支持迭代。

3. Set

1. 用于存储唯一值，不能重复。
2. 只能存储值，不支持键值对。

这三个在JavaScript中很是灵魂，建议多在IDE中练练。

三、综合案例

下面是一个综合示例，展示如何使用对象、Set 和 Map 来创建一个简单的图书管理系统。（主要练一下JavaScript哈，所以不是Geogebra的案例）

// 创建一个图书对象构造函数
class Book {
    constructor(title, author, year) {
        this.title = title;
        this.author = author;
        this.year = year;
        this.borrowed = false;
    }
}

// 创建一个图书管理系统
class Library {
    constructor() {
        this.books = new Map(); // 存储图书信息
        this.borrowers = new Set(); // 存储借书人
    }

    addBook(book) {
        if (!this.books.has(book.title)) {
            this.books.set(book.title, book);
            console.log(`添加图书: ${book.title}`);
        } else {
            console.log(`图书 ${book.title} 已存在。`);
        }
    }

    removeBook(title) {
        if (this.books.delete(title)) {
            console.log(`移除图书: ${title}`);
        } else {
            console.log(`图书 ${title} 不存在。`);
        }
    }

    borrowBook(title, borrower) {
        const book = this.books.get(title);
        if (book && !book.borrowed) {
            book.borrowed = true;
            this.borrowers.add(borrower);
            console.log(`${borrower} 借走了 ${title}`);
        } else {
            console.log(`图书 ${title} 不可借或已被借走。`);
        }
    }

    returnBook(title) {
        const book = this.books.get(title);
        if (book && book.borrowed) {
            book.borrowed = false;
            console.log(`图书 ${title} 已归还`);
        } else {
            console.log(`图书 ${title} 不是借出的。`);
        }
    }

    listBooks() {
        console.log('图书列表:');
        this.books.forEach((book, title) => {
            console.log(`${title} by ${book.author}, Year: ${book.year}, Borrowed: ${book.borrowed}`);
        });
    }
}

// 示例操作
const library = new Library();
const book1 = new Book('1984', 'George Orwell', 1949);
const book2 = new Book('To Kill a Mockingbird', 'Harper Lee', 1960);

library.addBook(book1);
library.addBook(book2);
library.listBooks();

library.borrowBook('1984', 'Alice');
library.borrowBook('1984', 'Bob'); // 不能借出已借的书
library.listBooks();

library.returnBook('1984');
library.borrowBook('1984', 'Bob'); // 现在可以借出
library.listBooks();

library.removeBook('To Kill a Mockingbird');
library.listBooks();

运行效果如下：

四、文章最后

若有任何需要或问题，都可以点击下方链接关注微信公众号与我取得联系。祝您生活愉快。