菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

Java

【Java Web学习 | 第十篇】JavaScript(4) 对象

likuolei

【Java Web学习 | 第十篇】JavaScript(4) – 对象（Object）深度详解（2026最新版）

恭喜你完成数组与函数进阶！
对象（Object） 是 JavaScript 中最重要、最核心的数据结构。在 Java Web 开发中，后端 Spring Boot 返回的 JSON 数据本质上就是对象或对象数组，几乎所有前后端数据交互都围绕对象展开。

本篇将从基础到进阶，系统讲解对象的使用，帮助你轻松处理后端返回的 User、Order、Product 等实体数据。

1. 对象基础创建与访问

// 1. 对象字面量（最常用方式）
const user = {
    id: 1001,
    username: "chongyang",
    email: "chongyang@example.com",
    age: 26,
    isActive: true,
    roles: ["USER", "ADMIN"],           // 数组作为属性
    profile: {                          // 嵌套对象
        avatar: "https://example.com/avatar.jpg",
        bio: "热爱 Java Web 全栈开发",
        joinDate: "2025-03-01"
    }
};

// 2. 访问属性（两种方式）
console.log(user.username);                    // 点语法（推荐，属性名合法时使用）
console.log(user["email"]);                    // 方括号语法（属性名是变量或含特殊字符时使用）

// 3. 可选链（Optional Chaining）—— 2026 强烈推荐，避免报错
console.log(user.profile?.bio);                // "热爱 Java Web 全栈开发"
console.log(user.address?.city);               // undefined（安全，不会报错）

2. 对象解构赋值（ES6 最实用特性之一）

对象解构是处理后端返回 JSON 时最高频的操作，能极大提升代码可读性。

// 基本解构
const { username, email, age } = user;
console.log(username, email, age);

// 重命名 + 默认值
const { 
    username: loginName,           // 重命名
    age: userAge = 18,             // 默认值
    isActive: active = false 
} = user;

console.log(loginName);   // chongyang

// 嵌套对象解构
const { 
    profile: { bio, avatar },
    roles 
} = user;

console.log(bio);

实战技巧：从后端接口返回的大对象中精准提取需要的数据。

3. 对象展开运算符（…）—— 不可变数据更新神器

// 1. 复制对象（浅拷贝）
const userCopy = { ...user };

// 2. 添加/修改属性（推荐写法，不修改原对象）
const updatedUser = {
    ...user,
    age: 27,                                   // 修改年龄
    lastLogin: new Date().toISOString(),       // 新增字段
    profile: {
        ...user.profile,
        bio: "已更新个人简介"                    // 修改嵌套对象
    }
};

// 3. 合并多个对象
const defaultSettings = { theme: "light", language: "zh" };
const userSettings = { ...defaultSettings, theme: "dark" };

重要：展开运算符是浅拷贝，嵌套对象仍为引用。如果需要深拷贝，可使用 structuredClone()（现代浏览器支持）或 lodash 的 cloneDeep。

4. 对象常用方法（ES6+）

// 1. Object.keys() / values() / entries()
console.log(Object.keys(user));      // ["id", "username", "email", ...]
console.log(Object.values(user));    // [1001, "chongyang", ...]
console.log(Object.entries(user));   // [["id", 1001], ["username", "chongyang"], ...]

// 2. for...in 循环（遍历对象自身属性）
for (let key in user) {
    if (user.hasOwnProperty(key)) {   // 过滤原型链属性
        console.log(key, user[key]);
    }
}

// 3. Object.assign()（合并对象，较老写法）
const merged = Object.assign({}, defaultSettings, userSettings);

5. 对象与 JSON（前后端交互核心）

// 前端 → 后端：对象转 JSON 字符串
const jsonStr = JSON.stringify(updatedUser);
console.log(jsonStr);

// 后端 → 前端：JSON 字符串转对象
const receivedUser = JSON.parse(jsonStr);
console.log(receivedUser);

// 注意：JSON 不支持函数、undefined、Date 等类型，会自动转换

6. 实战示例：处理后端返回的用户信息并渲染

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>对象实战 - 用户信息展示</title>
    <style>
        .card { max-width: 500px; margin: 30px auto; padding: 24px; border: 1px solid #ddd; border-radius: 12px; background: white; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <div class="card" id="userCard"></div>

    <script>
        // 模拟后端返回的数据
        const apiResponse = {
            code: 200,
            message: "success",
            data: {
                id: 1001,
                username: "chongyang",
                email: "chongyang@example.com",
                age: 26,
                roles: ["USER", "ADMIN"],
                profile: {
                    bio: "Java Web 全栈学习者",
                    avatar: "https://picsum.photos/id/64/200"
                }
            }
        };

        // 处理并渲染（企业常用模式）
        function renderUserInfo(response) {
            const { code, data } = response;   // 解构

            if (code !== 200) {
                document.getElementById('userCard').innerHTML = `<p style="color:red">请求失败：${response.message}</p>`;
                return;
            }

            const { username, email, age, roles, profile } = data;

            const html = `
                <img src="${profile.avatar}" alt="头像" style="width:80px;height:80px;border-radius:50%;float:right;">
                <h2>${username}</h2>
                <p><strong>邮箱：</strong>${email}</p>
                <p><strong>年龄：</strong>${age}</p>
                <p><strong>角色：</strong>${roles.join("、")}</p>
                <p><strong>简介：</strong>${profile.bio}</p>
            `;

            document.getElementById('userCard').innerHTML = html;
        }

        // 执行渲染
        renderUserInfo(apiResponse);
    </script>
</body>
</html>

7. 小练习（建议立即完成）

  1. 给定后端返回的对象，解构出 username、email、profile.bio，并打印。
  2. 使用展开运算符创建一个新对象：在原 user 基础上增加 lastLoginTime 和 loginCount: 15，不修改原对象。
  3. 写一个函数 formatUser(user)，接收用户对象，返回格式化后的字符串：用户名: xxx，年龄: xx，角色: xxx。
  4. 使用 Object.entries() 遍历对象，并把每个键值对以 "key: value" 形式输出。

下一篇文章预告：《【Java Web学习 | 第十一篇】JavaScript(5) – 异步编程（Promise + async/await）与 Fetch API》

我们将进入真正的前后端交互部分：学习如何使用 fetch 调用 Spring Boot 的 RESTful API，实现登录、查询用户列表、提交表单等功能。

本篇核心总结（快记口诀）：

  • 创建：{} 对象字面量
  • 访问：点语法 + 可选链 ?.
  • 解构：const {a, b} = obj
  • 更新：{ ...oldObj, newProp: value }
  • 转换：JSON.stringify() / JSON.parse()

有问题随时问：

  • 想要更多嵌套对象解构示例？
  • 需要对象深拷贝完整方案？
  • 或直接进入 异步 + Fetch 篇？

回复“给我练习答案”或“下一篇 Fetch”，我立刻继续！

对象是 JavaScript 的灵魂，掌握后你处理后端 JSON 数据会变得非常轻松。继续加油，你的 Java Web 全栈之路已经进入关键交互阶段！🚀

网站 http://yingjuxia.com
文章已创建 5288

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部