【JavaScript-Day 24】从零到一，精通 JavaScript 对象：创建、访问与操作
Langchain系列文章目录
01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南
02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖
03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南
04-玩转 LangChain：从文档加载到高效问答系统构建的全程实战
05-玩转 LangChain：深度评估问答系统的三种高效方法（示例生成、手动评估与LLM辅助评估）
06-从 0 到 1 掌握 LangChain Agents：自定义工具 + LLM 打造智能工作流！
07-【深度解析】从GPT-1到GPT-4：ChatGPT背后的核心原理全揭秘
08-【万字长文】MCP深度解析：打通AI与世界的“USB-C”，模型上下文协议原理、实践与未来
Python系列文章目录
PyTorch系列文章目录
机器学习系列文章目录
深度学习系列文章目录
Java系列文章目录
JavaScript系列文章目录
01-【JavaScript-Day 1】从零开始：全面了解 JavaScript 是什么、为什么学以及它与 Java 的区别
02-【JavaScript-Day 2】开启 JS 之旅：从浏览器控制台到 ＜script＞ 标签的 Hello World 实践
03-【JavaScript-Day 3】掌握JS语法规则：语句、分号、注释与大小写敏感详解
04-【JavaScript-Day 4】var 完全指南：掌握变量声明、作用域及提升
05-【JavaScript-Day 5】告别 var 陷阱：深入理解 let 和 const 的妙用
06-【JavaScript-Day 6】从零到精通：JavaScript 原始类型 String, Number, Boolean, Null, Undefined, Symbol, BigInt 详解
07-【JavaScript-Day 7】全面解析 Number 与 String：JS 数据核心操作指南
08-【JavaScript-Day 8】告别混淆：一文彻底搞懂 JavaScript 的 Boolean、null 和 undefined
09-【JavaScript-Day 9】从基础到进阶：掌握 JavaScript 核心运算符之算术与赋值篇
10-【JavaScript-Day 10】掌握代码决策核心：详解比较、逻辑与三元运算符
11-【JavaScript-Day 11】避坑指南！深入理解JavaScript隐式和显式类型转换
12-【JavaScript-Day 12】掌握程序流程：深入解析 if…else 条件语句
13-【JavaScript-Day 13】告别冗长if-else：精通switch语句，让代码清爽高效！
14-【JavaScript-Day 14】玩转 for 循环：从基础语法到遍历数组实战
15-【JavaScript-Day 15】深入解析 while 与 do…while 循环：满足条件的重复执行
16-【JavaScript-Day 16】函数探秘：代码复用的基石——声明、表达式与调用详解
17-【JavaScript-Day 17】函数的核心出口：深入解析 return 语句的奥秘
18-【JavaScript-Day 18】揭秘变量的“隐形边界”：深入理解全局与函数作用域
19-【JavaScript-Day 19】深入理解 JavaScript 作用域：块级、词法及 Hoisting 机制
20-【JavaScript-Day 20】揭秘函数的“记忆”：深入浅出理解闭包（Closure）
21-【JavaScript-Day 21】闭包实战：从模块化到内存管理，高级技巧全解析
22-【JavaScript-Day 22】告别 function 关键字？ES6 箭头函数 (=>) 深度解析
23-【JavaScript-Day 23】告别繁琐的参数处理：玩转 ES6 默认参数与剩余参数
24-【JavaScript-Day 24】从零到一，精通 JavaScript 对象：创建、访问与操作
文章目录
- Langchain系列文章目录
- Python系列文章目录
- PyTorch系列文章目录
- 机器学习系列文章目录
- 深度学习系列文章目录
- Java系列文章目录
- JavaScript系列文章目录
- 前言
- 一、对象的概念：不止是“键值对”
- 1.1 什么是 JavaScript 对象？
- 1.2 为什么对象如此重要？
- 二、创建对象的“魔法”
- 2.1 对象字面量 `{}`：最常用的方式
- 2.1.1 基本语法
- 2.1.2 示例：创建一个 `car` 对象
- 2.2 `new Object()` 构造函数
- 2.2.1 基本语法
- 2.2.2 示例：使用 `new Object()` 创建 `book` 对象
- 三、访问、修改和删除属性/方法
- 3.1 访问属性和方法
- 3.1.1 点表示法（`.`）
- （1） 语法
- （2） 示例
- 3.1.2 方括号表示法（`[]`）
- （1） 语法
- （2） 为什么需要方括号表示法？
- （3） 示例
- 3.2 添加和修改属性/方法
- 3.3 删除属性
- 四、对象作为复杂数据结构
- 五、总结
前言
欢迎来到我们 JavaScript 学习之旅的第 24 天！今天，我们将踏入 JavaScript 世界中一个极其核心且强大的领域——对象（Object）。在 JavaScript 中，流传着一句“万物皆对象”的说法，虽然不完全精确，但足以说明对象的重要性。从简单的数据集合到复杂的程序模块，对象无处不在。理解对象，是掌握 JavaScript 精髓的关键一步。本文将带您系统地学习 JavaScript 对象的基础知识，包括它的概念、创建方式、属性访问与操作方法，并通过丰富的示例，助您打下坚实的面向对象编程基础。
一、对象的概念：不止是“键值对”
在现实世界中，一个“对象”通常指一个具体的事物，比如一辆车、一个人或一台电脑。这些事物都有其属性（如车的颜色、品牌；人的姓名、年龄）和行为（如车能跑；人能走、能说）。JavaScript 中的对象正是对这种现实概念的映射。
1.1 什么是 JavaScript 对象？
在 JavaScript 中，对象（Object）是一种复合数据类型，它允许我们将多个**属性（Property）和方法（Method）**封装在一个独立的实体中。
- 属性（Property）：是对象所拥有的特征或数据。它由一个键（Key）（也称为属性名，通常是字符串或 Symbol）和一个**值（Value）**组成。值可以是任何 JavaScript 数据类型，包括数字、字符串、布尔值、数组，甚至可以是另一个对象或函数。
- 方法（Method）：是对象能够执行的行为或操作。它本质上是一个值为函数的属性。
可以将其想象成一个无序的**键值对（Key-Value Pair）**集合。
// 示例：描述一个 'person' 对象 let person = { name: "张三", // 属性：姓名 age: 30, // 属性：年龄 isStudent: false, // 属性：是否是学生 address: { // 属性：值是另一个对象 city: "北京", street: "中关村大街" }, greet: function() { // 方法：打招呼 console.log("你好，我是 " + this.name + "！"); } };1.2 为什么对象如此重要？
- 组织性：对象允许我们将相关的数据和功能组织在一起，使代码结构更清晰、更易于管理。
- 封装性：将内部细节隐藏起来，只暴露必要的接口（属性和方法），提高了代码的安全性和可维护性。
- 灵活性：JavaScript 对象是动态的，可以在运行时添加、修改或删除属性和方法。
- 表达力：能够非常自然地模拟现实世界中的实体和概念。
二、创建对象的“魔法”
JavaScript 提供了多种创建对象的方式，其中最常用的是对象字面量和 new Object() 构造函数。
2.1 对象字面量 {}：最常用的方式
对象字面量是创建对象最简单、最直观，也是最推荐的方式。它使用花括号 {} 来定义对象，并在其中包含零个或多个键值对。
2.1.1 基本语法
let objectName = { key1: value1, key2: value2, // ... methodName: function() { // 方法体 } };2.1.2 示例：创建一个 car 对象
// 使用对象字面量创建一个 car 对象 let car = { brand: "Tesla", // 品牌属性 model: "Model S", // 型号属性 color: "红色", // 颜色属性 year: 2024, // 年份属性 isRunning: false, // 运行状态属性 // 启动方法 start: function() { this.isRunning = true; console.log(this.brand + " " + this.model + " 已启动！"); }, // 停止方法 stop: function() { this.isRunning = false; console.log(this.brand + " " + this.model + " 已停止。"); } }; console.log(car); // 输出整个 car 对象 car.start(); // 调用 start 方法 console.log("车辆运行状态:", car.isRunning); // 输出 true优点：语法简洁、可读性高、性能较好。
2.2 new Object() 构造函数
虽然不如对象字面量常用，但你也可以使用内置的 Object 构造函数来创建对象，然后动态地为其添加属性和方法。
2.2.1 基本语法
let objectName = new Object(); // 创建一个空对象 // 动态添加属性和方法 objectName.key1 = value1; objectName.key2 = value2; objectName.methodName = function() { // 方法体 };2.2.2 示例：使用 new Object() 创建 book 对象
// 使用 new Object() 创建一个 book 对象 let book = new Object(); // 添加属性 book.title = "JavaScript 权威指南"; book.author = "David Flanagan"; book.pages = 1096; book.isPublished = true; // 添加方法 book.displayInfo = function() { console.log("书名: " + this.title + ", 作者: " + this.author); }; console.log(book); book.displayInfo(); // 调用 displayInfo 方法比较：通常情况下，推荐使用对象字面量，因为它更简洁、更高效。new Object() 的方式在某些特定场景下可能有用，但日常开发中较少直接使用。
三、访问、修改和删除属性/方法
创建对象后，我们需要能够与其进行交互，包括读取、设置和移除它的成员。
3.1 访问属性和方法
JavaScript 提供了两种主要的方式来访问对象的属性和方法：
3.1.1 点表示法（.）
这是最常用、最直观的方式，只要属性名是有效的 JavaScript 标识符（不含特殊字符、不以数字开头），就可以使用点表示法。
（1） 语法
objectName.propertyName objectName.methodName() // 调用方法时需要加括号
（2） 示例
console.log(car.brand); // 输出: Tesla console.log(car.color); // 输出: 红色 car.start(); // 输出: Tesla Model S 已启动！
3.1.2 方括号表示法（[]）
方括号表示法更灵活，它允许使用字符串（甚至是变量）作为属性名。
（1） 语法
objectName["propertyName"] objectName[variableContainingPropertyName] objectName["methodName"]() // 调用方法
（2） 为什么需要方括号表示法？
- 属性名是变量：当你需要通过一个变量来动态决定访问哪个属性时。
- 属性名包含特殊字符：如果属性名包含空格、连字符 -，或者不是有效的标识符。
- 属性名是数字（虽然不推荐，但有时会遇到）。
（3） 示例
let car = { brand: "BMW", "model-X": "X5", // 包含连字符的属性名 "engine type": "Petrol", // 包含空格的属性名 1: "First Gear" // 数字属性名 }; let propToAccess = "brand"; // 使用方括号访问 console.log(car["brand"]); // 输出: BMW console.log(car[propToAccess]); // 输出: BMW (使用变量) console.log(car["model-X"]); // 输出: X5 (访问含特殊字符的属性) console.log(car["engine type"]); // 输出: Petrol console.log(car[1]); // 输出: First Gear // 尝试使用点表示法访问特殊属性名会报错 // console.log(car.model-X); // 这会被解释为 car.model 减去 X，导致错误或非预期结果 // console.log(car.engine type); // 语法错误选择建议：如果属性名是有效的标识符且已知，优先使用点表示法，因为它更简洁。否则，使用方括号表示法。
3.2 添加和修改属性/方法
JavaScript 对象是动态的，你可以随时向现有对象添加新属性/方法，或修改已有属性/方法的值，只需使用赋值操作符 = 即可。
let myComputer = { brand: "Apple", type: "MacBook Pro" }; // 添加新属性 myComputer.year = 2023; myComputer["screen-size"] = 16; // 使用方括号添加 // 添加新方法 myComputer.boot = function() { console.log(this.brand + " 正在启动..."); }; // 修改现有属性 myComputer.type = "MacBook Air"; console.log(myComputer); myComputer.boot();3.3 删除属性
如果你需要从对象中移除某个属性，可以使用 delete 操作符。
let user = { id: 101, name: "Alice", email: "alice@example.com", isAdmin: false }; console.log("删除前:", user); // 删除 isAdmin 属性 delete user.isAdmin; console.log("删除后:", user); // isAdmin 属性已不存在 // 注意：delete 操作符只能删除对象的自有属性，不能删除原型链上的属性。 // 它返回 true 表示删除成功（或属性不存在），返回 false 通常意味着删除失败（如删除不可配置的属性）。四、对象作为复杂数据结构
对象的强大之处在于其值的灵活性。一个对象可以包含各种数据类型，包括其他对象和数组，这使得我们能够构建非常复杂和层次化的数据结构，以精确地模拟现实世界或应用程序的数据模型。
let project = { projectName: "在线商城", startDate: "2024-01-01", teamMembers: [ // 属性值是数组 { name: "张三", role: "项目经理" }, // 数组元素是对象 { name: "李四", role: "前端开发" }, { name: "王五", role: "后端开发" } ], status: { // 属性值是对象 code: 1, description: "进行中" }, launch: function() { console.log(this.projectName + " 项目启动！"); } }; console.log(project.teamMembers[1].name); // 输出: 李四 console.log(project.status.description); // 输出: 进行中 project.launch(); // 调用方法五、总结
恭喜你！今天我们深入探讨了 JavaScript 对象的基础知识。通过本文，我们学习了：
- 对象的概念：对象是键值对的无序集合，用于封装属性和方法，是 JavaScript 中组织数据和功能的核心机制。
- 创建对象的方式：我们掌握了最常用的对象字面量 {} 和 new Object() 构造函数两种方法，并了解到前者通常是首选。
- 访问属性/方法：学习了点表示法 . 和方括号表示法 []，并理解了它们各自的适用场景。
- 操作对象：我们学会了如何动态地添加、修改和删除对象的属性和方法，体现了 JavaScript 的灵活性。
- 对象的复杂性：认识到对象可以包含其他对象和数组，从而构建复杂的数据结构。
对象是 JavaScript 编程的基石。在接下来的学习中，我们将继续探索对象的更多高级特性，如 for...in 循环遍历、构造函数、原型、ES6 Class 等。扎实掌握对象的基础，将为你的 JavaScript 之旅扫清障碍。
