【JavaScript-Day 24】从零到一，精通 JavaScript 对象：创建、访问与操作-CSDN博客

本文链接：https://blog.csdn.net/Kiradzy/article/details/148240605

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”，模型上下文协议原理、实践与未来

JavaScript系列文章目录

文章目录

Langchain系列文章目录
Python系列文章目录
PyTorch系列文章目录
机器学习系列文章目录
深度学习系列文章目录
Java系列文章目录
JavaScript系列文章目录
前言
一、对象的概念：不止是“键值对”
- 1.1 什么是 JavaScript 对象？
- 1.2 为什么对象如此重要？
二、创建对象的“魔法”
三、访问、修改和删除属性/方法
四、对象作为复杂数据结构
五、总结

前言

欢迎来到我们 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(); // 调用方法