从0开始学前端 第二十四课：JavaScript对象

第二十四课：JavaScript对象

学习目标

在本课中，我们将深入探究以下主题：

1. JavaScript中对象的基本概念。
2. 如何创建对象。
3. 如何访问和操作对象的属性。

完成本课后，你应该能够创建你自己的对象，并对其进行一系列操作。

学习内容

对象的概念

在JavaScript中，一个对象是一个包含多个值的复合数据类型。每个值都有一个与之关联的名称，这个名称被称为“键”（或属性名），而值可以是数据或者函数。对象可以被视为一个存储属性（键值对）的容器。

创建对象：

你可以使用对象字面量来创建对象，这涉及到使用大括号 {}。

let person = {
    firstName: 'Alice',
    lastName: 'Johnson',
    age: 25
};

在上面的例子中，person 对象具有三个属性：firstName、lastName 和 age。

访问对象属性：

你可以通过点表示法或括号表示法来访问对象的属性。

• 点表示法：object.property
• 括号表示法：object['property']

console.log(person.firstName);  // 使用点表示法，预计输出: Alice
console.log(person['lastName']); // 使用括号表示法，预计输出: Johnson

代码示例与预计输出效果

// 创建一个对象
let book = {
    title: "Learning JavaScript",
    author: "Ethan Brown",
    pages: 280,
    publishedYear: 2019
};

// 访问对象的属性
console.log(book.title);  // 预计输出: Learning JavaScript
console.log(book['author']); // 预计输出: Ethan Brown

// 添加属性
book.publisher = "No Starch Press";
console.log(book.publisher); // 预计输出: No Starch Press

// 修改属性
book.pages = 300;
console.log(book.pages); // 预计输出: 300

// 删除属性
delete book.publishedYear;
console.log(book.publishedYear); // 预计输出: undefined

课后练习

1. 创建一个名为 car 的对象，它有 brand、model 和 year 三个属性，分别赋值为你最喜欢的汽车品牌、型号和制造年份。
2. 打印 car 对象的 model 属性。
3. 向 car 对象添加一个名为 color 的新属性，并为它赋值。
4. 更改 car 对象的 year 属性。
5. 删除 car 对象的 brand 属性，并验证它是否被删除。

解析

对于第一个练习，你将创建一个简单的对象：

let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2021
};

第二个练习，打印 model 属性：

console.log(car.model); // 预计输出: Corolla

第三个练习，添加 color 属性：

car.color = 'red';
console.log(car.color); // 预计输出: red

第四个练习，变更 year 属性：

car.year = 2022;
console.log(car.year); // 预计输出: 2022

最后一个练习，删除 brand 属性：

delete car.brand;
console.log(car.brand); // 预计输出: undefined

通过这些练习，你将加深对JavaScript对象的理解，并学会如何操作对象的属性。

---

章节目录
第二十五课：JavaScript中的类（Class）基础概念