跳到主要内容

JavaScript 对象基础

什么是对象?

在 JavaScript 中,对象是一种复合数据类型,它允许你存储和组织相关数据和功能的集合。可以将对象想象成一个容器,里面可以装各种不同类型的值,这些值以键值对(key-value pairs)的形式存在。

JavaScript 是一种基于对象的语言 - 几乎 JavaScript 中的所有东西都是对象,或者可以被视为对象。

思考方式

可以把对象看作现实世界中的实体,比如一个人有姓名、年龄、地址等属性,还有说话、走路等行为。在 JavaScript 中,属性是变量,行为是函数。

对象的创建方式

在 JavaScript 中,有多种创建对象的方法。以下是最常见的三种:

1. 对象字面量

这是最简单和最常用的方法:

javascript
const person = {
firstName: "张",
lastName: "三",
age: 25,
greet: function() {
console.log("你好,我是" + this.firstName + this.lastName);
}
};

console.log(person.firstName); // 输出: 张
person.greet(); // 输出: 你好,我是张三

2. 使用 new Object() 构造函数

javascript
const car = new Object();
car.brand = "特斯拉";
car.model = "Model 3";
car.year = 2021;
car.displayInfo = function() {
console.log(this.year + "年" + this.brand + " " + this.model);
};

car.displayInfo(); // 输出: 2021年特斯拉 Model 3

3. 使用构造函数

javascript
function Student(name, age, grade) {
this.name = name;
this.age = age;
this.grade = grade;
this.introduce = function() {
console.log(`我叫${this.name},今年${this.age}岁,就读${this.grade}年级。`);
};
}

const student1 = new Student("小明", 15, "九");
student1.introduce(); // 输出: 我叫小明,今年15岁,就读九年级。

访问对象属性

我们可以通过两种方式访问对象的属性:

1. 点符号(Dot Notation)

javascript
const book = {
title: JavaScript 高级程序设计,
author: "尼古拉斯·泽卡斯",
pages: 816
};

console.log(book.title); // 输出: JavaScript高级程序设计
console.log(book.pages); // 输出: 816

2. 方括号符号(Bracket Notation)

javascript
console.log(book["author"]); // 输出: 尼古拉斯·泽卡斯

// 方括号符号的优势是可以使用变量作为属性名
const propertyName = "title";
console.log(book[propertyName]); // 输出: JavaScript高级程序设计

修改对象

JavaScript 对象是动态的,我们可以随时添加、修改或删除属性:

javascript
const computer = {
brand: "苹果",
model: "MacBook Pro",
year: 2020
};

// 修改属性
computer.year = 2021;

// 添加新属性
computer.memory = "16GB";

// 删除属性
delete computer.year;

console.log(computer);
// 输出: {brand: "苹果", model: "MacBook Pro", memory: "16GB"}

对象方法

对象方法是作为对象属性的函数。这使得对象可以"做事情":

javascript
const calculator = {
num1: 0,
num2: 0,

// 设置数字
setNumbers: function(a, b) {
this.num1 = a;
this.num2 = b;
},

// 加法方法
add: function() {
return this.num1 + this.num2;
},

// 乘法方法
multiply: function() {
return this.num1 * this.num2;
}
};

calculator.setNumbers(5, 3);
console.log(calculator.add()); // 输出: 8
console.log(calculator.multiply()); // 输出: 15

在 ES6 之后,可以使用更简洁的方法定义语法:

javascript
const calculator = {
num1: 0,
num2: 0,

setNumbers(a, b) {
this.num1 = a;
this.num2 = b;
},

add() {
return this.num1 + this.num2;
},

multiply() {
return this.num1 * this.num2;
}
};

this 关键字

在对象方法内部,this 关键字指的是"当前对象":

javascript
const user = {
name: "李四",
age: 30,
sayHello() {
console.log(`大家好,我是${this.name},今年${this.age}岁。`);
}
};

user.sayHello(); // 输出: 大家好,我是李四,今年30岁。
注意

this 的值取决于函数的调用方式,而不是函数的定义位置。在不同的上下文中,this 可能指向不同的对象。

对象的实际应用

示例:购物车系统

javascript
const shoppingCart = {
items: [],

addItem(name, price, quantity) {
this.items.push({
name: name,
price: price,
quantity: quantity
});
},

removeItem(name) {
this.items = this.items.filter(item => item.name !== name);
},

calculateTotal() {
let total = 0;
for (let i = 0; i < this.items.length; i++) {
total += this.items[i].price * this.items[i].quantity;
}
return total;
},

displayCart() {
console.log("购物车内容:");
this.items.forEach(item => {
console.log(`${item.name} - 单价:¥${item.price} - 数量:${item.quantity}`);
});
console.log(`总计: ¥${this.calculateTotal()}`);
}
};

// 使用购物车
shoppingCart.addItem("苹果", 3.5, 5);
shoppingCart.addItem("面包", 8.5, 2);
shoppingCart.addItem("牛奶", 6, 1);
shoppingCart.displayCart();
// 输出:
// 购物车内容:
// 苹果 - 单价:¥3.5 - 数量:5
// 面包 - 单价:¥8.5 - 数量:2
// 牛奶 - 单价:¥6 - 数量:1
// 总计: ¥40.5

shoppingCart.removeItem("面包");
shoppingCart.displayCart();
// 输出:
// 购物车内容:
// 苹果 - 单价:¥3.5 - 数量:5
// 牛奶 - 单价:¥6 - 数量:1
// 总计: ¥23.5

对象与JSON

JSON (JavaScript Object Notation) 是受 JavaScript 对象语法启发的数据格式,但它们之间有区别:

javascript
// JavaScript 对象
const jsObject = {
name: "王五",
age: 28,
hobbies: ["阅读", "游泳"]
};

// 转换为 JSON 字符串
const jsonString = JSON.stringify(jsObject);
console.log(jsonString);
// 输出: {"name":"王五","age":28,"hobbies":["阅读","游泳"]}

// 从 JSON 字符串转回 JavaScript 对象
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject.name); // 输出: 王五

JSON 在客户端与服务器之间传输数据时非常有用。

检查对象属性

我们可以检查一个对象是否包含特定的属性:

javascript
const laptop = {
brand: "联想",
model: "ThinkPad",
year: 2021
};

// 使用 in 运算符
console.log("brand" in laptop); // 输出: true
console.log("price" in laptop); // 输出: false

// 使用 hasOwnProperty 方法
console.log(laptop.hasOwnProperty("model")); // 输出: true
console.log(laptop.hasOwnProperty("color")); // 输出: false

遍历对象属性

我们可以使用 for...in 循环遍历对象的所有属性:

javascript
const phone = {
brand: "小米",
model: "Mi 11",
price: 3999,
color: "蓝色"
};

for (let key in phone) {
console.log(`${key}: ${phone[key]}`);
}
// 输出:
// brand: 小米
// model: Mi 11
// price: 3999
// color: 蓝色

其他遍历对象属性的方法:

javascript
// 获取所有键
const keys = Object.keys(phone);
console.log(keys); // 输出: ["brand", "model", "price", "color"]

// 获取所有值
const values = Object.values(phone);
console.log(values); // 输出: ["小米", "Mi 11", 3999, "蓝色"]

// 获取所有键值对
const entries = Object.entries(phone);
console.log(entries);
// 输出: [["brand", "小米"], ["model", "Mi 11"], ["price", 3999], ["color", "蓝色"]]

对象的使用场景

  1. 数据存储与组织:将相关数据组合在一起
  2. 配置对象:将程序的配置选项集中管理
  3. 命名空间:避免变量名冲突
  4. 模块化代码:将相关功能组织在一起
  5. 模拟类与实例:在ES6的类出现前,对象是实现面向对象编程的主要方式

总结

JavaScript 对象是一种强大、灵活的数据结构,它是理解和掌握 JavaScript 的核心内容。通过对象,我们可以:

  • 将相关数据组织在一起
  • 创建包含属性和方法的复杂数据结构
  • 模拟现实世界的实体
  • 组织和模块化代码

本文介绍了对象的基础知识,包括创建方式、属性访问、方法定义以及常见操作。掌握这些基础知识对于深入学习 JavaScript 至关重要。

练习与挑战

为了巩固所学知识,请尝试以下练习:

  1. 创建一个代表图书的对象,包含标题、作者、出版年份等属性,以及一个显示图书信息的方法。
  2. 创建一个简单的通讯录对象,能够添加、删除和查找联系人。
  3. 实现一个计算器对象,包含基本的数学运算功能。
  4. 创建一个学生管理系统,可以添加学生、记录成绩并计算平均分。

进一步学习的资源

掌握对象是理解 JavaScript 的重要一步。随着你的深入学习,你会发现对象在 JavaScript 中无处不在,而且理解它们的工作方式对于成为一名优秀的 JavaScript 开发者至关重要。